Mushilu-San UI Breadcrumb
Shows where the current page sits in a hierarchy, with links back to each level.
Selector: mui-breadcrumb
import { Breadcrumb } from '@mushilu-san/ui/navigation';Loading example…
Overview
<nav> with an ordered list of items. Every item with an href is a link, and the last item is the current page with aria-current="page".
separator.
When to use
Pages several levels deep in a site or app, such as a product inside a category. Helping users move back up a hierarchy.
When not to use
A flat site with one level. Use a heading. Steps in a process. Use a stepper or tabs. Use Tabs instead.
Guidelines
Do
Keep labels short and match the page headings. Leave the current page as text, not a link.
Don't
Do not use breadcrumbs as the only way to move around the app.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | navigation | |
current item | — | aria-current="page". |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab |
The separator is decorative and does not need a label.
API
Breadcrumb
| Name | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | — | Breadcrumb items. `item.href` is bound via `[href]`, so Angular's built-in URL sanitizer applies (e.g. `javascript:` URLs are neutralized). Consumers remain responsible for passing trusted/validated URLs, especially user-generated ones. |
separator | string | '/' | Text drawn between items. Decorative. Default `/`. |
CSS parts
::part(breadcrumb)::part(current)::part(link)::part(nav)::part(separator)
Tokens
--mui-color-text-muted--mui-color-primary--mui-color-focus-ring--mui-font-size-sm