Sidebar

Overview

Persistent side panel that houses navigation, filters, or supplementary page content.

Usage

<script lang="ts">
  import Sidebar from '@lostgradient/cinder/sidebar';
  import SideNavigation from '@lostgradient/cinder/side-navigation';
</script>

<Sidebar label="App sidebar">
  {#snippet navigation()}
    <SideNavigation ariaLabel="Primary navigation">
      <!-- side-navigation items -->
    </SideNavigation>
  {/snippet}
</Sidebar>

Live preview

When to use

Use when

Wrapping the page chrome so a navigation column can collapse and become a mobile drawer automatically.
Sharing collapsed state between a side-navigation column and the rest of the app shell via context.

Avoid when

Building the page body itself rather than the surrounding shell — use a hand-rolled page scaffold instead.
Rendering navigation entries directly — place side-navigation inside the sidebar column.

Examples

Basic sidebar

Layout-level sidebar with navigation and footer regions. Collapse toggles icon-only mode on desktop and closes the drawer on mobile.

App-owned mobile trigger

Use the exported Sidebar mobile media query when a top bar owns the drawer trigger outside the Sidebar.

Props

Props for sidebar
Name	Type	Default	Required	Bindable	Description
`id`	`unknown`		req
`collapsed`	`boolean`	`false`		bind	Whether the sidebar is collapsed. Bindable via `bind:collapsed`. Default `false`. Above `mobileBreakpoint`, `collapsed=true` switches the sidebar to icon-only mode. At or below `mobileBreakpoint`, the sidebar renders inside a `<Drawer>` and `collapsed=true` means the drawer is closed.
`label`	`text`	`'Sidebar'`			Accessible name for the outer landmark and the mobile drawer. Defaults to `'Sidebar'` for convenience but must be unique per page. Navigation content owns its own accessible name; for example, use `SideNavigation.ariaLabel`.
`mobileBreakpoint`	`text`				Viewport width below which the sidebar switches from the inline aside to the mobile drawer. Accepts a simple CSS length such as `'47.99rem'` or `'1024px'`. Default `'47.99rem'`.
`navigation`	`snippet`				Navigation content. Typically a `<SideNavigation>` subtree, which owns the navigation landmark and its accessible name. Optional so the sidebar can serve as app chrome without a navigation list.
`footer`	`snippet`				Optional footer region (e.g. user account, sign-out).