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