Routed settings tabs
Use TabNavigation for URL-backed sections. Use Tabs for local state.
Profile settings
The active item reflects the current route.
<TabNavigation variant="contained" items={[{ href: '/settings/profile', label: 'Profile', active: true }]} />Underline product nav
Use underline tabs for dense secondary navigation above tables.
<TabNavigation variant="underline" size="sm" items={items} />Async action nav
Use action items for local filters, async preference updates, or guarded workspace switches.
Selected section: summary
The selection waits for the async handler before updating.
<TabNavigation activeValue={activeValue} onActiveValueChange={async (value) => setActiveValue(value)} items={items} />