Navigation menu with links styled as tabs.
<TabNav.Root>
<TabNav.Link href="#" active>
Account
</TabNav.Link>
<TabNav.Link href="#">Documents</TabNav.Link>
<TabNav.Link href="#">Settings</TabNav.Link>
</TabNav.Root>
This component is based on the Navigation Menu primitive and supports common margin props.
Contains the navigation menu links.
Prop | Type | Default |
---|---|---|
size | Responsive<"1" | "2"> | "2" |
wrap | Responsive<"nowrap" | "wrap" | "wrap-reverse"> | |
justify | Responsive<"start" | "center" | "end"> | |
color | enum | |
highContrast | boolean |
An individual navigation menu link.
Prop | Type | Default |
---|---|---|
asChild | boolean | |
active | boolean | false |
Use the size
prop to control the size of the tabs.
<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>
Use the color
prop to assign a specific color to the tab list.
<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>
Use the highContrast
prop to increase color contrast with the background.
<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.
<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>