Drawer

CSS-only sidebar drawer. A hidden checkbox drives open/close state — no JavaScript required. Uses named slots: content for the main area, side for the sidebar.

Left drawer

Default position — sidebar slides in from the left.

Left drawer demo

Main page content lives here.

Open drawer

Right drawer

Add end prop to place the sidebar on the right.

Right drawer demo

Click the button to open the right drawer.

Open right drawer

Persistent sidebar

Add checked to the underlying checkbox via a custom layout — or use lg:drawer-open in classes to keep the sidebar always-visible at large breakpoints.

drawer-open (always open on lg+)

On large screens the sidebar is always visible. On small screens it collapses behind the hamburger.

Toggle