# Sidebar

> An application shell's primary navigation rail, composed from a layout root, a collapsible rail, a main-content inset, and a family of group/menu/item parts for organizing links.

```ts
import { Sidebar } from "@sdxc/ui";
```

Renders the rail itself: a native `<aside>` sized and styled through its
`data-variant`, `data-collapsible`, and `data-side` attributes, with
every collapse rule keyed off Sidebar.Provider's `:has()` state.

## Examples

```tsx
<Sidebar.Provider>
	<Sidebar variant="floating" collapsible="icon" side="right">
		<Sidebar.Header>{logo}</Sidebar.Header>
		<Sidebar.Content>{nav}</Sidebar.Content>
	</Sidebar>
	<Sidebar.Inset>{children}</Sidebar.Inset>
</Sidebar.Provider>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `variant?` | `"sidebar" \| "floating" \| "inset"` | Visual treatment. Defaults to DEFAULT_VARIANT. |
| `collapsible?` | `"none" \| "offcanvas" \| "icon"` | Collapse behavior. Defaults to DEFAULT_COLLAPSIBLE. |
| `side?` | `"left" \| "right"` | Physical docking edge. Defaults to DEFAULT_SIDE. |

Also accepts everything in `TagProps<"aside">`.


### Sidebar.Provider

Renders the shell's layout root: a flex row placing Sidebar beside Sidebar.Inset, hosting every collapse rule keyed purely off Sidebar.Trigger's checkbox reaching `:checked` in this subtree.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Sidebar and Sidebar.Inset, in either order. |

Also accepts everything in `TagProps<"div">`.


### Sidebar.MobileNav

Renders the docked, edge-to-edge mobile substitute for Sidebar: Sidebar's nav content re-composed inside Dialog, docked to `side` and opened via Invoker Commands, not a viewport check.

| Prop | Type | Description |
| --- | --- | --- |
| `side?` | `"left" \| "right"` | Physical edge to dock against and slide in from. Defaults to DEFAULT_SIDE. |

Also accepts everything in `Dialog.Props`.


### Sidebar.Header

Renders the rail's header slot: a `<header>` laying out its children in a centered row, block-sized to a fixed height with a divider border below it and safe-area padding on its block-start edge.

Also accepts everything in `TagProps<"header">`.


### Sidebar.Content

Renders the rail's own scrollable nav region: ScrollArea.Viewport laid out as a padded, gap-separated column that scrolls independently of Sidebar.Header and Sidebar.Footer once it overflows.

Also accepts everything in `ScrollArea.ViewportProps`.


### Sidebar.Footer

Renders the rail's footer slot: a `<footer>` laying out its children in a centered row with a divider border above it and safe-area padding on its block-end edge.

Also accepts everything in `TagProps<"footer">`.


### Sidebar.Nav

Renders a flat navigation list: a `<nav>` stacking its Sidebar.Item children in a column with a small gap, suited to a rail with a simple, ungrouped set of links.

Also accepts everything in `TagProps<"nav">`.


### Sidebar.Item

Renders a single row inside Sidebar.Nav: a native `<a>` colored through `data-color`, tinted once `aria-current` is set, matching Sidebar.MenuLink; its focus ring always reads in that same color.

Takes no props of its own.

### Sidebar.Group

Renders a related cluster of Sidebar.Menu items: a `<section>` stacking its children in a column, gaining a divider border and extra space above itself whenever it follows another Sidebar.Group.

Also accepts everything in `TagProps<"section">`.


### Sidebar.GroupLabel

Renders Sidebar.Group's label: a small, muted, uppercase heading row, visually clipped once the ancestor Sidebar collapses to icon-only, while staying announced to assistive technology.

Also accepts everything in `TagProps<"div">`.


### Sidebar.GroupAction

Renders a small icon-only action button anchored to Sidebar.GroupLabel's trailing edge, its pointer target grown to `--ui-target-size`.

Also accepts everything in `TagProps<"button">`.


### Sidebar.GroupContent

Renders Sidebar.Group's body slot: a `<div>` stacking its children — typically a Sidebar.Menu — in a column with a small gap.

Also accepts everything in `TagProps<"div">`.


### Sidebar.Menu

Renders a list of nav rows: a native `<ul>` stacking Sidebar.MenuItem children in a column with a small gap.

Also accepts everything in `TagProps<"ul">`.


### Sidebar.MenuItem

Renders a single row inside Sidebar.Menu: a relatively positioned `<li>` whose own `:hover`/`:focus-within` state reveals a nested Sidebar.MenuAction that stays invisible at rest.

Also accepts everything in `TagProps<"li">`.


### Sidebar.MenuButton

Renders a native `<button>` row for an in-page action inside Sidebar.Menu, sized through `data-size` and marked current via `active`; its leading icon is muted, and a trailing label truncates.

| Prop | Type | Description |
| --- | --- | --- |
| `size?` | `"sm" \| "md" \| "lg"` | Size variant. Defaults to DEFAULT_MENU_BUTTON_SIZE. |
| `active?` | `boolean` | Marks the row as the current selection, independent of navigation. |

Also accepts everything in `TagProps<"button">`.


### Sidebar.MenuLink

Renders a native `<a>` row for navigation inside Sidebar.Menu, visually identical to Sidebar.MenuButton.

Takes no props of its own.

### Sidebar.MenuAction

Renders a small icon-only action anchored to Sidebar.MenuItem's trailing edge, revealed by `showOnHover`, with its pointer target grown to `--ui-target-size`.

| Prop | Type | Description |
| --- | --- | --- |
| `showOnHover?` | `boolean` | Whether the control stays invisible until its ancestor Sidebar.MenuItem is hovered or focused. Defaults to DEFAULT_SHOW_ON_HOVER; set `false` to keep it always visible. |

Also accepts everything in `TagProps<"button">`.


### Sidebar.MenuBadge

Renders a small count or status pill pinned to the trailing edge of a Sidebar.MenuButton or Sidebar.MenuLink row, hidden once the ancestor Sidebar collapses to its icon-only rail.

Also accepts everything in `TagProps<"span">`.


### Sidebar.MenuSkeleton

Renders a static loading placeholder shaped like Sidebar.MenuButton: an optional icon-shaped Skeleton block followed by a text-shaped one; compose `pulse()` or `shimmer()` through `mix` for a loading cue.

| Prop | Type | Description |
| --- | --- | --- |
| `showIcon?` | `boolean` | Whether to render a leading icon-shaped placeholder. Defaults to DEFAULT_SHOW_ICON. |

Also accepts everything in `TagProps<"div">`.


### Sidebar.MenuSub

Renders a nested list of sub-rows beneath a Sidebar.MenuItem: a `<ul>` indented from and bordered against the rail's inline-start edge, hidden once the ancestor Sidebar collapses to its icon-only rail.

Also accepts everything in `TagProps<"ul">`.


### Sidebar.MenuSubItem

Renders a single row inside Sidebar.MenuSub: a plain `<li>`.

Also accepts everything in `TagProps<"li">`.


### Sidebar.MenuSubButton

Renders a native `<button>` row for an in-page action inside Sidebar.MenuSub, smaller and more muted than Sidebar.MenuButton, marked current through `active`.

| Prop | Type | Description |
| --- | --- | --- |
| `active?` | `boolean` | Marks the row as the current selection, independent of navigation. |

Also accepts everything in `TagProps<"button">`.


### Sidebar.MenuSubLink

Renders a native `<a>` row for navigation inside Sidebar.MenuSub, visually identical to Sidebar.MenuSubButton.

Takes no props of its own.

### Sidebar.Rail

Renders a thin drag-styled affordance along Sidebar's own edge, toggling Sidebar.Trigger's checkbox through a native `<label>` association; marked `aria-hidden` since that checkbox is the accessible control.

| Prop | Type | Description |
| --- | --- | --- |
| `htmlFor` | `string` | Id of the Sidebar.Trigger checkbox this rail toggles. |

Also accepts everything in `Omit<TagProps<"label">, "htmlFor">`.


### Sidebar.Trigger

Renders the collapse toggle: a native, keyboard-reachable `<input type="checkbox">` in a button-styled `<label>` whose pointer target grows to `--ui-target-size`; its `:checked` state drives every collapse rule in Sidebar.Provider.

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-label"` | `string` | Accessible label for the icon-only control — required, since the control carries no visible text for assistive technology to read. |

