Static Tabs

A simple, horizontal list of links

Source

Installation

npx @rahimstack@latest add tabs

Usage

As opposed to NavigationMenu, StaticTabs are meant to be used for secondary navigation. On overflow, the component will be scrollable horizontally.

API Reference

const StaticTabsAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-StaticTabs__root",
        "flex w-full overflow-hidden overflow-x-auto",
    ]),
    trigger: cva([
        "UI-StaticTabs__trigger",
        "group/staticTabs__trigger inline-flex flex-none shrink-0 basis-auto items-center font-medium text-sm transition outline-none min-w-0 justify-center",
        "text-[--muted] hover:text-[--text-color]",
        "h-10 px-4 rounded-full",
        "data-[current=true]:bg-[--subtle] data-[current=true]:font-semibold data-[current=true]:text-[--foreground]",
        "focus-visible:bg-[--subtle]",
    ]),
    icon: cva([
        "UI-StaticTabs__icon",
        "-ml-0.5 mr-2 h-4 w-4",
    ]),
})