Loading navigation…
User
API and Development
TabNav builds on Radix Themes TabNav with pathname-based active detection. Pass currentPath, navigate, and matchPath from React Router (or equivalents) so tabs behave as real links—middle-click and “open in new tab” keep working. TabNavItem accepts to or href, optional extraRouteMatchers, counter, leadIcon, and iconTitle.
No extracted props
This component does not declare package-specific props in the generated API. It may still accept standard HTML and React attributes for its underlying element (for example className, id, and ARIA attributes). Props whose types come only from dependencies are omitted from this table.
Interactive examples and edge cases for this component are in Storybook.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Destination path. |
|
|
| Extra paths that mark tab active. |
|
|
| Badge when > 0. |
|
|
| Icon before label. |
|
|
| Runs before default navigation. |
The preview fixes currentPath and uses a no-op navigate so the active tab is visible without leaving the page.
| Scenario | Component | Why |
|---|---|---|
| Navigate to different routes (URL changes) | TabNav | Renders <a> links; supports Ctrl/Cmd+click, browser history, pathname matching. |
| Filter or view-switch without URL change | TabMenu | Selection state only—no routing, no content panels. |
| Switch between content panels on one page | Tabs | Manages visibility of TabsContent panels with ARIA roles. |