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>
No props data available for TabNav.
Use the size prop to control the size of the tabs.
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>
Use the color prop to assign a specific color to the tab list.
color
<Flex direction="column" gap="4" pb="2"> <TabNav.Root color="purple"> <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"> <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.
highContrast
<Flex direction="column" gap="4" pb="2"> <TabNav.Root color="purple"> <TabNav.Link href="#" active> Account </TabNav.Link> <TabNav.Link href="#">Documents</TabNav.Link> <TabNav.Link href="#">Settings</TabNav.Link> </TabNav.Root> <TabNav.Root color="purple" 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.
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>
2 variants found
Used 37 times across 1 package
9 files