Skip to main content

Breadcrumb

A navigation trail. Children are link: elements. The last item without a destination marks the current page — it renders as plain text, not a link.

Basic usage

breadcrumb:
link: Home → /
link: Docs → /pages/components
link: Content

Deeper hierarchy

breadcrumb:
link: Home → /
link: Products → /products
link: Electronics → /products/electronics
link: Laptops

At the top of a page

Breadcrumbs are typically placed at the top of the page, before the title:

breadcrumb:
link: Home → /
link: Settings → /settings
link: Notifications

centered title: Notifications
centered subtitle: Manage how and when you get notified.

Reference

ChildEffect
link: Label → /pathA clickable breadcrumb item
link: LabelThe current page — rendered as plain text, no link

The / separator between items is added automatically via CSS.