Also accepts everything in `Omit<TagProps<"input">, "type" | "role">`.


### Sidebar.Inset

Renders the shell's main content region: ScrollArea.Viewport laid out as a growing flex column that resizes as Sidebar collapses or expands, declaring INSET_CONTAINER_NAME for nested sizing.

Also accepts everything in `ScrollArea.ViewportProps`.


### Sidebar.Separator

Renders a hairline divider between two stretches of rail content: identical to Separator, with the small block-axis and inline-axis margins Sidebar's own content regions expect around one.

Also accepts everything in `Separator.Props`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"sidebar" \| "floating" \| "inset"` | Visual treatment the rail renders with: `"sidebar"` sits flush against its edge, `"floating"` insets itself with a margin, a rounded, shadowed panel, and a blurred backdrop; `"inset"` renders the same panel without blur. |
| `Collapsible` | `"none" \| "offcanvas" \| "icon"` | How the rail collapses: `"none"` always renders at full width, `"icon"` narrows to an icon-only rail, and `"offcanvas"` narrows to nothing. |
| `Side` | `"left" \| "right"` | Physical edge of the shell the rail docks against and, for Sidebar.MobileNav, slides in from. |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role Sidebar.Item renders its current-page treatment in, each mapped to its matching `--ui-*` variables. |
| `MenuButtonSize` | `"sm" \| "md" \| "lg"` | Size variant controlling Sidebar.MenuButton's and Sidebar.MenuLink's padding, font size, and icon size. |