Breadcrumb

Navigational hierarchy

Demo

See more examples

API

Tags

Name Type Content
m-breadcrumb Custom tag One <nav> child with <a>, <span>, or <m-crumb> children.
m-crumb Custom tag Any

Guidelines

Crumb order

The last crumb must represent the current page and should be a span. All other crumbs should be links navigating up the hierarchy. When the user is at the top of the hierarchy, it may or may not make sense to display Breadcrumb at all.

With menus

Breadcrumbs can support all kinds of elements for more demanding designs, but you should not deviate from the core purpose of navigational hierarchy.

Accessibility

The last item in breadcrumbs should represent the current page and have aria-current="page".