TabNav is based on Navigation Menu primitive
TabNav is a theme component based on the Navigation Menu primitive and supports common margin props.
Radix Primitives · all subjects
tab-nav
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
TabNav.Root component
TabNav.Root is the container component that holds the navigation menu links. It supports the size, color, and highContrast props.
TabNav.Link component
TabNav.Link is an individual navigation menu link within TabNav.Root. It accepts an href prop for the link destination and an active prop to indicate the currently active link.
TabNav size prop
Use the size prop on TabNav.Root to control the size of the tabs. Valid values are 1 and 2.
TabNav color prop
Use the color prop on TabNav.Root to assign a specific color to the tab list. Documented color values include indigo, cyan, orange, crimson, and gray.
TabNav highContrast prop
Use the highContrast prop on TabNav.Root to increase color contrast with the background.
TabNav.Link active prop
The active prop on TabNav.Link indicates which link is currently active. It can be set as a boolean or derived from a router condition.
TabNav.Link asChild composition with router links
Use the asChild prop on TabNav.Link to compose it with your app's router link component such as NextLink. This allows the Tab Nav styling to be applied to router links while preserving their navigation behavior.
TabNav basic example
Example showing a basic TabNav.Root with three TabNav.Link children, one marked as active: <TabNav.Root>\n\t<TabNav.Link href="#" active>\n\t\tAccount\n\t</TabNav.Link>\n\t<TabNav.Link href="#">Documents</TabNav.Link>\n\t<TabNav.Link href="#">Settings</TabNav.Link>\n</TabNav.Root>