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 className or style falls through to the element.
Controlled state
Leave state as "auto" for responsive behaviour, or drive it yourself and react to onStatechange (its detail.open is the resolved visual state).
External toggle
Set externalToggle 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). |
externalToggle | boolean | false | Hide the built-in hamburger; drive the toggle from your own control. |
dismissOnNavigate | 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. |
onStatechange | (e: CustomEvent<{ open: boolean }>) => void | — | Fires when the toggle flips. |
Slots: topbar, sidebar, and the default (unnamed) slot for main content.