Search for pages, actions, and quick links.
Six shell presets. Apply one and it follows you across the app.
Every preset is CSS. Choosing one writes a single class to <html> — the shell renders one static tree and the stylesheet does the rest, addressing it through the same data-slot attributes the density setting uses. Nothing here is a React branch, which is why switching costs no re-render and loses no form state.
Your choice is restored in an inline script that runs before the first paint, so a saved preset is correct on the first frame instead of snapping into place after hydration. The script validates the stored value against the six names below — an unrecognised one falls back to the default rather than producing a class no stylesheet defines.
These are desktop distinctions. Below 1024px every preset falls back to the same off-canvas drawer, because a 68px rail and a horizontal menu bar are both wrong on a phone. Resize this window to see it.
sidebarThe default. A 260px rail with full labels, collapsible to a 68px icon rail from the chevron on its edge — and the collapsed state survives a reload, restored before the first paint.
sidebar-miniA permanent 68px icon rail that expands to full width over the content when you point at it — the content never shifts, because the hover widens the rail without changing the space it reserves. It expands on keyboard focus too: a rail that only opened on hover would be one whose labels a keyboard user could never read.
sidebar-compact88px, with the label stacked under the icon. Every destination stays readable at a third of the width — the trade is that a long name is ellipsised, so it suits a nav whose labels are short.
sidebar-floatThe full rail detached from the viewport edge — inset, rounded and raised on a shadow, so the page reads as a surface the nav sits on rather than a pane docked to it. Collapsible like the default.
topnavNo rail at all. The groups become dropdown menus in a bar under the header and the brand lockup moves into the header, giving the content the full width. Below 1024px every preset falls back to the same drawer, so this is a desktop distinction.
topnav-hybridBoth: the horizontal bar for the groups and a permanent icon rail for reaching a page in one click. The rail expands on hover and focus, like Mini.
A dual sidebar — a narrow icon column that drives a second panel of sub-items. It is the one preset that needs different markup rather than different CSS, so adding it would put a React branch back into the shell and make the layout mode something the server has to guess correctly at build time. It is worth doing properly or not at all.
A width toggle on the previews — the diagrams above are diagrams, not scaled-down renders. A real shell in a 200px box is still at this window's breakpoint, so it would show the mobile drawer while claiming to preview the desktop layout. A drawing that claims less is not wrong.