# 标签导航

样式化为标签的导航菜单链接。

```jsx
<TabNav.Root>
  <TabNav.Link href="#" active>
    账户
  </TabNav.Link>

  <TabNav.Link href="#">文档</TabNav.Link>

  <TabNav.Link href="#">设置</TabNav.Link>
</TabNav.Root>
```

## [API 参考](#api-参考)

该组件基于 [导航菜单原语](/primitives/docs/components/navigation-menu)，并支持 [常见边距属性](/themes/docs/overview/layout#margin-props)。

### [根节点](#根节点)

包含导航菜单链接。

| Prop           | Type                                               | Default          |
| -------------- | -------------------------------------------------- | ---------------- |
| `size`         | `Responsive<"1" \| "2">`                           | `"2"`            |
| `wrap`         | `Responsive<"nowrap" \| "wrap" \| "wrap-reverse">` | No default value |
| `justify`      | `Responsive<"start" \| "center" \| "end">`         | No default value |
| `color`        | `enum`                                             | No default value |
| `highContrast` | `boolean`                                          | No default value |

### [链接](#链接)

单个导航菜单链接。

| Prop      | Type      | Default          |
| --------- | --------- | ---------------- |
| `asChild` | `boolean` | No default value |
| `active`  | `boolean` | `false`          |

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性控制标签的尺寸。

```jsx
<Flex direction="column" gap="4" pb="2">
  <TabNav.Root size="1">
    <TabNav.Link href="#" active>
      账户
    </TabNav.Link>

    <TabNav.Link href="#">文档</TabNav.Link>

    <TabNav.Link href="#">设置</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root size="2">
    <TabNav.Link href="#" active>
      账户
    </TabNav.Link>

    <TabNav.Link href="#">文档</TabNav.Link>

    <TabNav.Link href="#">设置</TabNav.Link>
  </TabNav.Root>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性为标签列表指定特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex direction="column" gap="4" pb="2">
  <TabNav.Root color="indigo">
    <TabNav.Link href="#" active>
      账户
    </TabNav.Link>

    <TabNav.Link href="#">文档</TabNav.Link>

    <TabNav.Link href="#">设置</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="cyan">
    <TabNav.Link href="#" active>
      账户
    </TabNav.Link>

    <TabNav.Link href="#">文档</TabNav.Link>

    <TabNav.Link href="#">设置</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="orange">
    <TabNav.Link href="#" active>
      账户
    </TabNav.Link>

    <TabNav.Link href="#">文档</TabNav.Link>

    <TabNav.Link href="#">设置</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="crimson">
    <TabNav.Link href="#" active>
      账户
    </TabNav.Link>

    <TabNav.Link href="#">文档</TabNav.Link>

    <TabNav.Link href="#">设置</TabNav.Link>
  </TabNav.Root>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性增强与背景的颜色对比。

```jsx
<Flex direction="column" gap="4" pb="2">
  <TabNav.Root color="gray">
    <TabNav.Link href="#" active>
      账户
    </TabNav.Link>

    <TabNav.Link href="#">文档</TabNav.Link>

    <TabNav.Link href="#">设置</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="gray" highContrast>
    <TabNav.Link href="#" active>
      账户
    </TabNav.Link>

    <TabNav.Link href="#">文档</TabNav.Link>

    <TabNav.Link href="#">设置</TabNav.Link>
  </TabNav.Root>
</Flex>
```

### [使用路由链接](#使用路由链接)

使用 `asChild` 属性将 `TabNav.Link` 与您应用的路由链接组件组合。

```jsx
<TabNav.Root>
  <TabNav.Link asChild active={pathname === "/account"}>
    <NextLink href="/account">账户</NextLink>
  </TabNav.Link>

  <TabNav.Link asChild active={pathname === "/documents"}>
    <NextLink href="/documents">文档</NextLink>
  </TabNav.Link>

  <TabNav.Link asChild active={pathname === "/settings"}>
    <NextLink href="/settings">设置</NextLink>
  </TabNav.Link>
</TabNav.Root>
```

<!--$-->

<!--/$-->