ContextQMD
Back to Radix Ui

Tab Nav

data/themes/docs/components/tab-nav.mdx

latest3.2 KB
Original Source
jsx
<TabNav.Root>
	<TabNav.Link href="#" active>
		Account
	</TabNav.Link>
	<TabNav.Link href="#">Documents</TabNav.Link>
	<TabNav.Link href="#">Settings</TabNav.Link>
</TabNav.Root>

API Reference

This component is based on the Navigation Menu primitive and supports common margin props.

Root

Contains the navigation menu links.

<ThemesPropsTable defs="tabNavRootPropDefs" />

An individual navigation menu link.

<ThemesPropsTable defs="tabNavLinkPropDefs" />

Examples

Size

Use the size prop to control the size of the tabs.

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

Use the color prop to assign a specific color to the tab list.

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

High-contrast

Use the highContrast prop to increase color contrast with the background.

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

Use the asChild prop to compose TabNav.Link with your app’s router link component.

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