Sidebar

Install

The sidebar is part of the boilerplate skill, with every other component on this site. Install it in your project's folder; it works in Claude Code, Codex, Cursor and other agents. Already done? Skip ahead. More in the Introduction.

npx skills add frontendsupply/skills --skill boilerplate

Ask

Then ask for it in your own words, or run the command. The skill reads your project's style first and writes the component in it. If the project has no sidebar yet:

/boilerplate add sidebar

If it already has one, the skill rebuilds it on this pattern and keeps its look, its names and every place that uses it working:

/boilerplate refactor sidebar

Either way it ends by proving that only the look changed: a script checks every behavior class and slot is still there.

Collapsed to a rail

Collapsing narrows the sidebar to a rail of icons rather than hiding it. Each row keeps only its icon, centered, and names itself in a tooltip on hover. Badges, actions, section labels and nested rows step aside, and nothing reflows while it animates. A row with nested rows, like Automations, has nowhere to show them in the rail, so clicking it expands the sidebar with that section open. A count, like Inbox's, becomes a dot on its icon, so unread mail still shows. An app that wants the sidebar gone entirely can say so.

Peek

In peek mode, resting the pointer on the rail opens the whole sidebar over the page, which doesn't move; it folds back once the pointer leaves. Tabbing into the rail opens it too, and a menu opened from it holds it open until the menu closes. The toggle pins it open.

Either side

A sidebar can sit on the right edge: an inspector, comments, a document's outline. Its border faces the page, its rail and tooltips mirror, its resize handle moves to the inner edge, and on a phone its drawer slides in from the right. A page with a navigation sidebar and an inspector nests a second provider for the second one.

Resize and shortcut

Drag the sidebar's edge to make it wider or narrower; the rows follow as you drag. Drag it most of the way in and it collapses; drag out from the rail and it opens again. Double-click the edge for the default width. From the keyboard, ← and → resize it and Enter collapses it. The width is handed to the app to keep. A shortcut, here ⌘B (Ctrl B), toggles the sidebar from anywhere, except while you type. Try both on Plate I.

A sub panel

A section with many pages of its own, like Reports, gets a panel next to the sidebar for them. The app decides when it shows, usually while that section is current, and the sidebar can fold into its rail at the same time, so the two take about the room of one. The row that opens it ends in a chevron pointing where the panel opens; from the rail it opens the panel without expanding the sidebar. Open Reports above to try it. The panel is built from the same rows, groups and nested lists as the sidebar.

Composition

Rows become whatever they need to be: a link, a menu's trigger (the workspace switcher, the account menu), or a collapsible section's trigger (Automations). A row holds one trailing badge or action, which never lands on a nested row below it. The search at the top is the Input skill's field, set on the rows' lines. In a long sidebar, the current row scrolls into view on its own, and a hairline under the header and over the footer shows when rows run on beneath them.

On phones

Below 768px the sidebar becomes a drawer that slides in from its edge, always expanded: no rail on a phone. A swipe or its close button closes it, and so does any row that goes somewhere, a link or a router's button, while rows that open a section or a menu leave it open. A sub panel opens inside the drawer: it slides in over the sidebar, and a back button slides it away again.

Alignment

The same sidebar at its real size, with the lines its parts share. Hover a line to see what sits on it: logo, icons and avatar centered in each row's first square, so the logo and avatar, being wider, share an edge of their own just outside the icons'; group labels in line with the icons; labels and nested icons starting where that square ends, nested labels on a line of their own; badges, actions and chevrons centered in the row's last square; every row the same height with the same gap, ending on one edge, its parts centered on its middle. The dashed line at the edge is the sidebar's inset, the same around every section. A part a pixel off would show as a line of its own.