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	—	ReactNodeTab nav links.

#TabNavLink

Name	Default	Description
badgeVariant	—	BadgeProps["variant"]The variant of the badge if a count is provided.
count	—	numberOptional count to display near the title.
countFormatter	—	(count: number) => string | numberOptional function to format the count.
tooltip	—	Omit<TooltipProps, "children">Optional tooltip to add to the text.
statusIndicator	—	ReactNodeOptional status indicator to place to the right of the text.
isDisabled	false	booleanIf tab is disabled.
isActive	—	booleanTrue if the tab is active.
children	—	ReactNodeTab title. When asChild is true, this should be a React element (e.g., a router Link component). Otherwise, use a string.
as	—	ElementTypeElement type to render as.
isExternal	—	booleanIf true, the link will open in new tab
asChild	—	true | falseWhen 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	—	stringLink URL. Required when asChild is false or undefined.