Radix Vue

外観

ナビゲーションメニュー ​

ウェブサイトをナビゲートするためのリンクのコレクション。
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'radix-vue'
import NavigationMenuListItem from './NavigationMenuListItem.vue'

const currentTrigger = ref('')
</script>

<template>
  <NavigationMenuRoot
    v-model="currentTrigger"
    class="relative z-[1] flex w-full justify-center"
  >
    <NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
      <NavigationMenuItem>
        <NavigationMenuTrigger
          class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
        >
          Learn
          <Icon
            icon="radix-icons:caret-down"
            class="text-green10 relative top-[1px] transition-transform duration-[250ms] ease-in group-data-[state=open]:-rotate-180"
          />
        </NavigationMenuTrigger>
        <NavigationMenuContent
          class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
        >
          <ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
            <li class="row-span-3 grid">
              <NavigationMenuLink as-child>
                <a
                  class="focus:shadow-green7 from-green9 to-teal9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
                  href="/"
                >
                  <img
                    class="w-16"
                    src="https://radix-vue.dokyumento.jp/logo.svg"
                  >
                  <div class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
                  <p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for Vue.</p>
                </a>
              </NavigationMenuLink>
            </li>

            <NavigationMenuListItem
              href="https://stitches.dev/"
              title="Stitches"
            >
              CSS-in-JS with best-in-class developer experience.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              href="/colors"
              title="Colors"
            >
              Beautiful, thought-out palettes with auto dark mode.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              href="https://icons.radix-ui.com/"
              title="Icons"
            >
              A crisp set of 15x15 icons, balanced and consistent.
            </NavigationMenuListItem>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuTrigger
          class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
        >
          Overview
          <Icon
            icon="radix-icons:caret-down"
            class="text-green10 relative top-[1px] transition-transform duration-[250ms] ease-in group-data-[state=open]:-rotate-180"
          />
        </NavigationMenuTrigger>
        <NavigationMenuContent class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto">
          <ul class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
            <NavigationMenuListItem
              title="Introduction"
              href="/docs/primitives/overview/introduction"
            >
              Build high-quality, accessible design systems and web apps.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Getting started"
              href="/docs/primitives/overview/getting-started"
            >
              A quick tutorial to get you up and running with Radix Primitives.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Styling"
              href="/docs/primitives/guides/styling"
            >
              Unstyled and compatible with any styling solution.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Animation"
              href="/docs/primitives/guides/animation"
            >
              Use CSS keyframes or any animation library of your choice.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Accessibility"
              href="/docs/primitives/overview/accessibility"
            >
              Tested in a range of browsers and assistive technologies.
            </NavigationMenuListItem>
            <NavigationMenuListItem
              title="Releases"
              href="/docs/primitives/overview/releases"
            >
              Radix Primitives releases and their changelogs.
            </NavigationMenuListItem>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuLink
          class="text-grass11 hover:bg-green3 focus:shadow-green7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
          href="https://github.com/radix-vue"
        >
          Github
        </NavigationMenuLink>
      </NavigationMenuItem>

      <NavigationMenuIndicator
        class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
      >
        <div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
      </NavigationMenuIndicator>
    </NavigationMenuList>

    <div class="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
      <NavigationMenuViewport
        class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
      />
    </div>
  </NavigationMenuRoot>
</template>

特徴 ​

  • 制御可能または非制御にできます。
  • 管理されたタブフォーカスによる柔軟なレイアウト構造。
  • サブメニューをサポートします。
  • オプションのアクティブアイテムインジケーター。
  • 完全なキーボードナビゲーション。
  • 高度なアニメーションのためのCSS変数を公開します。
  • カスタムタイミングをサポートします。

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構造 ​

すべてのパーツをインポートして組み合わせます。

vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuSub,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'radix-vue'
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger />
        <NavigationMenuContent>
          <NavigationMenuLink />
        </NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuLink />
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuTrigger />
        <NavigationMenuContent>
          <NavigationMenuSub>
            <NavigationMenuList />
            <NavigationMenuViewport />
          </NavigationMenuSub>
        </NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuIndicator />
    </NavigationMenuList>

    <NavigationMenuViewport />
  </NavigationMenuRoot>
</template>

APIリファレンス ​

ルート ​

ナビゲーションメニューのすべての部分が含まれています。

Propデフォルト型
as
'nav'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

defaultValue
string

