Shell
BsShell is a responsive app-shell layout with a collapsible sidebar. Place the sidebar as a child with slot="sidebar"; every other child is the main content area. It is server-rendered as Declarative Shadow DOM, so the sidebar and its hamburger toggle work with JavaScript disabled. The chrome around this very page is a live BsShell.
Basic usage
A full-width top bar (built-in hamburger + topbar slot) sits above the sidebar/content row. breakpoint sets the viewport width at/above which the sidebar is expanded; size is the expanded width.
Full-height layout
The content is the scroll region only when the host has a bounded height. Give BsShell a viewport height — anything you pass via class or style falls through to the element.
Controlled state
Leave state as "auto" for responsive behaviour, or drive it yourself and react to @statechange (its detail.open is the resolved visual state).
External toggle
Set external-toggle to hide the built-in hamburger and toggle the shell from your own button.
API
| Prop | Type | Default | Description |
|---|---|---|---|
state | 'auto' | 'show' | 'hide' | 'auto' | Sidebar visibility; auto is responsive. |
breakpoint | 'xs'…'xxl' | 'md' | Viewport width at/above which auto expands the sidebar. |
size | CSS length | 15rem | Expanded sidebar width (also settable via --mp-shell-size). |
external-toggle | boolean | false | Hide the built-in hamburger; drive the toggle from your own control. |
dismiss-on-navigate | boolean | false | Auto-close the overlay drawer when a sidebar link is clicked (narrow mode only). Mark a link (or a wrapper) with data-no-dismiss to exclude it — e.g. a parent that only expands a sub-list. |
@statechange | (detail: {'{'} open: boolean {'}'}) => void | — | Fires when the toggle flips. |
Slots: topbar, sidebar, and the default (unnamed) slot for main content.