带有链接的导航菜单，样式为标签页。
<TabNav.Root>
<TabNav.Link href="#" active>
Account
</TabNav.Link>
<TabNav.Link href="#">Documents</TabNav.Link>
<TabNav.Link href="#">Settings</TabNav.Link>
</TabNav.Root>
此组件基于 Navigation Menu 基础组件，并支持通用外边距属性。
包含导航菜单链接。
| 属性 | 类型 | 默认值 |
|---|---|---|
尺寸 | 响应式<"1" | "2"> | "2" |
换行 | 响应式<"nowrap" | "wrap" | "wrap-reverse"> | 无默认值 |
对齐 | 响应式<"start" | "center" | "end"> | 无默认值 |
颜色 | 枚举 | 无默认值 |
高对比度 | 布尔值 | 无默认值 |
单个导航菜单链接。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
激活状态 | 布尔值 | 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>