Sidebar

A composable, themeable and customizable sidebar component.

Installation

npx lily-svelte@latest add sidebar

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the sidebar source from the registry into `$lib/components/ui/sidebar`, and the `is-mobile` hook into `$lib/hooks`.

Structure

A sidebar is composed from the following parts:

Sidebar.Provider — handles the open/collapsed state (and the Cmd/Ctrl + B shortcut).
Sidebar.Root — the sidebar container.
Sidebar.Header / Sidebar.Footer — sticky at the top and bottom.
Sidebar.Content — scrollable content.
Sidebar.Group — a section within the content.
Sidebar.Menu — a list of menu buttons, badges, actions and sub-menus.
Sidebar.Trigger — toggles the sidebar.
Sidebar.Rail — a thin strip on the edge that also toggles the sidebar.
Sidebar.Inset — the main content area next to the sidebar.

Usage

<script lang="ts">
	import * as Sidebar from '$lib/components/ui/sidebar';
</script>
 
<Sidebar.Provider>
	<Sidebar.Root collapsible="icon">
		<Sidebar.Header />
		<Sidebar.Content>
			<Sidebar.Group>
				<Sidebar.GroupLabel>Application</Sidebar.GroupLabel>
				<Sidebar.GroupContent>
					<Sidebar.Menu>
						<Sidebar.MenuItem>
							<Sidebar.MenuButton isActive tooltipContent="Home">
								{#snippet child({ props })}
									<a href="/" {...props}>
										<HomeIcon />
										<span>Home</span>
									</a>
								{/snippet}
							</Sidebar.MenuButton>
						</Sidebar.MenuItem>
					</Sidebar.Menu>
				</Sidebar.GroupContent>
			</Sidebar.Group>
		</Sidebar.Content>
		<Sidebar.Footer />
		<Sidebar.Rail />
	</Sidebar.Root>
	<Sidebar.Inset>
		<header>
			<Sidebar.Trigger />
		</header>
		<!-- page content -->
	</Sidebar.Inset>
</Sidebar.Provider>

Sidebar.Root accepts:

side — "left" (default) or "right".
variant — "sidebar" (default), "floating" (a floating card), or "inset" (the main content becomes an inset card).
collapsible — "offcanvas" (default, slides away), "icon" (collapses to icons; menu buttons show their tooltipContent), or "none".

On screens narrower than 768px the sidebar automatically renders inside a Sheet.

To read or control the state from a child component, use useSidebar():

<script lang="ts">
	import { useSidebar } from '$lib/components/ui/sidebar';
 
	const sidebar = useSidebar();
	// sidebar.open, sidebar.isMobile, sidebar.toggle(), sidebar.setOpen(true), ...
</script>