最初にレンダリングされたときにアクティブになる必要があるメニュー項目の値。

値の状態を制御する必要がない場合に使用します。

delayDuration
200
number

ポインターがトリガーに入ってからツールチップが開かれるまでの時間。

dir
'ltr' | 'rtl'

該当する場合のコンボボックスの読み取り方向。

省略した場合、ConfigProviderからグローバルに継承されるか、LTR（左から右）の読み取りモードとみなされます。

disableClickTrigger
false
boolean

trueの場合、トリガーをクリックしてもメニューを開くことはできません

disableHoverTrigger
false
boolean

trueの場合、トリガーをホバーしてもメニューを開くことはできません

modelValue
string

アクティブにするメニュー項目の制御された値。v-modelとして使用できます。

orientation
'horizontal'
'vertical' | 'horizontal'

メニューの向き。

skipDelayDuration
300
number

ユーザーが再び遅延を発生させることなく別のトリガーに入るまでの時間。

Emitペイロード
update:modelValue
[value: string]

値が変更されたときに呼び出されるイベントハンドラー。

スロット（デフォルト）ペイロード
modelValue
string

現在の入力値

データ属性値
[data-orientation]"vertical" | "horizontal"

サブ ​

サブメニューを示します。サブメニューを作成するためにネストする場合は、ルート部分の代わりに使用します。

Propデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

defaultValue
string

最初にレンダリングされたときにアクティブになる必要があるメニュー項目の値。

値の状態を制御する必要がない場合に使用します。

modelValue
string

アクティブにするサブメニュー項目の制御された値。v-modelとして使用できます。

orientation
'horizontal'
'vertical' | 'horizontal'

メニューの向き。

Emitペイロード
update:modelValue
[value: string]

値が変更されたときに呼び出されるイベントハンドラー。

スロット（デフォルト）ペイロード
modelValue
string

現在の入力値

データ属性値
[data-orientation]"vertical" | "horizontal"

リスト ​

トップレベルのメニュー項目が含まれています。

Propデフォルト型
as
'ul'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

データ属性値
[data-orientation]"vertical" | "horizontal"

アイテム ​

トップレベルのメニュー項目。コンテンツの組み合わせを持つリンクまたはトリガーが含まれます。

Propデフォルト型
as
'li'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

value
string

ナビゲーションメニューが制御されている場合に、項目をアクティブな値と関連付ける一意の値。

このpropは、制御されていない場合に自動的に管理されます。

トリガー ​

コンテンツを切り替えるボタン。

Propデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

disabled
boolean

trueの場合、ユーザーがアイテムを操作できないようにします

データ属性値
[data-state]"open" | "closed"
[data-disabled]無効の場合に存在します

コンテンツ ​

各トリガーに関連付けられたコンテンツが含まれています。

Propデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

disableOutsidePointerEvents
boolean

trueの場合、DismissableLayerの外側の要素でのホバー/フォーカス/クリックのインタラクションが無効になります。ユーザーは、外部要素と対話するには、2回クリックする必要があります。1回目はDismissableLayerを閉じ、もう1回は要素をトリガーします。

forceMount
boolean

より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に役立ちます。

Emitペイロード
escapeKeyDown
[event: KeyboardEvent]

エスケープキーが押されたときに呼び出されるイベントハンドラー。防止できます。

focusOutside
[event: FocusOutsideEvent]

フォーカスがDismissableLayerの外に移動したときに呼び出されるイベントハンドラー。防止できます。

interactOutside
[event: PointerDownOutsideEvent | FocusOutsideEvent]

インタラクションがDismissableLayerの外で発生したときに呼び出されるイベントハンドラー。具体的には、pointerdownイベントが外部で発生した場合、またはフォーカスが外部に移動した場合。防止できます。

pointerDownOutside
[event: PointerDownOutsideEvent]

pointerdownイベントがDismissableLayerの外で発生したときに呼び出されるイベントハンドラー。防止できます。

データ属性値
[data-state]"open" | "closed"
[data-motion]"to-start" | "to-end" | "from-start" | "from-end"
[data-orientation]"vertical" | "horizontal"

ナビゲーションリンク。

Propデフォルト型
active
boolean

リンクを現在アクティブなページとして識別するために使用されます。

as
'a'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

Emitペイロード
select
[payload: MouseEvent]

ユーザーがリンクを選択したとき（マウスまたはキーボード経由）に呼び出されるイベントハンドラー。

