ナビゲーションNavigationMenuExperimental

サイト内の主要ページやカテゴリを、直接リンクとメガメニューでまとめる上位ナビゲーションです。

プレビュー

状態とバリエーション

直接リンクだけ

ドロップダウンを持たない上位ナビゲーションにも使えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
NavigationMenuRoot-横並びのサイトナビゲーションを構成するルート。
NavigationMenuTriggerbutton-ドロップダウン付き項目を開くトリガー。
NavigationMenuContentdiv-リンクや説明をまとめるドロップダウン内容。
navigationMenuTriggerStyle()function-上位の直接リンクをトリガーと同じ見た目にします。

使い方

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@gunjo/ui"

const products = [
  { title: "コンポーネント", href: "/docs/components", desc: "再利用できる UI 部品" },
  { title: "トークン", href: "/docs/tokens", desc: "色、余白、角丸の設計値" },
  { title: "テンプレート", href: "/patterns", desc: "画面単位の組み合わせ例" },
]

export function ProductNavigation() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>プロダクト</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[min(400px,calc(100vw-3rem))] gap-2 p-3">
              {products.map((item) => (
                <li key={item.title}>
                  <NavigationMenuLink href={item.href} className="block rounded-md p-2 hover:bg-muted">
                    <div className="text-sm font-medium">{item.title}</div>
                    <p className="text-xs text-muted-foreground">{item.desc}</p>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/pricing" className={navigationMenuTriggerStyle()}>
            料金
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs" className={navigationMenuTriggerStyle()}>
            ドキュメント
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

使用コンポーネント

NavigationMenu

関連コンポーネント

HeaderMenubar