<SidebarSection> is a flat, non-interactive group heading; <SidebarDivider> draws a thin rule between groups. Both are <li> siblings to <SidebarItem> in the same list.

Sidebar with flat sections

<Sidebar>
  <SidebarSection labelText="Project" />
  <SidebarItem href="/" labelText="Dashboard" active />
  <SidebarItem href="/components" labelText="Components" />

  <SidebarDivider />

  <SidebarSection labelText="Guides" />
  <SidebarItem href="/getting-started" labelText="Getting Started" />
</Sidebar>

Zones: compose start / center / end

Navbar mirrors core's universal schema — a fixed burger plus three open zones. It prescribes no fixed brand / nav / search / profile slots: compose each zone from AppHeader, NavMenu, PageHeader, NavbarSearch, ProfileButton, … in any order you like.

<Navbar showBurger onburgerclick={toggle}>
  {#snippet start()}
    <AppHeader><h1>My App</h1></AppHeader>
    <NavMenu>…</NavMenu>
  {/snippet}
  {#snippet center()}<PageHeader><h2>Dashboard</h2></PageHeader>{/snippet}
  {#snippet end()}<ProfileButton name="Jane" onclick={openProfile} />{/snippet}
</Navbar>

NavMenu: active state + responsive collapse

Mark the current section with isActive on a NavItem. Opt a NavMenu into progressive collapse with collapse — its lowest-priority items fold out as the header narrows (per-item order via navPriority; navCollapse="hide" to just hide one). Touch support for hover dropdowns is wired automatically.

<NavMenu collapse="menu" moreLabel="More">
  <NavItem href="/" isActive navPriority={10}>Dashboard</NavItem>
  <NavItem href="/reports">Reports</NavItem>
  <NavItem href="/forms" navCollapse="hide">Forms</NavItem>
</NavMenu>

<!-- Or fold items into the sidebar instead of a "More" menu: -->
<NavMenu collapse="sidebar" collapseLabel="Menu">…</NavMenu>

Navbar Fit: priority-driven header degradation (rc12–rc14)

Where navCollapse only folds nav items, Navbar Fit degrades every header slot — brand wordmark, version tag, page title, search box — one at a time, lowest priority first, until the row fits, then restores as space returns (no blanket mobile breakpoint). It's pure composition: nothing fit-aware is baked into Navbar — wrap a slot in a FitSlot to opt it in. strategy="hide" drops the slot; strategy="steps" holds a ladder of FitStep variants (widest first) that shrinks Svelte Pure Admin → SPA → gone. FitStep auto-numbers the ladder and hides the non-first steps for a correct first paint — no data-pc-fit-step or pc-fit-hidden to hand-author.

<Navbar>
  {#snippet start()}
    <AppHeader>
      <h1>
        <FitSlot strategy="steps" priority={30} class="pc-app-header__name">
          <FitStep>Svelte Pure Admin</FitStep>
          <FitStep>SPA</FitStep>
        </FitSlot>
        <FitSlot priority={10} class="pc-app-header__version">v1.9.0</FitSlot>
      </h1>
    </AppHeader>
  {/snippet}
  {#snippet center()}
    <FitSlot priority={25} tag="div"><NavbarSearch onclick={openPalette} /></FitSlot>
    <FitSlot priority={20} tag="div"><PageHeader><Heading level={2}>Dashboard</Heading></PageHeader></FitSlot>
  {/snippet}
</Navbar>