Sidebar

An application shell's primary navigation rail, composed from a layout root, a collapsible rail, a main-content inset.

Dashboard

Every monitor reporting, last checked a minute ago.

View code

<Sidebar.Provider>
	<Sidebar collapsible="none">
		<Sidebar.Header>
			<span>Acme Status</span>
		</Sidebar.Header>

		<Sidebar.Content>
			<Sidebar.Group>
				<Sidebar.GroupLabel>Workspace</Sidebar.GroupLabel>
				<Sidebar.GroupContent>
					<Sidebar.Menu>
						<Sidebar.MenuItem>
							<Sidebar.MenuLink href="/dashboard" active>
								<LayoutDashboardIcon aria-hidden="true" />
								<span data-sidebar-collapsed-hide>Dashboard</span>
							</Sidebar.MenuLink>
						</Sidebar.MenuItem>
						<Sidebar.MenuItem>
							<Sidebar.MenuLink href="/incidents">
								<CircleAlertIcon aria-hidden="true" />
								<span data-sidebar-collapsed-hide>Incidents</span>
								<Sidebar.MenuBadge>3</Sidebar.MenuBadge>
							</Sidebar.MenuLink>
							<Sidebar.MenuSub>
								<Sidebar.MenuSubItem>
									<Sidebar.MenuSubLink href="/incidents/open" active>
										Open
									</Sidebar.MenuSubLink>
								</Sidebar.MenuSubItem>
								<Sidebar.MenuSubItem>
									<Sidebar.MenuSubLink href="/incidents/resolved">Resolved</Sidebar.MenuSubLink>
								</Sidebar.MenuSubItem>
							</Sidebar.MenuSub>
						</Sidebar.MenuItem>
						<Sidebar.MenuItem>
							<Sidebar.MenuLink href="/reports">
								<ChartLineIcon aria-hidden="true" />
								<span data-sidebar-collapsed-hide>Reports</span>
							</Sidebar.MenuLink>
						</Sidebar.MenuItem>
					</Sidebar.Menu>
				</Sidebar.GroupContent>
			</Sidebar.Group>

			<Sidebar.Separator />

			<Sidebar.Group>
				<Sidebar.GroupLabel>Resources</Sidebar.GroupLabel>
				<Sidebar.GroupContent>
					<Sidebar.Menu>
						<Sidebar.MenuItem>
							<Sidebar.MenuLink href="/docs">
								<BookOpenIcon aria-hidden="true" />
								<span data-sidebar-collapsed-hide>Documentation</span>
							</Sidebar.MenuLink>
						</Sidebar.MenuItem>
						<Sidebar.MenuItem>
							<Sidebar.MenuLink href="/settings">
								<SettingsIcon aria-hidden="true" />
								<span data-sidebar-collapsed-hide>Settings</span>
							</Sidebar.MenuLink>
						</Sidebar.MenuItem>
					</Sidebar.Menu>
				</Sidebar.GroupContent>
			</Sidebar.Group>
		</Sidebar.Content>

		<Sidebar.Footer>
			<Sidebar.MenuButton>
				<UserIcon aria-hidden="true" />
				<span data-sidebar-collapsed-hide>sergio@aside.co</span>
			</Sidebar.MenuButton>
		</Sidebar.Footer>
	</Sidebar>

	<Sidebar.Inset>
		<HeadingScope>
			<Heading>Dashboard</Heading>
		</HeadingScope>
		<Text>Every monitor reporting, last checked a minute ago.</Text>
		<Button variant="outline" size="sm">Run every check now</Button>
	</Sidebar.Inset>
</Sidebar.Provider>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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.

Composition

The parts the component publishes, each a static property of the host.

Sidebar
Sidebar.ProviderRenders 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.
Sidebar.MobileNavRenders 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.
Sidebar.HeaderRenders 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.
Sidebar.ContentRenders 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.
Sidebar.FooterRenders 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.
Sidebar.NavRenders 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.
Sidebar.ItemRenders 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.
Sidebar.GroupRenders 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.
Sidebar.GroupLabelRenders 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.
Sidebar.GroupActionRenders a small icon-only action button anchored to Sidebar.GroupLabel's trailing edge.
Sidebar.GroupContentRenders Sidebar.Group's body slot: a <div> stacking its children — typically a Sidebar.Menu — in a column with a small gap.
Sidebar.MenuRenders a list of nav rows: a native <ul> stacking Sidebar.MenuItem children in a column with a small gap.
Sidebar.MenuItemRenders 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.
Sidebar.MenuButtonRenders 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.
Sidebar.MenuLinkRenders a native <a> row for navigation inside Sidebar.Menu, visually identical to Sidebar.MenuButton.
Sidebar.MenuActionRenders a small icon-only action anchored to Sidebar.MenuItem's trailing edge, revealed by showOnHover on hover or focus within the row.
Sidebar.MenuBadgeRenders 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.
Sidebar.MenuSkeletonRenders 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.
Sidebar.MenuSubRenders 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.
Sidebar.MenuSubItemRenders a single row inside Sidebar.MenuSub: a plain <li>.
Sidebar.MenuSubButtonRenders a native <button> row for an in-page action inside Sidebar.MenuSub, smaller and more muted than Sidebar.MenuButton, marked current through active.
Sidebar.MenuSubLinkRenders a native <a> row for navigation inside Sidebar.MenuSub, visually identical to Sidebar.MenuSubButton.
Sidebar.RailRenders 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.
Sidebar.TriggerRenders the collapse toggle: a native, keyboard-reachable <input type="checkbox"> wrapped in a button-styled <label>; its :checked state drives every collapse rule in Sidebar.Provider.
Sidebar.InsetRenders 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.
Sidebar.SeparatorRenders 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.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

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

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

Also accepts everything in TagProps<"div">.

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.

Also accepts everything in TagProps<"header">.

Sidebar.Content

Also accepts everything in ScrollArea.ViewportProps.

Also accepts everything in TagProps<"footer">.

Also accepts everything in TagProps<"nav">.

Also accepts everything in TagProps<"section">.

Also accepts everything in TagProps<"div">.

Also accepts everything in TagProps<"button">.

Sidebar.GroupContent

Also accepts everything in TagProps<"div">.

Also accepts everything in TagProps<"ul">.

Also accepts everything in TagProps<"li">.

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

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

Also accepts everything in TagProps<"span">.

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

Also accepts everything in TagProps<"div">.

Also accepts everything in TagProps<"ul">.

Also accepts everything in TagProps<"li">.

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

Also accepts everything in TagProps<"button">.

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

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

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

Also accepts everything in ScrollArea.ViewportProps.

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.

Dashboard

Installation

Usage

Composition

Props

Sidebar.Provider

Sidebar.MobileNav

Sidebar.Header

Sidebar.Content

Sidebar.Footer

Sidebar.Nav

Sidebar.Item

Sidebar.Group

Sidebar.GroupLabel

Sidebar.GroupAction

Sidebar.GroupContent

Sidebar.Menu

Sidebar.MenuItem

Sidebar.MenuButton

Sidebar.MenuLink

Sidebar.MenuAction

Sidebar.MenuBadge

Sidebar.MenuSkeleton

Sidebar.MenuSub

Sidebar.MenuSubItem

Sidebar.MenuSubButton

Sidebar.MenuSubLink

Sidebar.Rail

Sidebar.Trigger

Sidebar.Inset

Sidebar.Separator

Types