Sidebar · ui.voila.dev

<Sidebar.Provider>
	<Sidebar.Root collapsible="icon">
		<Sidebar.Header>…</Sidebar.Header>
		<Sidebar.Content>
			<Sidebar.Group>
				<Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>
				<Sidebar.GroupContent>
					<Sidebar.Menu>
						<Sidebar.MenuItem>
							<Sidebar.MenuButton isActive tooltip="Dashboard">
								<HouseIcon />
								<span>Dashboard</span>
							</Sidebar.MenuButton>
						</Sidebar.MenuItem>
					</Sidebar.Menu>
				</Sidebar.GroupContent>
			</Sidebar.Group>
		</Sidebar.Content>
	</Sidebar.Root>
	<Sidebar.Inset>
		<header><Sidebar.Trigger /></header>
	</Sidebar.Inset>
</Sidebar.Provider>

collapsible takes offcanvas (slides away), icon (collapses to a rail of icons) or none. With icon, the tooltip on each menu button is what labels it once the text is hidden, so pass it always.

The provider stores the open state in a cookie, so the sidebar comes back the way the user left it.

API

Sidebar.Root

Prop	Type	Default
`collapsible`	`"icon" \| "none" \| "offcanvas"`	`"offcanvas"`
`sheetDescription`	`string`	`"Displays the mobile sidebar."`
`sheetTitle`	`string`	`"Sidebar"`
`side`	`"left" \| "right"`	`"left"`
`variant`	`"floating" \| "inset" \| "sidebar"`	`"sidebar"`

Plus every <div> prop. Source: sidebar/components/sidebar-root.tsx.

Sidebar.Content

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: sidebar/components/sidebar-content.tsx.

Sidebar.Footer

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: sidebar/components/sidebar-footer.tsx.

Sidebar.Group

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: sidebar/components/sidebar-group.tsx.

Sidebar.GroupAction

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <button> prop. Source: sidebar/components/sidebar-group-action.tsx.

Sidebar.GroupContent

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: sidebar/components/sidebar-group-content.tsx.

Sidebar.GroupLabel

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: sidebar/components/sidebar-group-label.tsx.

Sidebar.Header

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: sidebar/components/sidebar-header.tsx.

Sidebar.Input

Prop	Type	Default
`className`	`string` \| `((state: InputState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`defaultValue`	`string \| number \| readonly string[]`	—	The default value of the input. Use when uncontrolled.
`onValueChange`	`((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void)`	—	Callback fired when the `value` changes. Use when controlled.
`render`	`ComponentRenderFn<HTMLProps, InputState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: InputState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.
`value`	`string \| number \| readonly string[]`	—	The value of the input. Use when controlled.

Plus the DOM props of the element it renders. Source: sidebar/components/sidebar-input.tsx.

Sidebar.Inset

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <main> prop. Source: sidebar/components/sidebar-inset.tsx.

Sidebar.Menu

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <ul> prop. Source: sidebar/components/sidebar-menu.tsx.

Sidebar.MenuAction

Prop	Type	Default
`showOnHover`	`boolean`	`false`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <button> prop. Source: sidebar/components/sidebar-menu-action.tsx.

Sidebar.MenuBadge

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: sidebar/components/sidebar-menu-badge.tsx.

Sidebar.MenuButton

Prop	Type	Default
`isActive`	`boolean`	`false`
`size`	`"default" \| "lg" \| "sm"`	`"default"`	Row height. `sm` for a dense secondary list, `lg` for a top-level entry with a description.
`tooltip`	`string \| Props`	—
`variant`	`"default" \| "outline"`	`"default"`	`outline` gives the item its own border, for a button that is not part of the navigation list.
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <button> prop. Source: sidebar/components/sidebar-menu-button.tsx.

Sidebar.MenuItem

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <li> prop. Source: sidebar/components/sidebar-menu-item.tsx.

Sidebar.MenuSkeleton

Prop	Type	Default
`showIcon`	`boolean`	`false`

Plus every <div> prop. Source: sidebar/components/sidebar-menu-skeleton.tsx.

Sidebar.MenuSub

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <ul> prop. Source: sidebar/components/sidebar-menu-sub.tsx.

Sidebar.MenuSubButton

Prop	Type	Default
`isActive`	`boolean`	`false`
`size`	`"default" \| "sm"`	`"default"`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <a> prop. Source: sidebar/components/sidebar-menu-sub-button.tsx.

Sidebar.MenuSubItem

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <li> prop. Source: sidebar/components/sidebar-menu-sub-item.tsx.

Sidebar.Provider

Prop	Type	Default
`defaultOpen`	`boolean`	`true`
`keyboardShortcut`	`string \| false`	`SIDEBAR_KEYBOARD_SHORTCUT`
`onOpenChange`	`((open: boolean) => void)`	—
`open`	`boolean`	—

Plus every <div> prop. Source: sidebar/components/sidebar-provider.tsx.

Sidebar.Rail

Plus every <button> prop. Source: sidebar/components/sidebar-rail.tsx.

Sidebar.Separator

Prop	Type	Default
`className`	`string` \| `((state: SeparatorState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`orientation`	`Orientation`	—	The orientation of the separator.
`render`	`ComponentRenderFn<HTMLProps, SeparatorState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: SeparatorState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: sidebar/components/sidebar-separator.tsx.

Sidebar.Trigger

Prop	Type	Default
`loading`	`boolean`	—	Show a leading spinner and mark the button `aria-busy`, disabling interaction while an async action is in flight (e.g. a form submit).
`shape`	`"default" \| "pill"`	—	`pill` forces a fully rounded button; `default` follows the theme's `--radius`, so it changes with the brand.
`size`	`"default"` \| `"icon"` \| `"icon-lg"` \| `"icon-sm"` \| `"icon-xs"` \| `"lg"` \| `"sm"` \| `"xs"`	—	Height and horizontal padding. The `icon-*` set is square, for a button whose entire content is one icon — give those an `aria-label`.
`variant`	`"brand"` \| `"default"` \| `"destructive"` \| `"ghost"` \| `"highlight"` \| `"link"` \| `"outline"` \| `"primary"` \| `"secondary"`	—	Weight of the action. `default` is the one thing the page exists for, at most one per view; `secondary` an equal-weight alternative; `outline` for toolbars and anything that repeats in a row; `ghost` inside dense surfaces; `destructive` for what cannot be undone; `link` for an action that reads as navigation.
`className`	`string` \| `((state: ButtonState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`focusableWhenDisabled`	`boolean`	—	Whether the button should be focusable when disabled.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`ComponentRenderFn<HTMLProps, ButtonState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: ButtonState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: sidebar/components/sidebar-trigger.tsx.