Breadcrumb

A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.

Breadcrumb Pattern, WAI ARIA Authoring Practices Guide (APG)

§ Notes

Missing.css uses the <nav class="breadcrumbs"> element for breadcrumbs. Use an <ul> or <ol> of links inside. Don't forget to add an aria-label attribute.

If you want to display steps in a process, you can use <ol type=1> and specify the --separator CSS variable.

Add the aria-current attribute (with a value of page or step) to the link representing the current page or step (if any).

Keyboard Interaction

Not applicable.

§ Example

Sitemap Navigation

Step Process