このハンドラーでevent.preventDefaultを呼び出すと、そのリンクを選択したときにナビゲーションメニューが閉じられるのを防ぎます。

データ属性値
[data-active]アクティブな場合に存在します

インジケーター ​

リストの下にレンダリングされ、現在アクティブなトリガーを強調表示するために使用されるオプションのインジケーター要素。

Propデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

forceMount
boolean

より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に役立ちます。

データ属性値
[data-state]"visible" | "hidden"
[data-orientation]"vertical" | "horizontal"

ビューポート ​

リストの外側でアクティブなコンテンツをレンダリングするために使用されるオプションのビューポート要素。

Propデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、そのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

forceMount
boolean

より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に役立ちます。

データ属性値
[data-state]"visible" | "hidden"
[data-orientation]"vertical" | "horizontal"
CSS変数説明
--radix-navigation-menu-viewport-width
表示/非表示時のビューポートの幅。アクティブなコンテンツから計算されます
--radix-navigation-menu-viewport-height
表示/非表示時のビューポートの高さ。アクティブなコンテンツから計算されます

例 ​

垂直 ​

orientation propを使用して垂直メニューを作成できます。

vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuSub,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'radix-vue'
</script>

<template>
  <NavigationMenuRoot orientation="vertical">
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item one</NavigationMenuTrigger>
        <NavigationMenuContent>Item one content</NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item two</NavigationMenuTrigger>
        <NavigationMenuContent>Item Two content</NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenuRoot>
</template>

柔軟なレイアウト ​

Contentがレンダリングされる場所をより細かく制御する必要がある場合は、Viewport部分を使用します。これは、設計で調整されたDOM構造が必要な場合や、高度なアニメーションを実現するための柔軟性が必要な場合に役立ちます。タブフォーカスは自動的に維持されます。

vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'radix-vue'
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item one</NavigationMenuTrigger>
        <NavigationMenuContent>Item one content</NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item two</NavigationMenuTrigger>
        <NavigationMenuContent>Item two content</NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>

    <!-- NavigationMenuContent will be rendered here when active  -->
    <NavigationMenuViewport />
  </NavigationMenuRoot>
</template>

インジケーター付き ​

オプションの Indicator 部分を使用すると、現在アクティブな Trigger を強調表示できます。これは、Viewport に付随する矢印やハイライトなどのアニメーション視覚キューを提供したい場合に便利です。

vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'radix-vue'
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item one</NavigationMenuTrigger>
        <NavigationMenuContent>Item one content</NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item two</NavigationMenuTrigger>
        <NavigationMenuContent>Item two content</NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuIndicator class="NavigationMenuIndicator" />
    </NavigationMenuList>

    <NavigationMenuViewport />
  </NavigationMenuRoot>
</template>
css
/* styles.css */
.NavigationMenuIndicator {
  background-color: grey;
}
.NavigationMenuIndicator[data-orientation="horizontal"] {
  height: 3px;
  transition: width, transform, 250ms ease;
}

サブメニュー付き ​

NavigationMenu をネストし、その Root の代わりに Sub 部分を使用することで、サブメニューを作成します。サブメニューは Root ナビゲーションメニューとは異なり、Tabs と同様に、常に1つの項目がアクティブである必要があります。そのため、必ず defaultValue を割り当てて設定してください。

vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuSub,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'radix-vue'
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item one</NavigationMenuTrigger>
        <NavigationMenuContent>Item one content</NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item two</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuSub default-value="sub1">
            <NavigationMenuList>
              <NavigationMenuItem value="sub1">
                <NavigationMenuTrigger>Sub item one</NavigationMenuTrigger>
                <NavigationMenuContent> Sub item one content </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem value="sub2">
                <NavigationMenuTrigger>Sub item two</NavigationMenuTrigger>
                <NavigationMenuContent> Sub item two content </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenuSub>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenuRoot>
</template>

クライアントサイドルーティング付き ​

ルーティングパッケージによって提供される RouterLink コンポーネントを使用する必要がある場合は、NavigationMenuLink に asChild="true" を追加するか、as="RouterLink" を設定することをお勧めします。これにより、アクセシビリティと一貫したキーボード操作が維持されます。

vue
<script setup lang="ts">
import { NavigationMenuItem, NavigationMenuList, NavigationMenuRoot } from 'radix-vue'

