navigation/@mihcm/ui·v0.21.0·stable
TabNavigation
Link-based tab navigation for routed sections. Use Tabs for local state and TabNavigation when each item is a URL.
Props
The full prop API for TabNavigation. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
items | TabNavigationItem[] | — | Navigation or action items with value, optional href, label, description, icon, badge, active, disabled, loading, and external link metadata. | 0.12.0 |
loadItems | () => Promise<TabNavigationItem[]> | — | Async item loader for permissioned or remote section lists. | 0.12.2 |
activeValue / defaultActiveValue | string | — | Controlled or uncontrolled active item value for action tabs. | 0.12.2 |
onActiveValueChange | (value, item) => void | Promise<void> | — | Selection handler with async pending-state support. | 0.12.2 |
onItemSelect | (item, event) => void | Promise<void> | — | Low-level item selection callback for analytics, routing guards, or async workflows. | 0.12.2 |
ariaLabel | string | 'Section navigation' | Accessible nav label. | 0.12.0 |
variant | 'underline' | 'pills' | 'contained' | 'underline' | Visual treatment. | 0.12.0 |
size | 'sm' | 'md' | 'lg' | 'md' | Height and text-size preset. | 0.12.0 |
wrap / fullWidth | boolean | — | Responsive wrapping and equal-width item layout controls. | 0.12.2 |
loading / disabled | boolean | — | Global busy or disabled state. | 0.12.2 |
renderLoading / renderError | () => ReactNode | — | Custom async loading and error renderers. | 0.12.2 |
listClassName / itemClassName | string | — | Tokenized Tailwind overrides for the list and item controls. | 0.12.2 |
className | string | — | Additional Tailwind classes on the nav wrapper. | 0.12.0 |
Import
import { TabNavigation } from '@mihcm/ui/TabNavigation';