Tab Nav

Navigation menu with links styled as TabNav.

Use Tabs for non-linked tabs with respective tab panel content.

#Example

#Usage

#Active tab

Use the isActive prop to indicate which TabNavLink is active.

#Decorators: counts, tooltips, and status indicators

Add the following props to a TabNav to add decorations to the TabNavLink:

• Add the count prop to display a gray badge with the count within the TabNavLink.
• Add the countFormatter prop to change the way the count is rendered.
• Add the badgeVariant prop to change the variant of the badge within the TabNavLink.
• Add the tooltip prop to add a tooltip to the text.
• Add the statusIndicator prop to add an extra indicator to the right of the TabNavLink text.

Use these instead of directly rendering additional components within the TabNavLink itself.

#With router links

Use the asChild prop to compose TabNavLink with your app's router link component. This allows you to use router-specific navigation while maintaining the TabNav styling and behavior.

When using asChild, the href prop is not required since the router link component handles navigation.

You can also combine asChild with decorators like counts and tooltips:

#Loading

TabNav has its own loading state when used with the Skeleton component.

#Guidelines

#When to use

• When tabs are links.

#When not to use

• When tabs are buttons with corresponding tab panel content.

#Content

• Use sentence case for tab link titles.
• Keep tab titles to 3 words max.

#Props

#TabNav

Inherits margin and padding props.

Name	Default	Description
children	—	ReactNode Tab nav links.

#TabNavLink

Name	Default	Description
badgeVariant	—	BadgeProps["variant"] The variant of the badge if a count is provided.
count	—	number Optional count to display near the title.
countFormatter	—	(count: number) => string | number Optional function to format the count.
tooltip	—	Omit<TooltipProps, "children"> Optional tooltip to add to the text.
statusIndicator	—	ReactNode Optional status indicator to place to the right of the text.
isDisabled	false	boolean If tab is disabled.
isActive	—	boolean True if the tab is active.
children	—	ReactNode Tab title. When `asChild` is true, this should be a React element (e.g., a router Link component). Otherwise, use a string.
as	—	ElementType Element type to render as.
isExternal	—	boolean If true, the link will open in new tab
asChild	—	true | false When true, merges props with the child element instead of rendering its own element. Useful for composing with router link components. When true, `href` is not required.
href	—	string Link URL. Required when `asChild` is false or undefined.