Getting Started
Components
Search for a command to run...
TabNav provides a clean, organized way to present navigation options in a horizontal row with tab-like styling. Unlike Tabs which switch between content panels, TabNav is used for page-level navigation where each item typically links to a different page or section. It's commonly used in application headers, settings panels, or anywhere horizontal navigation with tab aesthetics is needed.
Built on top of Radix UI's NavigationMenu primitive with keyboard navigation support (Arrow keys to move between items, Enter/Space to activate), focus management, and accessibility features including proper ARIA attributes.
Component tab-nav-default not found in registry.
import { TabNav } from "@strongtie/design-system/tab-nav"This module exports the following components:
TabNavTabNavLink<TabNavLink>This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | - |
Component tab-nav-default not found in registry.
Component tab-nav-disabled not found in registry.
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
CSS classes used by this component:
tab-nav-itemtab-nav-linktab-nav-listtab-nav-titleThis component inherits accessibility features from Radix UI, including: