Segmented Nav
Exclusive destination links styled as a segmented control.
Use SegmentedNav when each segment is a URL destination — a status, ?type=, or another page. Items are real links with aria-current="page" on the current one. Do not use Tabs here: there are no associated panels. For an exclusive value that does not navigate, use Segmented Radio Group. See Segmented controls for the full pick list.
Layout classes (mb-4, hidden md:flex) go on SegmentedNav (<nav>). The muted pill surface is an inner element.
import { SegmentedNav, SegmentedNavItem } from "@coss/ui/shared/segmented-nav";Example
Out of office mine / team / holidays. Copy is paraphrased.
apps/web · out of office
<SegmentedNav aria-label={t("out_of_office")} className="mb-4">
<SegmentedNavItem isActive={tabsValue === "mine"} render={<Link href={hrefForTab("mine")} />}>
{t("my_ooo")}
</SegmentedNavItem>
<SegmentedNavItem isActive={tabsValue === "team"} render={<Link href={hrefForTab("team")} />}>
{t("team_ooo")}
</SegmentedNavItem>
<SegmentedNavItem isActive={tabsValue === "holidays"} render={<Link href={hrefForTab("holidays")} />}>
{t("holidays")}
</SegmentedNavItem>
</SegmentedNav>Bookings status uses size="sm" inside a horizontal ScrollArea.
apps/web · bookings status
<SegmentedNav aria-label={t("bookings")} size="sm">
{tabOptions.map((tab) => (
<SegmentedNavItem
key={tab.value}
isActive={tab.value === currentTab}
render={<Link href={tab.href} />}>
{tab.label}
</SegmentedNavItem>
))}
</SegmentedNav>API
| Prop / part | Type | Notes |
|---|---|---|
SegmentedNav | ComponentProps<"nav"> | Landmark wrapper. className applies to <nav>. |
SegmentedNavItem | ComponentProps<"a"> | Destination. Pass render={<Link href={…} />} for Next.js. |
size | "default" | "lg" | "sm" | Shared with Tabs and Segmented Radio Group. Defaults to "default". Set on the group; override per item only when needed. |
isActive | boolean | Sets aria-current="page" and the selected item styles. |
render | ReactElement | useRender slot. Use for Link. |
aria-label | string | Required on the <nav> when the surrounding heading does not name it. |
Call sites
| File | Notes |
|---|---|
apps/web/modules/settings/outOfOffice/OutOfOfficeToggleGroup.tsx | Mine / team / holidays via ?type= |
apps/web/modules/bookings/components/BookingListContainer.tsx | Booking status links, size="sm" |
apps/web/modules/availability/availability-view.tsx | Mine / team availability; hidden md:flex |
apps/web/components/apps/routing-forms/Header.tsx | Form editor destinations; dirty state still preventDefaults |
Example URLs
Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.
| Path | Notes |
|---|---|
/settings/my-account/out-of-office | Mine / team / holidays |
/bookings/upcoming | Status chips + list/calendar radio |
/availability | Mine / team (desktop) |
Source
On This Page