Breadcrumb

Navigational hierarchy

Demo

See more examples

API

Tag

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.

Get creative!

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

Accessibility

It is recommended that the last item in breadcrumbs has aria-current="page".