Sidebar nav
The grouped sidebar navigation, with a collapsed rail.
<mm-sidebar-nav>
<mm-logo slot="header" size="24"></mm-logo>
<mm-nav-group label="Catalog">
<mm-nav-item href="/" icon="home">Home</mm-nav-item>
<mm-nav-item href="/discover" icon="travel-explore" current>Discover</mm-nav-item>
<mm-nav-item href="/glossary" icon="menu-book">Glossary</mm-nav-item>
<mm-nav-item href="/products" icon="package-2">Data products</mm-nav-item>
</mm-nav-group>
<mm-nav-group label="Work">
<mm-nav-item href="/query" icon="terminal">Query</mm-nav-item>
<mm-nav-item href="/insights" icon="insights">Insights</mm-nav-item>
</mm-nav-group>
<mm-nav-group label="Operate">
<mm-nav-item href="/runs" icon="extension" attention="2" attention-label="2 pipelines failed">Plugins</mm-nav-item>
<mm-nav-item href="/audit" icon="policy">Query audit</mm-nav-item>
<mm-nav-item href="/rules" icon="rule">Asset rules</mm-nav-item>
</mm-nav-group>
<mm-nav-item slot="footer" href="/settings" icon="settings" attention="3">Settings</mm-nav-item>
</mm-sidebar-nav>
Guidance
The app's main navigation, on mm-chrome (paper on Light, sunken on Peat) down the start edge of the app shell. Destinations sit in
mm-nav-groups with sentence-case labels (Catalog, Work, Operate), with Settings and the Cloud
organisation switcher in the footer slot. The current page is the one place the navigation
carries colour: the burnt-sienna tint with ink text. Everything else is mm-text-2 so the chrome stays
quieter than the page.
With collapsed the navigation becomes a 56px icon rail: labels become tooltips, group labels
become hairlines and counts become dots. Inside mm-app-shell the shell sets collapsed (⌘B), and
the toggle button at the foot asks the shell to switch.
Keyboard: items are links, so Tab moves through them in order (the APG disclosure navigation pattern, https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/). As a shortcut, ArrowUp and ArrowDown also move between items and group headings, and Home and End jump to the first and last. This is deliberately not a roving tabindex: every destination stays one Tab away, as links in a landmark should.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
collapsed | collapsed | boolean | false | Shows the 56px icon rail. Set by mm-app-shell when the sidebar is collapsed. |
label | label | string | '' | Accessible name of the nav landmark. Defaults to "Main". |
noToggle | no-toggle | boolean | false | Hides the collapse button at the foot. |
Events
| Event | Detail | Description |
|---|---|---|
mm-sidebar-toggle | CustomEvent<NavToggleDetail> | The toggle button changed collapsed (only when not inside mm-app-shell, which fires its own). |
Slots
| Slot | Description |
|---|---|
| Default | mm-nav-group and mm-nav-item elements. |
header | The logo, usually <mm-logo>. An mm-logo shows its "M" monogram in the rail. |
footer | Settings and the organisation switcher. |
CSS parts
| Part | Description |
|---|---|
nav | The nav landmark. |
header | The header area. |
groups | The scrolling list of groups. |
footer | The footer area. |
toggle | The collapse button. |
CSS custom properties
| Property | Description |
|---|---|
--mm-sidebar-width | Expanded width (default 240px). |
Examples
Every state of mm-sidebar-nav in Storybook, with keyboard and screen reader tests.