Dashboard Shell

The workspace switcher sits under the brand in the sidebar, beside the nav it scopes; the top bar carries the breadcrumb. The user menu appears once, at the foot of the sidebar. Press Collapse at the sidebar’s foot to watch it become the rail. The width toggle really switches the layout here — placement="inline" measures the breakpoint against the frame.

Icons only, with the label in a tooltip on hover and on focus. A count becomes a dot on the icon and stays in the tooltip and the accessible name; a section label becomes a hairline rather than truncated text. brand, sidebarHeader and sidebarFooter are render-prop slots, so the wordmark, the switcher and the user menu each pick their own compact form — the shell never shrinks a node it does not own.

A nav item with children becomes a disclosure. The parent toggles and does not navigate — one control, one outcome — so if a group is also a page, add it as its own first child. /members/invitations is the active route here: shut the group and the parent takes the active treatment, so closing it never hides where you are. Collapse the sidebar and a parent brings it back rather than opening a flyout, because a flyout would put a second popup on a trigger that already owns a tooltip.

Disabled items keep their place and explain their reason in a tooltip that a keyboard reaches too — the row stays focusable, so the reason survives the rail. With no breadcrumb and no page actions the top bar collapses instead of ruling an empty strip across the content — and comes back below the breakpoint, where it still has the menu trigger to hold.