Breadcrumbs
Breadcrumbs are a secondary pattern of navigation showing the content’s hierarchical progress or following the user’s path one step at a time.
They give users an alternative way to orient themselves. Although a helpful addition, breadcrumbs shouldn't replace a page’s main navigation.
Types
Link types include desktop and mobile sizes.
Guidelines
Anatomy
Interaction
There should be no links or interactions on the current page that the user(s) are on. The previous pages should be hyperlinked, and their interactions should be highlighted in text when hovered over.
Placement
Breadcrumbs should be placed in the page's upper left corner. They are situated below the header and navigation but above the page title.
Specifications
In order to build pixel-perfect bread-crumb designers and developers can use these specifications.
Do
- Use when the user has most likely to have found web page from an external source.
- Use for large websites so that users can quickly know where they are.
- Ensure that breadcrumbs don’t visually overwhelm the page.
- Position at the top left corner of the page, above the page title.
Don't
- Use when hierarchical navigation is possible.
- Use five links in order to prevent the top of the page from being cluttered.
- Use when the hierarchy of a webpages navigation contains only one level.
- Wrap breadcrumbs across multiple lines.