Neumorphism UI

Navigation Menu

必要に応じて関連リンクを開く、サイト上部のナビゲーションに使います。

プレビュー

製品のナビゲーション

製品からコンポーネントとテーマのリンクを開くか、ガイドから対応領域に直接移動します。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/navigation-menu

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

リストと項目を構成し、各トリガーと内容を接続して NavigationMenuViewport を置きます。NavigationMenuLink には実際の移動先を指定します。

"use client";

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "@/components/ui/navigation-menu";

export default function Example() {
  return (
    <NavigationMenu aria-label="Main navigation">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent><NavigationMenuLink href="/guides">Guides</NavigationMenuLink></NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
      <NavigationMenuViewport />
    </NavigationMenu>
  );
}

API リファレンス

Base UIの動作を保ち、開いた状態を inset で表します。ルート内に NavigationMenuViewport を一つ配置します。

コンポーネントプロパティ型デフォルト説明
NavigationMenuvalue / onValueChangeNavigationMenu.Root.Props—開いている項目と変更コールバック。
NavigationMenuLinkrenderReactElement—renderでフレームワークのリンクを使います。
NavigationMenuViewportside / align / sideOffsetNavigationMenuViewportProps—ポップアップの位置と余白。

アクセシビリティ

  • 01

    移動先には実際のhrefを使い、navに名前を付けてください。

  • 02

    Tab、方向キー、Escapeとフォーカス表示を確認してください。