Use breadcrumbs to reveal a page's location within the site hierarchy
Usage
Use breadcrumbs at the top of the page. Ideally, they should be above the page title to provide quick navigation context.
Don't use breadcrumbs as primary navigation: They should complement, not replace the main navigation.
Writing breadcrumb labels
Use page titles or section names: Breadcrumb labels should align with the page’s heading or main content theme.
Use clear, descriptive labels and match the main page titles when possible:
Home › Heating › Heat Pumps
Dashboard › Reports › Monthly Performance
Use vague or generic terms or repeat the same word across levels:
Home › Section › Page
Home › Products › Products Details
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
❌ |
|
App (@ovotech/element-native) |
❌ |
Related
External links
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile