Primitives

Sidebar

Application navigation sidebar behaviour for push and overlay layouts, collapsed state, responsive mode switching and logical inline sides.

At a glance

Layout — Push mode owns structural grid geometry
Overlay — Escape, outside pointer, optional focus and scroll lock
Responsive — Viewport breakpoint chooses desktop/mobile mode
CLI — pnpm quartz add sidebar

Live examples

Loading demo…

Code

Push and collapsed

<div qzSidebar [(open)]="open" [(collapsed)]="collapsed">
  <aside qzSidebarPanel>
    <button qzSidebarTrigger>Toggle</button>
    <nav>...</nav>
  </aside>

  <main qzSidebarContent>...</main>
</div>

Overlay and RTL

<div qzSidebar desktopMode="push" mobileMode="overlay" breakpoint="md" side="inline-start">
  <aside qzSidebarPanel>...</aside>
  <main qzSidebarContent>...</main>
</div>