Sidebar

The default variant slides in over the page with a blurred backdrop. It closes on backdrop click or Escape and locks body scroll while open.

import { AppShell, Header, Content, Sidebar, NavGroup, NavItem } from "appshell-react";
import { useState } from "react";
import { Menu, Home, Package, Settings } from "lucide-react";

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <AppShell safeArea>
      <Header
        behavior="fixed"
        logo={
          <button aria-label="Open menu" onClick={() => setOpen(true)}>
            <Menu />
          </button>
        }
      />
      <Sidebar open={open} onClose={() => setOpen(false)} side="left">
        <NavGroup title="Navigation" defaultOpen>
          <NavItem label="Home" icon={<Home />} active />
          <NavItem label="Products" icon={<Package />} />
          <NavItem label="Settings" icon={<Settings />} />
        </NavGroup>
      </Sidebar>
      <Content>{/* main content */}</Content>
    </AppShell>
  );
}

variant="docked" turns the sidebar into a layout column: it sticks below the Header (via the --header-height variable), scrolls independently, and — with collapsible — collapses to an icon rail where NavItem labels hide and become tooltips. Below the breakpoint the panel disappears and the same children open as the overlay drawer through open/onClose.

import { AppShell, Header, Content, Sidebar, NavGroup, NavItem } from "appshell-react";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(false); // mobile drawer fallback

  return (
    <AppShell>
      <Header behavior="fixed" logo={<span className="font-bold">Console</span>} />

      {/* Docked on md+, drawer below md. AppShell builds the two-column
          layout automatically for direct docked-Sidebar children. */}
      <Sidebar
        variant="docked"
        breakpoint="md"
        collapsible
        open={open}
        onClose={() => setOpen(false)}
      >
        <NavGroup title="Workspace" defaultOpen>
          <NavItem label="Dashboard" active />
          <NavItem label="Reports" />
          <NavItem label="Members" badge={2} />
        </NavGroup>
      </Sidebar>

      <Content className="p-6">{/* main content */}</Content>
    </AppShell>
  );
}

Both variants take a topContent and a bottomContent prop — slots pinned above and below the scrolling nav. The top slot is the desktop home for a SearchField (pass inset={false} and pad the slot yourself) or a workspace switcher: with a docked panel the header stays clean, and the space the sidebar usually leaves empty earns its keep. The bottom slot holds the infrastructural actions that don’t navigate — settings, about, a theme toggle, or a UserMenu. In the drawer, the panel itself clears the status bar — slot or no slot — and the bottom edge clears the home indicator, whether the inset lands on the bottom slot or on the scrolling nav. The pattern comes straight from industrial design systems: navigation scrolls, infrastructure stays put.

• • Escape closes the drawer presentation (overlay variant, or the docked variant’s mobile fallback)
• • The collapse toggle is a native button: Enter/Space activate it, with aria-expanded and a visible focus ring
• • The open drawer traps Tab/Shift+Tab inside itself, pulls focus in on the first Tab, and hands focus back to the trigger on close

The open overlay drawer shares its Escape handling, scroll lock, and z-index stacking with every other overlay in the library (SearchModal, a modal BottomSheet, UserMenu/NotificationsMenu) — one stack, so opening a menu inside the drawer closes just the menu, not the drawer underneath it. See BottomSheet’s overlay stack section for the full mechanism, and the nested overlays example to see it live.

See the docked sidebar example for a full workspace app, and the drawer example for the modal pattern.