TabNavigation

Provides shared context (variant, size, fullWidth) to its tab links for router-based navigation. Import from "@desk/ui/components/tab-navigation". Shares styling with the Tabs component.

Usage

import { TabNavigation, tabNavigationAnatomy, TabNavigationLink, TabNavigationList } from "@desk/ui/components/tab-navigation";

Best practices

Use TabNavigation when each tab is a route/URL (it renders a <nav> of links); for in-page panels that swap without navigating, use Tabs.
It shares the Tabs look via context but defaults to variant="line"; mark the active link yourself (e.g. router aria-current) — there's no Radix value tracking here.

Props

TabNavigation

Prop	Type	Default	Description
fullWidth	`boolean`	`false`	Whether tabs should fill container width with equal widths
size	`ResponsiveSize`	`"base"`	Component size — a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.
variant	`"line" \| "pill"`	`"line"`	Visual style variant: pill or line (underline)

TabNavigationLink

Prop	Type	Default	Description
active	`boolean`	`false`	Marks this tab as active — shows the animated indicator and sets `aria-selected`.
asChild	`boolean`	`false`	Render via Slot, merging props onto a custom link child (e.g. a router `<Link>`) instead of an `<a>`.
href(required)	`string`
icon	`IconComponent`		Optional icon rendered alongside the label.
iconPlacement	`"end" \| "start"`	`"start"`	Icon position relative to the label.
variant	`"line" \| "pill" \| null \| undefined`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| null \| undefined`

TabNavigationList

Prop	Type	Default	Description
variant	`"line" \| "pill" \| null \| undefined`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| null \| undefined`

Also exports

consttabNavigationAnatomy

Anatomy

TabNavigation

tab-navigation

Root navigation container with tab-like styling

TabNavigationList

tab-navigation-list

Row wrapping the individual tab links

TabNavigationLink

tab-navigation-link

Single tab rendered as a routing link

Composition

Builds on

Icon, Tabs