Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Tab Nav
  5. API and Development

Tab nav

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Tabs builds on Radix Themes Tabs 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. TabsTrigger accepts to or href, optional extraRouteMatchers, counter, leadIcon, and iconTitle.
Tabs
Storybook
TabsTrigger
NameTypeDefaultDescription
to / hrefstring—Destination path.
extraRouteMatchersarray—Extra paths that mark tab active.
counternumber | string—Badge when > 0.
leadIconIcon—Icon before label.
onClickMouseEventHandler—Runs before default navigation.
Default (interactive)
Second tab active
Many tabs
Long tab names
With counters
Extra route matchers
Small
Sliding animation
Static paths (no state)
The preview fixes currentPath and uses a no-op navigate so the active tab is visible without leaving the page.
Picking the right component
ScenarioComponentWhy
Navigate to different routes (URL changes)TabsRenders <a> links; supports Ctrl/Cmd+click, browser history, pathname matching.
Filter or view-switch without URL changeTabsSelection state only—no routing, no content panels.
Switch between content panels on one pageTabsManages visibility of TabsContent panels with ARIA roles.
Previous
Tab Nav / Usage
Next
Tab Nav / Accessibility
On this page
Tabs
Storybook
TabsTrigger
Default (interactive)
Second tab active
Many tabs
Long tab names
With counters
Extra route matchers
Small
Sliding animation
Static paths (no state)
Picking the right component