Sidenav · full-panel navigation

Sidebar navigation

When every slide uses size: "full", each panel fills the entire container. The result feels like a native sidebar: you see one menu at a time and swipe or click to drill deeper. Works great in a fixed-width column next to a main content area.

Acme Corp

Workspace

John Doe

john@example.com

Main content

The widget sits in a narrow column on the left. Each slide is size: "full" so it always fills the sidebar edge-to-edge.

// Every slide is full width — one panel at a time
const slides = [
  { key: "nav",     size: "full", content: <MainMenu /> },
  { key: "list",    size: "full", content: <ItemList /> },
  { key: "detail",  size: "full", content: <Detail /> },
];

// Place it in a fixed-width column next to your content
<div className="grid grid-cols-[280px_1fr] gap-4">
  <div className="h-screen">
    <MultiWidget slides={slides} fullHeight showCover={false} ... />
  </div>
  <main>…</main>
</div>