タブナビゲーション

タブとしてスタイルされたリンクを持つナビゲーションメニュー。

ソースコードを表示問題を報告 Playgroundで表示

<TabNav.Root>
  <TabNav.Link href="#" active>
    Account
  </TabNav.Link>
  <TabNav.Link href="#">Documents</TabNav.Link>
  <TabNav.Link href="#">Settings</TabNav.Link>
</TabNav.Root>

APIリファレンス

このコンポーネントは、Navigation Menuプリミティブに基づいており、共通のマージンプロパティをサポートしています。

ルート

ナビゲーションメニューのリンクを格納します。

プロパティ	型	デフォルト
`size`	`Responsive<"1" \| "2">`	`"2"`
`wrap`	`Responsive<"nowrap" \| "wrap" \| "wrap-reverse">`	デフォルト値なし
`justify`	`Responsive<"start" \| "center" \| "end">`	デフォルト値なし
`color`	`列挙型`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし

リンク

個別のナビゲーションメニューのリンク。

プロパティ	型	デフォルト
`asChild`	`boolean`	デフォルト値なし
`active`	`boolean`	`false`

例

サイズ

タブのサイズを制御するには、sizeプロパティを使用します。

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root size="1">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root size="2">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

色

タブリストに特定の色を割り当てるには、colorプロパティを使用します。色を参照してください。

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root color="indigo">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="cyan">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="orange">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="crimson">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

高コントラスト

背景との色のコントラストを高めるには、highContrastプロパティを使用します。

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root color="gray">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="gray" highContrast>
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>
    <TabNav.Link href="#">Documents</TabNav.Link>
    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

ルーターリンクを使用

asChildプロパティを使用して、アプリのルーターリンクコンポーネントとTabNav.Linkを構成します。

<TabNav.Root>
  <TabNav.Link asChild active={pathname === '/account'}>
    <NextLink href="/account">Account</NextLink>
  </TabNav.Link>
  <TabNav.Link asChild active={pathname === '/documents'}>
    <NextLink href="/documents">Documents</NextLink>
  </TabNav.Link>
  <TabNav.Link asChild active={pathname === '/settings'}>
    <NextLink href="/settings">Settings</NextLink>
  </TabNav.Link>
</TabNav.Root>

前タブ

次テキストエリア

GitHubでこのページを編集。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

タブナビゲーション