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

Navbarブロック

Navbar は、MUI Stack（component="nav"）をベースにした横型ナビゲーションバーで、左・中央・右の領域と、リンクおよびアクション用の基本要素を備えています。

インストール​

npm install @nodeblocks/frontend-navbar-block

必要なもの​

項目理由
leftContent (optional)左領域のコンテンツ。存在する場合はデフォルトレイアウトで使用されます
centerContent (optional)主なナビゲーションリンク。中央が空の場合は省略するか null を渡します
rightContent (optional)ログイン、Navbar.Item のアイコン、プロフィール操作などのアクション
領域サブコンポーネントコンパウンドレイアウト用の Navbar.Left、Navbar.Center、Navbar.Right
構成モード

Navbar に leftContent、centerContent、rightContent を渡すと、デフォルトの領域（Navbar.Left、Navbar.Center、Navbar.Right）が埋まります（それぞれ自動で描画されます）。compound children を使うと、ルート props をコンテキスト経由で読み取りつつ、領域のマークアップを置き換えられます（children は対応する *Content prop より優先されます）。function child で blocks と blockOrder を使えば、ブロックの先頭追加や順序変更ができます。

コード例​

ライブエディター
function Example() {
  return (
    <Navbar
      leftContent={
        <Navbar.Logo
          src="https://docs.nodeblocks.dev/img/icon-small.png"
          alt="Company Logo"
          style={{height: 32}}
        />
      }
      centerContent={
        <>
          <Navbar.Link href="#home">
            <span>Home</span>
          </Navbar.Link>
          <Navbar.Link href="#about">
            <span>About</span>
          </Navbar.Link>
          <Navbar.Link href="#services">
            <span>Services</span>
          </Navbar.Link>
          <Navbar.Link href="#contact">
            <span>Contact</span>
          </Navbar.Link>
        </>
      }
      rightContent={<Navbar.ButtonLink href="#login">Login</Navbar.ButtonLink>}
    />
  );
}
結果
Loading...

重要なプロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
leftContentReactNodeいいえundefined左領域のコンテンツ（例: Navbar.Logo）
centerContentReactNodeいいえundefined中央領域のコンテンツ（例: Navbar.Link の一覧）
rightContentReactNodeいいえundefined右領域のコンテンツ（例: Navbar.Item、Navbar.ButtonLink）

コンテンツプロパティ​

デフォルト領域を使う場合は、ルートに leftContent、centerContent、rightContent を設定します。サブコンポーネントは、領域に children を渡さない限り、コンテキストからそれらを読み取ります（コンパウンドモード）。

コンポーネントプロパティ型必須デフォルト説明
LeftchildrenReactNodeいいえルートの leftContent左領域のマークアップ
LeftleftContentReactNodeいいえルートの leftContentこの領域のコンテキストを上書きします
CenterchildrenReactNodeいいえルートの centerContent中央領域のマークアップ
CentercenterContentReactNodeいいえルートの centerContentこの領域のコンテキストを上書きします
RightchildrenReactNodeいいえルートの rightContent右領域のマークアップ
RightrightContentReactNodeいいえルートの rightContentこの領域のコンテキストを上書きします
Logo—BoxProps<'img'>いいえ-画像ロゴ（src、alt、style、className など）
Link—StackProps<typeof Link>いいえ-インラインのナビゲーションリンク。href とラベルの子要素を渡します
ButtonLink—StackProps<typeof Button>いいえ-コンテインドアクションリンク。variant="contained"、size="small"
ItemiconReactNodeいいえundefinedラベルの前のアイコン（アイコンに任意の badgeProps を指定可能）
ItemlabelReactNodeいいえundefinedテキストラベル（sm+ のみ）
ItembadgePropsBadgePropsいいえundefinedicon 上の MUI Badge
ItemchildrenReactNodeいいえundefinedコントロール内の追加コンテンツ

Left、Center、Right、Logo、Link、ButtonLink、Item はそれぞれ Navbar.Left、Navbar.Center などです。Item は ButtonBase の props（例: onClick）を継承します。

レイアウトと構成のプロパティ​

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえundefinedコンパウンド領域コンポーネント、または blocks と blockOrder を返す関数オーバーライド
componentReact.ElementTypeいいえ'nav'ルート要素の型
classNamestringいいえundefinedルートコンテナのクラス名（デフォルトで nbb-navbar が適用されます）
sxSxPropsいいえundefinedルートコンテナ用の MUI システムスタイル

Navbar は StackProps<'nav'>（children を除く）を継承し、direction（デフォルト row）、spacing（ルートではデフォルト 3）、height（xs / sm で 56 / 64）、水平パディング、下枠線を含みます。ルートの描画順序は left、center、right で、defaultBlockOrder は left、center、right、logo、link、buttonLink、item です。

デフォルト UI ブロック​

ブロック基盤備考
Navbar（ルート）Stack（component="nav"）direction="row"、spacing={3}、height は 56px（xs）/ 64px（sm+）
Navbar.LeftStackdirection="row"、spacing={1}
Navbar.CenterStackflexGrow: 1、spacing={2}
Navbar.RightStackjustifyContent: flex-end
Navbar.LogoBox（component="img"）ロゴ画像
Navbar.LinkStack + Linkインラインのナビゲーションリンク
Navbar.ButtonLinkStack + Buttonコンテインドアクションリンク
Navbar.ItemButtonBase + Badge + Typographyアイコン/ラベルのアクション。アイコンに任意のバッジを付けられます

TypeScript​

import { Navbar } from '@nodeblocks/frontend-navbar-block';
import { SettingsOutlined } from '@mui/icons-material';
import type { ReactNode } from 'react';

type NavbarRegions = {
  leftContent: ReactNode;
  centerContent?: ReactNode;
  rightContent?: ReactNode;
};

const config: NavbarRegions = {
  leftContent: (
    <Navbar.Logo src="/logo.svg" alt="Company" style={{ height: 32 }} />
  ),
  centerContent: (
    <Navbar.Link href="#home">
      <span>Home</span>
    </Navbar.Link>
  ),
  rightContent: <Navbar.Item icon={<SettingsOutlined />} label="Settings" />,
};

<Navbar {...config} />;