Breadcrumb
Breadcrumb trail; last segment is Current.
In Figma
Section titled “In Figma”From guidelines/components/breadcrumb.md
Properties, variants and anatomy of the Figma components.
Breadcrumb
Section titled “Breadcrumb”Variants: 2
| Property | Type / options |
|---|---|
| Separator | Chevron · Slash |
Breadcrumb item
Section titled “Breadcrumb item”Breadcrumb segment: Home (icon), Link, Current.
Variants: 5
| Property | Type / options |
|---|---|
| Label | text |
| Type | Home · Link · Current |
| State | Default · Hover |
Breadcrumb
Section titled “Breadcrumb”Do
- Show the full path from the top level.
- Make every item except the last a link; the last item is the current page.
- Collapse middle items into “…” when the path is long.
Forbidden
- Never use breadcrumbs in single-level apps.
- Never repeat the page title in the same row.
- Never let a breadcrumb wrap to two lines.