figma guide
Designing breadcrumbs in Figma: hierarchy, truncation, and handoff
Design breadcrumb navigation in Figma with separators, truncation, mobile collapse, current-page treatment, and Dev Mode specs engineers can implement without guessing.
- Published
- Updated
- Jun 16, 2026
- Read time
- 6 min
- Level
- Beginner
Quick answer
Breadcrumbs show where the user is in a hierarchy and let them jump to parent levels—design them as a single component set with Item children (link vs current), a configurable Separator, and responsive variants for truncation and mobile collapse. Build BreadcrumbItem with variants type=link | current, state=default | hover | focus | disabled, and optional truncated=true. Use chevron or slash separators consistently, never color alone for the current page, and document max visible items before an ellipsis menu. Pair with navigation and tabs, sidebars, and responsive frames. Start from the Figma guides hub.
Who this is for
- Product designers shipping admin panels, file browsers, ecommerce categories, and settings hierarchies.
- Design system teams standardizing wayfinding across web apps that are too deep for tabs alone.
- Engineers implementing
navlandmarks,aria-current="page", and responsive collapse without re-guessing truncation rules.
When to use breadcrumbs (and when not to)
| Scenario | Breadcrumbs? | Better alternative |
|---|---|---|
| 3+ level hierarchy (Home → Category → Product) | Yes | — |
| Flat app with 1–2 levels | No | Top nav |
| Wizard / checkout steps | No | Stepper |
| Mobile-first shallow IA | Rarely | Back button + page title |
| File path (folders) | Yes | Match OS conventions |
| Modal sub-flow | No | Modal header with back |
Verdict: breadcrumbs help when users land deep from search or email and need to climb up without using the browser back button. Skip them when the hierarchy is flat or a stepper already communicates position.
Component anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Container | Horizontal trail | nav with aria-label="Breadcrumb" |
| Item (link) | Clickable ancestor | Underline on hover optional |
| Item (current) | Active page | Not a link; aria-current="page" |
| Separator | Visual divider | Chevron > or /; not interactive |
| Ellipsis menu | Hidden middle levels | Opens list of collapsed items |
| Home icon | Root shortcut | Optional first item |
Breadcrumb
├── Variant: density=compact | comfortable
├── Variant: collapsed=off | on (mobile)
├── Layer: Row (auto layout horizontal, wrap off)
│ ├── Item (link) × N
│ ├── Separator × N-1
│ ├── Ellipsis (optional)
│ └── Item (current)
└── Property: maxItems (number, document in description)Use auto layout with 4–8px gap between items and 8px around separators. Publish from your team library.
Item states
| State | Link item | Current item | Separator |
|---|---|---|---|
| Default | text/link color | text/primary semibold or regular | text/tertiary |
| Hover | Underline or color shift | N/A (not interactive) | Unchanged |
| Focus | Visible focus ring | N/A | N/A |
| Disabled | Muted, no pointer | N/A | Unchanged |
| Truncated | … with max-width | Same rule | Unchanged |
Current page should be visually distinct but still readable—bold weight or primary text color works; do not rely on color alone. Run accessibility contrast checks on link vs background.
Separator styles
| Style | Feel | Best for |
|---|---|---|
Chevron > | Modern SaaS default | Web apps, dashboards |
Slash / | Editorial, filesystem | Docs, CMS, file paths |
Dot · | Light, minimal | Marketing subsites |
| Icon (home) | Root only | Replace “Home” text on mobile |
Pick one separator per product surface. Mixing chevrons and slashes in the same app reads as unfinished.
Truncation and collapse patterns
Long paths break layouts. Document these behaviors in component descriptions:
| Pattern | Behavior | When to use |
|---|---|---|
| Tail truncate | Show first + ellipsis + last 2 | Wide tables, file paths |
| Middle collapse | Home > … > Settings > Profile | 5+ levels |
| Scroll horizontal | Row scrolls on narrow screens | Rare; easy to miss |
| Mobile back | Hide trail; show ← Parent only | <480px native-feel apps |
Recommended default: show first item + ellipsis + last two items when items > 4. Prototype the ellipsis as a dropdown listing hidden levels.
Bind max item width with min width 0 on text layers inside auto layout so truncation ellipsis works—see responsive constraints.
Responsive variants
| Breakpoint | Layout | Notes |
|---|---|---|
| Desktop | Full trail | comfortable density |
| Tablet | Middle collapse at 5+ | Same component, boolean collapsed |
| Mobile | ← Section or 2-item trail | collapsed=on variant |
Create a frame preset for common content widths (1280, 768, 375) and drop breadcrumb instances on each—do not assume desktop-only specs.
Prototyping breadcrumbs
- Static frames per page depth for marketing handoff screenshots.
- Component variants swapping
currentitem per screen—fast for design reviews. - Interactive links on ancestor items only; wire to parent frames in prototype flows.
Current item should not have a prototype link. Separators are never clickable.
Handoff to engineering
| Deliverable | Detail |
|---|---|
items[] | { label, href } ordered root → leaf |
current | Last item; no href |
separator | chevron | slash | dot |
maxItems | Number before collapse |
collapseMode | middle | start | none |
aria-label | Default "Breadcrumb" |
| Mobile rule | Variant name or boolean collapsed |
Add to your Dev Mode checklist. If breadcrumbs sit above page titles in cards, document vertical spacing (usually 8–12px above H1).
Real-world examples
Ecommerce category path
Home > Electronics > Audio > Headphones > Sony WH-1000XM5 — collapse to Home > … > Headphones > Sony WH-1000XM5 on tablet. Current item is product name; no link.
SaaS settings
Workspace > Billing > Invoices > INV-2041 — slash separators, compact density, no home icon. Invoice ID is current; Billing is link.
File manager
Icon folder + truncated middle segments; double-click behavior is out of scope—note “click navigates, does not expand tree” in spec. Pair with sidebar tree nav if you also show a folder tree.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Current page is a link | Double navigation, SEO noise | type=current, no href |
| Separator is clickable | Confusing hit targets | Decorative only |
| 8+ visible segments | Overflow on laptop | Middle collapse |
| No mobile rule | Broken header | collapsed variant |
| Breadcrumbs on every screen | Visual clutter | Use only on deep routes |
| Duplicate page title | Redundant H1 + current crumb | Shorten current label or drop H1 repeat |
| Color-only current state | Fails a11y | Weight + color |
| Wrong order (leaf first) | Disorienting | Root → current always |
FAQ
Breadcrumbs or tabs?
Tabs switch sibling sections at the same level. Breadcrumbs show parent hierarchy. Use both when tabs sit inside a deep section (e.g. Settings > Team trail + Profile / Billing tabs).
Breadcrumbs in modals?
Usually no—use a back affordance in the modal header. Breadcrumbs belong to page chrome, not overlays.
Include Home on every trail?
Yes for marketing and docs; optional in dense admin UIs where the sidebar already shows root.
How small can touch targets be?
Ancestor links should meet 44px min height on mobile or sit in a toolbar with adequate padding—same guidance as navigation bars.
Bottom line
Breadcrumbs are a hierarchy map, not primary navigation. Build them as a reusable trail with link vs current variants, one separator style, and explicit truncation rules for long paths. Document collapse behavior and mobile alternatives in Dev Mode so engineering does not invent a different pattern per screen. Continue with navigation, sidebars, responsive layout, and the tutorials hub.
§ Keep reading