# Navigation Components

> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.

Components: Breadcrumb, Menubar, NavigationMenu, Pagination, Sidebar, Tabs, VerticalIconBar

Each imports from its own subpath as one namespace, with its parts as dotted members, e.g. `import { Tabs } from "@nurix/components/compound/tabs"` then `Tabs.List`, `Tabs.Trigger`, `Tabs.Content`.

## Sidebar

Collapsible app shell: the shadcn primitives plus an opinionated kit, all as `Sidebar.*` members of `@nurix/components/block/sidebar`, with `useSidebar` beside it.

**Sub-components:** `Sidebar.Provider` (`defaultOpen`, `open`, `onOpenChange`, `openMobile`, `onOpenMobileChange`, `keyboardShortcut` [default `"b"`, `null` unbinds], `labels`), `Sidebar` (`side` [start|end], `variant` [sidebar|floating|inset], `collapsible` [offcanvas|icon|none], default `offcanvas`), `Sidebar.Trigger`, `.Rail`, `.Inset`, `.Input`, `.Header`, `.Content`, `.Footer`, `.Separator`, `.Group`, `.GroupLabel`, `.GroupAction`, `.GroupContent`, `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction` (`isHoverRevealed`), `.MenuBadge`, `.MenuSkeleton` (`hasIcon`), `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`. **Kit:** `Sidebar.Brand` (`logo`, `name`, `caption`, `href`), `Sidebar.Switcher` (`variant` [simple|rich], `side` [bottom|inline-end], `options`, `value`/`defaultValue`/`onValueChange`, `addAction`), `Sidebar.ItemGroup` (`variant` [list|tree|rich], `items`, `isCollapsible`, `hasCollapsibleItems`, `defaultExpandedIds`, `collapsedLabel` [hide|divider], `onShowMore`, `onItemClick`), `Sidebar.UserMenu` (`user`, `menuItems`), `Sidebar.CommandTrigger` (`collapsedTooltip`).

- `useSidebar()` returns `{ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar, panelId, labels }` and throws outside `Sidebar.Provider`.
- Page content is a sibling `Sidebar.Inset`, never a child of `Sidebar`. The sidebar stores nothing — persist open state through `defaultOpen` + `onOpenChange`.
- A file tree in the nav is `Sidebar.ItemGroup variant="tree"`; a footer card is a `Sidebar.Group` composed inside `Sidebar.Footer`.

```tsx
<Sidebar.Provider>
  <Sidebar collapsible="icon">
    <Sidebar.Header>
      <Sidebar.Switcher options={workspaces} defaultValue={workspaces[0].id} />
    </Sidebar.Header>
    <Sidebar.Content>
      <Sidebar.ItemGroup label="Platform" variant="tree" items={items} />
    </Sidebar.Content>
    <Sidebar.Footer>
      <Sidebar.UserMenu user={user} menuItems={accountActions} />
    </Sidebar.Footer>
    <Sidebar.Rail />
  </Sidebar>
  <Sidebar.Inset><Sidebar.Trigger />{children}</Sidebar.Inset>
</Sidebar.Provider>
```

## Pagination

Pager over a page count (`compound/pagination`); `getPageRange(page, pageCount, siblingCount = 1)` returns the page window as numbers and `"ellipsis"` markers.

**Sub-components:** `Pagination.Content`, `.Item`, `.Link` (`value` or `isActive`, `href`), `.Previous`, `.Next`, `.First`, `.Last`, `.Ellipsis`; every control takes `size` [sm|default|lg], `isIconOnly`, `disabled`.

**Props:** `value`/`defaultValue`/`onValueChange(value, details)`, `pageCount`, `labels`

- A link takes `value` (the root holds the page) or `isActive` (a router owns it, with `href`), never both. In value mode the step controls disable at the ends; in router mode pass `disabled` yourself.

```tsx
<Pagination value={page} pageCount={12} onValueChange={setPage}>
  <Pagination.Content>
    <Pagination.Item><Pagination.Previous /></Pagination.Item>
    {getPageRange(page, 12).map((entry, index) => (
      <Pagination.Item key={index}>
        {entry === "ellipsis" ? <Pagination.Ellipsis /> : <Pagination.Link value={entry}>{entry}</Pagination.Link>}
      </Pagination.Item>
    ))}
    <Pagination.Item><Pagination.Next /></Pagination.Item>
  </Pagination.Content>
</Pagination>
```

## Other Components

- `compound/tabs` — `Tabs` with `Tabs.List` (`align` [start|justify], `activateOnFocus`), `Tabs.Trigger`, `Tabs.Content` (`keepMounted`), optional `Tabs.Contents` (height-settling, fading panel box); root `value`/`defaultValue`/`onValueChange`, `variant` [default|underline], `size` [sm|default|lg], `orientation`
- `compound/breadcrumb` — `Breadcrumb` with `Breadcrumb.Item` (`href`, `render`; the last item always renders as the current page); `maxItems` with `itemsBeforeCollapse`/`itemsAfterCollapse` (default 1 and 2) folds the middle behind an ellipsis menu; `separator`, `labels`
- `compound/navigation-menu` — `NavigationMenu` with `.List`, `.Item`, `.Trigger`, `.Content`, `.Link` (`isActive`, `closeOnClick`, `render`); a plain link takes `className={navigationMenuTriggerStyle({ size })}`; placement and `hasArrow` sit on the root, beside `orientation` and `labels.navigation`
- `compound/menubar` — `Menubar` with `.Menu`, `.Trigger`, `.Popup`, `.Item` (fires `onClick`, never `onSelect`), `.LinkItem`, `.CheckboxItem`, `.RadioGroup`/`.RadioItem`, `.Group`, `.Label`, `.Separator`, `.Sub`/`.SubTrigger`/`.SubPopup`, `.Shortcut` (display only, binds no key)
- `block/vertical-icon-bar` — `VerticalIconBar`: narrow always-icon rail; `items` (`{ value, label, icon, href?, render?, description?, badge?, disabled? }`), `value`/`defaultValue`/`onValueChange`, `width` (default `5rem`), `footer`, `labels.navigation`
- No nurix primitive: `navbar` (nearest composition `NavigationMenu`) and `stepper` — build both from the `index.md` fallback spec