Quick Links

Tab Nav

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>

API Reference

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

Root

Contains the navigation menu links.

Prop	Type	Default
`size`	`"1" \| "2"`	`"2"`
`wrap`	`"wrap" \| "nowrap" \| "wrap-reverse"`
`justify`	`"start" \| "center" \| "end"`
`color`	`"gray" \| "purple"`
`highContrast`	`boolean`

Link

An individual navigation menu link.

Prop	Type	Default
`asChild`	`boolean`
`active`	`boolean`	`false`

Examples

Size

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>

Color

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

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

High-contrast

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

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

With router links

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>