NavigationMenu
サイトレベルのリンクと任意のリッチなフライアウトを提供します。
主なプロパティ
| プロパティ | 選択肢 |
|---|---|
| 移動先 | 直接移動は Link、関連リンク群は Trigger と Content を使います。 |
| 方向 | horizontal または vertical。デフォルトは horizontal です。 |
| 位置 | side は top/right/bottom/left、align は start/center/end です。 |
| 狭い画面 | 同じ移動先を持つ drawer にデスクトップ構成を置き換えます。 |
タスク中心のフライアウトを作り、直接移動する項目はリンクにします。サイトナビゲーション用であり、アプリケーションコマンドのメニューバーではありません。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/navigation-menu.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRNavigationMenu } from '@tinyrack/ui/components/navigation-menu';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
移動先の状態を示す
操作方向を選ぶ
フライアウトを配置する
狭い画面でも移動先を保つ
キーボードモデルに従う
API
全パーツは Root、List、Item、Trigger、Icon、Content、Portal、Backdrop、Positioner、Popup、Arrow、Viewport、Link です。すべてのパーツと prop・状態型を名前付きで公開します。
Root は value と onValueChange による制御状態、defaultValue による非制御状態、orientation、ポインターの delay、closeDelay を所有します。Trigger は無効にできます。Icon はデフォルトで ChevronDown を表示し、カスタムの子を受け取ります。Link.active は aria-current="page" を設定し、closeOnClick はフライアウトを閉じます。
Positioner.side は top、right、bottom、left、align は start、center、end を受け取ります。sideOffset のデフォルトは 8 です。衝突回避は配置を移動または反転します。Portal はカスタムコンテナを受け取り、Popup が面を所有し、Viewport が有効な Content を受け取ります。
公開 CSS パスを読み込んでください。トークンには --tr-navigation-menu-popup-max-width があります。構成は SSR とハイドレーションをサポートし、portal 内容はハイドレーション後にコンテナへマウントされます。狭い画面では同じ移動先をタッチサイズの drawer に表示します。