Top bar
The app's top bar: page context, global search, notifications and the avatar menu.
<mm-top-bar global-shortcut notifications unread="4" help-href="/docs">
<mm-breadcrumbs slot="start">
<mm-breadcrumb href="/discover">Discover</mm-breadcrumb>
<mm-breadcrumb>orders_daily</mm-breadcrumb>
</mm-breadcrumbs>
<mm-avatar-menu slot="end" name="Jane Doe" email="jane.doe@northwind.dev" language="English (UK)"></mm-avatar-menu>
</mm-top-bar>
Guidance
The top bar runs across the main column of the app shell: 52px on paper with a hairline below. It
holds page context on the start side (breadcrumbs), the global search trigger in the centre, and
notifications, help and the avatar menu on the end side. It is chrome, so it stays quiet: no fills,
no burnt sienna, mm-text-2 icons.
The search trigger looks like a search field, reads "Search the catalog" and shows the ⌘K keycap.
It does not take text: it fires mm-open-search so the app can open its command palette. With
global-shortcut, ⌘K (Ctrl+K elsewhere) fires it from anywhere on the page.
Inside mm-app-shell under 720px a menu button appears at the start to open the navigation drawer.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
placeholder | placeholder | string | '' | Placeholder text of the search trigger. Defaults to "Search the catalog". |
globalShortcut | global-shortcut | boolean | false | Registers ⌘K (Ctrl+K) on the window to fire mm-open-search. Use on one top bar per page. |
noSearch | no-search | boolean | false | Hides the built-in search trigger. |
notifications | notifications | boolean | false | Shows the notifications bell. |
unread | unread | number | 0 | Unread notifications, shown as a count beside the bell. |
helpHref | help-href | string | '' | URL of the help and documentation link. Shows a help button when set. |
navExpanded | nav-expanded | boolean | false | Whether the navigation drawer is open, for the menu button's aria-expanded. Set by mm-app-shell. |
searchTrigger | HTMLButtonElement | null | The search trigger, for returning focus after the palette closes. |
Events
| Event | Detail | Description |
|---|---|---|
mm-open-search | CustomEvent<OpenSearchDetail> | The search trigger was activated or ⌘K pressed. |
mm-open-notifications | CustomEvent<Record<string, never>> | The bell was activated. |
mm-nav-toggle | CustomEvent<Record<string, never>> | The narrow-screen menu button was activated. mm-app-shell opens its drawer. |
Slots
| Slot | Description |
|---|---|
start | Page context, usually mm-breadcrumbs. |
search | Replaces the built-in search trigger. |
end | Extra actions and the mm-avatar-menu, after the bell and help buttons. |
CSS parts
| Part | Description |
|---|---|
bar | The bar. |
nav-toggle | The menu button that opens the navigation drawer on narrow screens. |
search | The search trigger. |
notifications | The bell button. |
Examples
Every state of mm-top-bar in Storybook, with keyboard and screen reader tests.