Breadcrumbs
The path to the current page, with overflow.
<mm-breadcrumbs>
<mm-breadcrumb href="/discover?provider=postgresql">postgresql</mm-breadcrumb>
<mm-breadcrumb href="/discover?db=shop">shop</mm-breadcrumb>
<mm-breadcrumb href="/discover?schema=public">public</mm-breadcrumb>
<mm-breadcrumb>orders</mm-breadcrumb>
</mm-breadcrumbs>
Guidance
Breadcrumbs show where a page sits: Discover › PostgreSQL › shop › public › orders. They are a
nav landmark named "Breadcrumbs" around an ordered list. Separators are chevrons hidden from
assistive technology and mirrored in right-to-left text. The last crumb is the current page: plain
ink text with aria-current="page", not a link. Earlier crumbs are quiet mm-text-2 links.
With more than max crumbs (default 4), or when they do not fit, the middle ones collapse into a
"…" menu button, keeping the first crumb and as many of the last as fit. Crumbs are always in the
text face, asset paths (provider, database, schema, table) included: breadcrumbs are never mono.
Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
max | max | number | 4 | Collapse the middle crumbs into a menu when there are more than this many. Minimum 3. |
label | label | string | '' | Accessible name of the landmark. Defaults to "Breadcrumbs". |
crumbs | MmBreadcrumb[] | |||
overflowed | MmBreadcrumb[] | The crumbs hidden in the overflow menu. |
Slots
| Slot | Description |
|---|---|
| Default | mm-breadcrumb elements, outermost first. |
CSS parts
| Part | Description |
|---|---|
nav | The nav landmark. |
list | The ordered list. |
overflow | The "…" menu button. |
Examples
Every state of mm-breadcrumbs in Storybook, with keyboard and screen reader tests.