// RouterLink should be injected by default if using `vue-router`
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuLink as-child>
          <RouterLink to="/">
            Home
          </RouterLink>
          <NavigationMenuLink />
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink
          :as="RouterLink"
          to="/about"
        >
          About
        </NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenuRoot>
</template>

高度なアニメーション ​

Viewport のサイズと、エンター/エグジットの方向に基づいた Content の位置をアニメーション化できるように、--radix-navigation-menu-viewport-[width|height] および data-motion['from-start'|'to-start'|'from-end'|'to-end'] 属性を公開しています。

これらを position: absolute; と組み合わせることで、項目間を移動する際にスムーズなオーバーラップアニメーション効果を作成できます。

vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'radix-vue'
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item one</NavigationMenuTrigger>
        <NavigationMenuContent class="NavigationMenuContent">
          Item one content
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item two</NavigationMenuTrigger>
        <NavigationMenuContent class="NavigationMenuContent">
          Item two content
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>

    <NavigationMenuViewport class="NavigationMenuViewport" />
  </NavigationMenuRoot>
</template>
css
/* styles.css */
.NavigationMenuContent {
  position: absolute;
  top: 0;
  left: 0;
  animation-duration: 250ms;
  animation-timing-function: ease;
}
.NavigationMenuContent[data-motion="from-start"] {
  animation-name: enterFromLeft;
}
.NavigationMenuContent[data-motion="from-end"] {
  animation-name: enterFromRight;
}
.NavigationMenuContent[data-motion="to-start"] {
  animation-name: exitToLeft;
}
.NavigationMenuContent[data-motion="to-end"] {
  animation-name: exitToRight;
}

.NavigationMenuViewport {
  position: relative;
  width: var(--radix-navigation-menu-viewport-width);
  height: var(--radix-navigation-menu-viewport-height);
  transition: width, height, 250ms ease;
}

@keyframes enterFromRight {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes enterFromLeft {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes exitToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(200px);
  }
}

@keyframes exitToLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-200px);
  }
}

アクセシビリティ ​

navigation ロールの要件に準拠しています。

メニューバーとの違い ​

NavigationMenu を menubar と混同しないでください。このプリミティブは、ナビゲーションリンクのセットを指す口語的な意味で menu という名前を共有していますが、WAI-ARIA の menu ロールは使用していません。これは、menu と menubars が、デスクトップアプリケーションウィンドウで最も一般的に見られるネイティブオペレーティングシステムのメニューのように動作するためです。そのため、複合フォーカス管理や先頭文字によるナビゲーションなどの複雑な機能が搭載されています。

これらの機能は、Webサイトのナビゲーションには不要と見なされることが多く、最悪の場合、確立されたWebサイトのパターンに慣れているユーザーを混乱させる可能性があります。

詳細については、W3C の 開示ナビゲーションメニューの例を参照してください。

メニュー内のすべてのナビゲーションリンクに NavigationMenuLink を使用することが重要です。これは、メインリストだけでなく、NavigationMenuContent を介してレンダリングされるすべてのコンテンツにも当てはまります。これにより、一貫したキーボード操作とアクセシビリティが確保されると同時に、aria-current とアクティブスタイルを設定するための active プロパティへのアクセスも可能になります。サードパーティのルーティングコンポーネントとの使用に関する詳細については、こちらの例を参照してください。

キーボード操作 ​

キー説明
SpaceEnter
NavigationMenuTrigger にフォーカスがある場合、コンテンツを開きます。
Tab
フォーカス可能な次の要素にフォーカスを移動します。
ArrowDown
horizontal で、フォーカスが開いている NavigationMenuTrigger にある場合、フォーカスを NavigationMenuContent に移動します。
フォーカスを次の NavigationMenuTrigger または NavigationMenuLink に移動します。
ArrowUp
フォーカスを前の NavigationMenuTrigger または NavigationMenuLink に移動します。
ArrowRightArrowLeft
vertical で、フォーカスが開いている NavigationMenuTrigger にある場合、フォーカスをその NavigationMenuContent に移動します。
フォーカスを次の/前の NavigationMenuTrigger または NavigationMenuLink に移動します。
HomeEnd
フォーカスを最初/最後の NavigationMenu.Trigger または NavigationMenu.Link に移動します。
Esc
開いている NavigationMenu.Content を閉じ、フォーカスをその NavigationMenu.Trigger に移動します。