Navbar
ブランド、リンク、ナビゲーション、折りたたみメニューなどのサポートを含む、ページ上部に配置されたレスポンシブなナビゲーションヘッダーです。
インストール
npx nextui-cli@latest add navbar
上記のコマンドは個別インストール用です。もし @nextui-org/react がグローバルにインストール済みの場合は、このステップをスキップできます。
インポート
NextUIは7つのnavbar関連コンポーネントをエクスポートしています。
- Navbar: ナビゲーションバーのメインコンポーネントです。
- NavbarBrand: ブランディングのためのコンポーネントです。
- NavbarContent: ナビゲーションバーのアイテムをラップするためのコンポーネントです。
- NavbarItem: ナビゲーションバーのアイテムのコンポーネントです。
- NavbarMenuToggle: ナビゲーションバーメニューを切り替えるためのコンポーネントです。
- NavbarMenu: ナビゲーションバーメニューアイテムをラップするためのコンポーネントです。
- NavbarMenuItem: ナビゲーションバーメニューアイテムのコンポーネントです。
使い方
静的
position プロパティを使用して、ナビゲーションバーを静的に配置することができます (デフォルトの動作は sticky です)。
スクロール時に非表示
shouldHideOnScroll プロパティを使用すると、スクロール時にナビゲーションバーを非表示にすることができます。
メニュー付き
NavbarMenuToggle および NavbarMenu コンポーネントを使用して、切り替え可能なメニューを表示できます。
open / close アニメーションを削除したい場合は、Navbar コンポーネントに disableAnimation={true} プロパティを渡すことができます。
制御されたメニュー
isMenuOpen および onMenuOpenChange プロパティを使用して、ナビゲーションバーのメニュー状態を制御できます。
ボーダー付き
isBordered プロパティを使用して、ナビゲーションバーに下部ボーダーを追加できます。
ブラーの無効化
ナビゲーションバーはデフォルトでブラー効果があります。isBlurred=false プロパティを使用すると、無効にできます。
ドロップダウンメニュー付き
Dropdown コンポーネントを使用して、ドロップダウンメニューをナビゲーションバーアイテムとして表示できます。
アバター付き
アバターとドロップダウンメニュー付きのナビゲーションバーの例。
検索入力付き
検索入力付きのナビゲーションバーの例。
アクティブなアイテムのカスタマイズ
NavbarItem がアクティブな場合、data-active 属性が付与されます。この属性を使用してカスタマイズできます。
スロット
- base: ナビゲーションバーのメインスロットです。親の全幅を取り、メニューを含むナビゲーションバー要素をラップします。
- wrapper:
brand、content、toggleなどのナビバー要素を含むスロット。 - brand:
NavbarBrandコンポーネント用のスロット。 - content:
NavbarContentコンポーネント用のスロット。 - item:
NavbarItemコンポーネント用のスロット。 - toggle:
NavbarMenuToggleコンポーネント用のスロット。 - toggleIcon:
NavbarMenuToggleアイコン用のスロット。 - menu:
NavbarMenuコンポーネント用のスロット。 - menuItem:
NavbarMenuItemコンポーネント用のスロット。
データ属性
Navbarのbase要素には、以下の属性があります。
- data-menu-open: ナビバーメニューが開いているかどうかを示します。
- data-hidden: ナビバーが非表示になっているかどうかを示します。
shouldHideOnScrollプロパティがtrueの場合に使用されます。
NavbarContent
- data-justify: ナビバーコンテンツのjustifyコンテンツです。適切なスペース配分を考慮します。
NavbarItemのbase要素には、以下の属性があります。
- data-active: ナビバーアイテムがアクティブかどうかを示します。
isActiveプロパティがtrueの場合に使用されます。
NavbarMenuToggleのbase要素には、以下の属性があります。
- data-open: ナビバーメニューが開いているかどうかを示します。
isMenuOpenプロパティがtrueの場合に使用されます。 - data-pressed: ナビバーメニュートグルが押されたとき。usePressに基づきます。
- data-hover: ナビバーメニュートグルがホバーされているとき。useHoverに基づきます。
- data-focus-visible: ナビバーメニュートグルがキーボードでフォーカスされているとき。useFocusRingに基づきます。
NavbarMenuItemのbase要素には、以下の属性があります。
- data-active: メニューアイテムがアクティブかどうかを示します。
isActiveプロパティがtrueの場合に使用されます。
API
Navbar Props
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children* | ReactNode[] | レンダリングする子要素。通常は、NavbarBrand、NavbarContent、NavbarItemなどのナビバー要素。 | - |
| height | string | number | ナビバーの高さ。 | 4rem (64px) |
| position | static | sticky | ナビバーの位置。 | sticky |
| maxWidth | sm | md | lg | xl | 2xl | full | ナビゲーションバーのラッパーの最大幅。 | lg |
| parentRef | React.RefObject<HTMLElement> | ナビゲーションバーが配置される親要素。これはスクロール位置と、ナビゲーションバーを非表示にするかどうかを判断するために使用されます。 | window |
| isBordered | boolean | ナビゲーションバーに下部ボーダーを表示するかどうか。 | false |
| isBlurred | boolean | ナビゲーションバーにぼかし効果を適用するかどうか。 | true |
| isMenuOpen | boolean | ナビゲーションバーのメニューが開いているかどうかを示します。（制御された状態） | false |
| isMenuDefaultOpen | boolean | ナビゲーションバーのメニューがデフォルトで開いているかどうかを示します。（制御されていない状態） | false |
| shouldHideOnScroll | boolean | スクロール時にナビゲーションバーを非表示にするかどうかを示します。 | false |
| motionProps | MotionProps | visible / hidden アニメーションを制御するためのモーションプロパティ。このモーションは、shouldHideOnScroll プロパティが true に設定されている場合にのみ利用可能です。 | - |
| disableScrollHandler | boolean | ナビゲーションバーの親のスクロールイベントをリッスンするかどうか。 | false |
| disableAnimation | boolean | ナビゲーションバーのメニューアニメーションを無効にするかどうか。 | false |
| classNames | Record<"base"｜ "wrapper"｜ "brand"｜ "content"｜ "item"｜ "toggle"｜ "toggleIcon"｜ "menu"｜ "menuItem", string> | ナビゲーションバーのスロットにカスタムクラス名をセットできます。 | - |
ナビゲーションバーのイベント
| 属性 | 型 | 説明 |
|---|---|---|
| onMenuOpenChange | (isOpen: boolean) => void | ナビゲーションバーのメニューの開閉状態が変更されたときに呼び出されるハンドラー。 |
| onScrollPositionChange | (position: number) => void | ナビゲーションバーの親要素がスクロールされたときに呼び出されるハンドラー。このイベントは、disableScrollHandler が false に設定されているか、shouldHideOnScroll が true に設定されている場合にのみディスパッチされます。 |
NavbarContent のプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children* | ReactNode[] | レンダリングする子要素。通常は、NavbarBrand、NavbarContent、NavbarItemなどのナビバー要素。 | - |
| justify | start | center | end | ナビゲーションバーコンテンツの justify content。正しいスペース配分を考慮します。 | start |
NavbarItem のプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children | ReactNode | ナビゲーションバーのアイテムとしてレンダリングする子要素。 | - |
| isActive | boolean | ナビゲーションバーのアイテムがアクティブかどうか。 | false |
NavbarMenuToggle のプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| icon | ReactNode | (isOpen: boolean | undefined) => ReactNode | null; | ナビゲーションバーのメニュートグルとしてレンダリングするアイコン。 | - |
| isSelected | boolean | ナビゲーションバーのメニュートグルが選択されているかどうか。（制御された状態） | false |
| defaultSelected | boolean | ナビゲーションバーのメニュートグルがデフォルトで選択されているかどうか。（制御されていない状態） | false |
| srOnlyText | string | スクリーンリーダーで使用されるテキスト。 | open/close ナビゲーションメニュー |
NavbarMenuToggle のイベント
| 属性 | 型 | 説明 |
|---|---|---|
| onChange | (isOpen: boolean) => void | ナビゲーションバーのメニュートグルが押されたときに呼び出されるハンドラー。 |
NavbarMenu のプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children* | ReactNode[] | ナビゲーションバーメニューとしてレンダリングする子要素。通常、NavbarMenuItem コンポーネントのリストです。 | - |
| portalContainer | HTMLElement | ナビゲーションバーメニューのオーバーレイポータルが配置されるコンテナ要素。 | document.body |
| motionProps | MotionProps | open / close アニメーションを制御するためのモーションプロパティ。このモーションは、disableAnimation プロパティが false に設定されている場合にのみ利用可能です。 | - |
NavbarMenuItem のプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children | ReactNode | メニューアイテムとしてレンダリングする子要素。 | - |
| isActive | boolean | メニューアイテムがアクティブかどうか。 | false |
注：
NavbarMenuItemやNavbarBrandなどの残りのナビゲーションバーコンポーネントには、li要素と同じプロパティがあります。
ナビゲーションバーの種類
モーションプロパティ
export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
