App shell

The app layout: banner, sidebar, top bar, main area and blade.

Planned maintenance on Sunday from 06:00 UTC. … …

orders

… …

<mm-app-shell>
  <mm-banner slot="banner" tone="warning">Planned maintenance on Sunday from 06:00 UTC.</mm-banner>
  <mm-sidebar-nav slot="sidebar">…</mm-sidebar-nav>
  <mm-top-bar slot="topbar" global-shortcut notifications unread="4">…</mm-top-bar>
  <h1>orders</h1>
  …
  <mm-details-blade slot="blade">…</mm-details-blade>
</mm-app-shell>

Guidance

The app shell lays out a Marmot screen: an optional full-width system banner, the sidebar on the start edge, the top bar, the scrolling main area with page gutters (space-8, or space-4 under 720px) and an optional details blade on the end edge. The page is paper; the sidebar sits on mm-chrome behind a hairline (paper on Light, sunken on Peat), so the chrome stays quieter than the data it frames.

The shell provides the landmarks: the top bar is wrapped in a header, the content in main and the blade in a labelled aside; slot an mm-sidebar-nav (a nav) into sidebar. A "Skip to content" link is the first thing Tab reaches.

⌘B (Ctrl+B elsewhere) collapses the sidebar to a 56px rail and back, and the shell passes the state to the slotted sidebar as collapsed. Under 720px the sidebar becomes an off-canvas drawer, opened by the menu button an mm-top-bar shows at that width (or openDrawer()): a modal dialog that keeps Tab inside it, closes on Escape, the scrim or a link, and returns focus to the button.

Properties

Property	Attribute	Type	Default	Description
sidebarCollapsed	sidebar-collapsed	boolean	false	Collapses the sidebar to a 56px icon rail. Toggled by ⌘B (Ctrl+B); reflected so apps can persist it.
drawerOpen	drawer-open	boolean	false	Whether the navigation drawer is open. Only applies under 720px.
noShortcut	no-shortcut	boolean	false	Turns off the ⌘B (Ctrl+B) shortcut, for example while a rich text editor that uses it has focus.
bleed	bleed	boolean	false	Removes the main area's page gutters so the content fills it to its edges (lineage, query, glossary). The content then manages its own padding.
bladeLabel	blade-label	string	''	Accessible name of the blade aside. Defaults to "Details".
narrow		boolean	false	True under 720px, where the sidebar is a drawer. Read-only; reflected as narrow.
mainElement		HTMLElement | null		The main element, for scrolling it or moving focus to it.

Methods

Method	Description
toggleSidebar()	Collapses or expands the sidebar rail (or opens and closes the drawer on narrow screens), as ⌘B does.
openDrawer()	Opens the navigation drawer (narrow screens) and moves focus into it.
closeDrawer()	Closes the drawer and returns focus to whatever opened it.

Events

Event	Detail	Description
mm-sidebar-toggle	CustomEvent<SidebarToggleDetail>	⌘B or the sidebar's toggle button is about to collapse or expand the sidebar. Cancel it to keep the current state.
mm-drawer-toggle	CustomEvent<DrawerToggleDetail>	The navigation drawer opened or closed (narrow screens).

Slots

Slot	Description
Default	The page: a heading and the content.
banner	One mm-banner, full width above everything else.
sidebar	One mm-sidebar-nav.
topbar	One mm-top-bar. The blade column sizes to the blade it holds (an mm-details-blade is 36rem, or its 3rem rail when folded), capped at half the shell. Full-bleed pages (a lineage canvas, a split workspace) set bleed to drop the main area's gutters and fill it edge to edge; data-bleed is also honoured.
blade	A details blade on the end edge; the column takes the blade's own width. The aside is only shown when filled.

CSS parts

Part	Description
skip-link	The "Skip to content" link.
sidebar	The sidebar column, and the drawer under 720px.
topbar	The header around the top bar.
main	The scrolling main area.
blade	The aside around the blade.
scrim	The scrim behind the open drawer.

CSS custom properties

Property	Description
--mm-shell-height	Height of the shell (default 100dvh).

Examples

Every state of mm-app-shell in Storybook, with keyboard and screen reader tests.