Layout

Sidebar

Responsive layout shell that anchors a collapsible column beside main content and swaps to a drawer below a configurable breakpoint.

import { Sidebar } from '@lostgradient/cinder';
layoutresponsive
01

Overview

Reference usage

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

See the SideNavigation versus Sidebar decision for the boundary between the responsive shell here and the accessibility-focused nav landmark in SideNavigation.

Usage

svelte 
<script lang="ts">
  import { Sidebar } from '@lostgradient/cinder';
  import { SideNavigation } from '@lostgradient/cinder';
</script>

<Sidebar label="App sidebar">
  {#snippet navigation()}
    <SideNavigation ariaLabel="Primary navigation">
      <SideNavigation.Item href="/dashboard">Dashboard</SideNavigation.Item>
      <SideNavigation.Item href="/projects">Projects</SideNavigation.Item>
    </SideNavigation>
  {/snippet}
</Sidebar>
Live preview

Basic sidebar

Main content area.

Resize the viewport below ~767px to see the mobile drawer behavior.

02

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.
  • Needing only an accessible nav landmark, not a responsive collapsing shell. Use Side Navigation instead
03

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.

04

Props

Props for sidebar
Name
Type
Default
Description
id text
collapsed bindable boolean false 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).