メインコンテンツまでスキップ

ナビゲーションバーブロック

Navbarコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなナビゲーションバーです。モダンなデザインパターン、柔軟なレイアウトセクション、カスタマイズ可能なコンテンツエリアを備えた完全なWebサイトナビゲーションインターフェースを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-navbar-block@0.2.0

📖 使用法​

import {Navbar} from '@nodeblocks/frontend-navbar-block';
ライブエディター
function BasicNavbar() {
  return (
    <Navbar
      leftContent={<Navbar.Logo src="/img/icon-small.png" alt="Company Logo" style={{height: 32}} />}
      centerContent={
        <div style={{display: 'flex', gap: 16}}>
          <Navbar.Link href="#home">ホーム</Navbar.Link>
          <Navbar.Link href="#about">概要</Navbar.Link>
          <Navbar.Link href="#services">サービス</Navbar.Link>
          <Navbar.Link href="#contact">お問い合わせ</Navbar.Link>
        </div>
      }
      rightContent={<Navbar.ButtonLink href="#login">ログイン</Navbar.ButtonLink>}
      sx={{backgroundColor: 'white', boxShadow: 1}}
    >
      <Navbar.Left />
      <Navbar.Center />
      <Navbar.Right />
    </Navbar>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントプロパティ​

プロパティ型デフォルト説明
leftContentReactNode必須ナビゲーションバーの左セクションに表示するコンテンツ（通常はロゴ）
centerContentReactNode必須ナビゲーションバーの中央セクションに表示するコンテンツ（通常はナビゲーションリンク）
rightContentReactNode必須ナビゲーションバーの右セクションに表示するコンテンツ（通常はユーザーアクション/ボタン）
spacingnumber | ResponsiveValue3左、中央、右セクション間のスペーシング
directionStackDirection'row'ナビゲーションバーセクションのレイアウト方向
classNamestringundefinedナビゲーションバーコンテナのスタイリング用の追加CSSクラス名
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ
childrenBlocksOverrideundefinedデフォルトブロックをオーバーライドするか、カスタムナビゲーションバーセクションを追加する関数

デフォルトsx:

{
  alignItems: 'center',
  px: 3,
  py: 1.5
}

注意: メインコンポーネントはすべてのMUI Stackプロパティを継承します。component="nav"を介してnav要素としてレンダリングされます。

サブコンポーネント​

Navbarコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ナビゲーションバーの左セクションをレンダリングします。通常はロゴを含みます。

プロパティ型デフォルト説明
childrenReactNodeコンテキストのleftContent左セクションに表示するコンテンツ（コンテキストのleftContentをオーバーライド）
leftContentReactNodeコンテキストから左コンテンツを提供する別の方法（コンテキストをオーバーライド）
spacingnumber | ResponsiveValue1子要素間のスペーシング
directionStackDirection'row'レイアウト方向
sxSxProps<Theme>{ alignItems: 'center' }カスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。

ナビゲーションバーの中央セクションをレンダリングします。通常はナビゲーションリンクを含みます。

プロパティ型デフォルト説明
childrenReactNodeコンテキストのcenterContent中央セクションに表示するコンテンツ（コンテキストのcenterContentをオーバーライド）
centerContentReactNodeコンテキストから中央コンテンツを提供する別の方法（コンテキストをオーバーライド）
spacingnumber | ResponsiveValue2子要素間のスペーシング
directionStackDirection'row'レイアウト方向
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ

デフォルトsx:

{
  alignItems: 'center',
  flexGrow: 1
}

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。flexGrow: 1により、左右のセクション間の利用可能なスペースを占有します。

ナビゲーションバーの右セクションをレンダリングします。通常はユーザーアクション/ボタンを含みます。

プロパティ型デフォルト説明
childrenReactNodeコンテキストのrightContent右セクションに表示するコンテンツ（コンテキストのrightContentをオーバーライド）
rightContentReactNodeコンテキストから右コンテンツを提供する別の方法（コンテキストをオーバーライド）
spacingnumber | ResponsiveValue1子要素間のスペーシング
directionStackDirection'row'レイアウト方向
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ

デフォルトsx:

{
  alignItems: 'center',
  justifyContent: 'flex-end'
}

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。

ナビゲーションバーのロゴ画像をレンダリングします。

プロパティ型デフォルト説明
srcstring必須ロゴ画像のソースURL
altstring必須ロゴ画像の代替テキスト
componentstring'img'ルートノードに使用されるコンポーネント（固定）
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Box<'img'>プロパティを継承します。

ナビゲーションリンクをレンダリングします。

プロパティ型デフォルト説明
hrefstring必須リンクの宛先URL
childrenReactNode必須リンク内に表示するコンテンツ
spacingnumber | ResponsiveValue0.5子要素間のスペーシング（アイコン用）
directionStackDirection'row'レイアウト方向
underline'none' | 'hover' | 'always''hover'リンクの下線動作（MUI Linkから）
colorstring'inherit'リンクの色
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ

デフォルトsx:

{
  display: 'inline-flex',
  alignItems: 'center'
}

注意: このコンポーネントはcomponent={Link}を持つMUI Stackを使用します。StackPropsとMUI Linkプロパティの両方を継承します。

ボタンスタイルのリンクをレンダリングします。

プロパティ型デフォルト説明
hrefstring必須ボタンリンクの宛先URL
childrenReactNode必須ボタン内に表示するコンテンツ
variant'text' | 'outlined' | 'contained''contained'ボタンバリアント
size'small' | 'medium' | 'large''small'ボタンサイズ
colorstring'primary'ボタンの色
spacingnumber | ResponsiveValue0.5子要素間のスペーシング（アイコン用）
directionStackDirection'row'レイアウト方向
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはcomponent={Button}を持つMUI Stackを使用します。StackPropsとMUI Buttonプロパティの両方を継承します。

🎨 設定例​

カスタムロゴスタイリング​

<Navbar.Logo
  src="/logo.svg"
  alt="会社ロゴ"
  sx={{height: 40, width: 'auto'}}
/>

カスタムナビゲーションリンク​

<Navbar.Link href="#products" sx={{fontWeight: 600, color: 'primary.main'}}>
  プロダクト
</Navbar.Link>

カスタムボタンリンク​

<Navbar.ButtonLink href="#register" variant="contained" sx={{px: 3, py: 1}}>
  始める
</Navbar.ButtonLink>

カスタムスタイルコンポーネント​

function StyledNavbarComponents() {
  return (
    <Navbar
      leftContent={<Navbar.Logo src="/logo.svg" alt="会社ロゴ" sx={{height: 40, width: 'auto'}} />}
      centerContent={
        <Navbar.Link href="#products" sx={{fontWeight: 600, color: 'primary.main'}}>
          プロダクト
        </Navbar.Link>
      }
      rightContent={
        <Navbar.ButtonLink href="#register" variant="contained" sx={{px: 3, py: 1}}>
          始める
        </Navbar.ButtonLink>
      }
    >
      <Navbar.Left />
      <Navbar.Center />
      <Navbar.Right />
    </Navbar>
  );
}

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート：

import {Stack} from '@mui/material';
import {Navbar} from '@nodeblocks/frontend-navbar-block';
import React from 'react';

// Example with comprehensive typing
function CustomNavbar() {
  return (
    <Navbar
      leftContent={<Navbar.Logo src="/logo.svg" alt="ロゴ" />}
      centerContent={
        <Stack direction="row" spacing={2}>
          <Navbar.Link href="#home">ホーム</Navbar.Link>
          <Navbar.Link href="#products">プロダクト</Navbar.Link>
          <Navbar.Link href="#about">概要</Navbar.Link>
        </Stack>
      }
      rightContent={
        <Stack direction="row" spacing={1}>
          <Navbar.ButtonLink href="#login" variant="text">
            ログイン
          </Navbar.ButtonLink>
          <Navbar.ButtonLink href="#register">登録</Navbar.ButtonLink>
        </Stack>
      }
      spacing={4}
      sx={{
        backgroundColor: 'background.paper',
        boxShadow: 1,
        borderRadius: 2,
      }}
    >
      <Navbar.Left sx={{minWidth: 150}} />
      <Navbar.Center justifyContent="center" />
      <Navbar.Right sx={{minWidth: 200}} />
    </Navbar>
  );
}

📝 注意事項​

  • メインコンポーネントはデフォルトでcomponent="nav"とdirection="row"、spacing={3}を持つMUI Stackを使用します。
  • すべてのセクションコンポーネント（Left、Center、Right）はMUI Stackプロパティを継承し、スタイリング用のsxプロパティをサポートします。
  • CenterセクションはデフォルトでflexGrow: 1を持ち、利用可能なスペースを拡張して埋めます。
  • RightセクションはデフォルトでjustifyContent: 'flex-end'を持ち、コンテンツを右に配置します。
  • Navbar.LogoはMUI Boxをcomponent="img"で使用し、MUIスタイリングサポートで適切な画像レンダリングを行います。
  • Navbar.LinkはMUI StackレイアウトとMUI Linkナビゲーションを組み合わせ、テキストと一緒にアイコンを使用できます。
  • Navbar.ButtonLinkはMUI StackレイアウトとMUI Buttonを組み合わせ、デフォルトでvariant="contained"とsize="small"を使用します。
  • コンテキスト値（leftContent、centerContent、rightContent）はReact Contextを介して共有され、サブコンポーネントレベルでオーバーライドできます。

React、TypeScript、MUIを使用して❤️で構築されました。