标签导航

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

View source Report an issue View in Playground

<TabNav.Root>
	<TabNav.Link href="#" active>
		账户
	</TabNav.Link>
	<TabNav.Link href="#">文档</TabNav.Link>
	<TabNav.Link href="#">设置</TabNav.Link>
</TabNav.Root>

API 参考

该组件基于导航菜单原语，并支持常见边距属性。

根节点

包含导航菜单链接。

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 属性控制标签的尺寸。

<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 属性为标签列表指定特定的颜色。

<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 属性增强与背景的颜色对比。

<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 与您应用的路由链接组件组合。

<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>

上一篇标签 Tabs

下一篇文本区域 Text Area

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

标签导航