Navigation Menu
Base UIの動作を保ち、開いた状態を inset で表します。ルート内に NavigationMenuViewport を一つ配置します。
@neumorphism-ui/navigation-menuプレビュー
メニューから移動先を選んでください。
コンポーネント · 56
テーマ · 5
インストール
インストール: navigation-menu
npx shadcn@latest add @neumorphism-ui/navigation-menuCLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。
この Registry を初めて使う場合は、先に namespace の設定 を完了してください。
使い方
Import
Navigation Menu の import コード
"use client";
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport } from "@/components/ui/navigation-menu";Example
Navigation Menu の使用コード
export default function Example() {
return <div><NavigationMenu aria-label="製品"><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>製品</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="#navigation-guide">ガイド</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList><NavigationMenuViewport /></NavigationMenu><p id="navigation-guide">ガイド</p></div>;
}API リファレンス
| コンポーネント | プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|---|
NavigationMenu | value / onValueChange | NavigationMenu.Root.Props | — | 開いている項目と変更コールバック。 |
NavigationMenuLink | render | ReactElement | — | renderでフレームワークのリンクを使います。 |
NavigationMenuViewport | side / align / sideOffset | NavigationMenuViewportProps | — | ポップアップの位置と余白。 |
アクセシビリティ
- 01
移動先には実際のhrefを使い、navに名前を付けてください。
- 02
Tab、方向キー、Escapeとフォーカス表示を確認してください。