Skip to content
Components

TabNavigation

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

Usage

import { TabNavigation, tabNavigationAnatomy, TabNavigationLink, TabNavigationList } from "@instruments/materia-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 Base UI value tracking here.

Props

TabNavigation

PropTypeDefaultDescription
fullWidthbooleanfalse

Whether tabs should fill container width with equal widths

sizeResponsiveSize"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

PropTypeDefaultDescription
activebooleanfalse

Marks this tab as active - shows the animated indicator and sets aria-selected.

href(required)string
iconIconComponent

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

PropTypeDefaultDescription
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

Flex, Icon, Tabs