The breadcrumb informs the users on their current location relative to the homepage of the website and allows them to navigate to higher levels.
Anatomy
The breadcrumb is an horizontal set of links* starting from the homepage or root of the hierarchy and work down to the current location.
* except the last item in the group, which is the current page
- Mandatory
- Optional
| Name | Mandatory | Description |
|---|---|---|
| Link | Yes | Item that redirects the user to the level in the hierarchy above the current page |
| Separator | Yes | Symbol that separates breadcrumb items it is also used to denote hierarchy, as in the format of Parent category > Child category |
| Label | Yes | Last item of the breadcrumb that indicates the current page. It’s not a clickable element |
Do's
- the first element of the breadcrumb must always be labelled 'Home' and must link to the homepage of the actual site where the current user page is located
Don'ts
- don't use long labels unless necessary
When to use
- if your website's navigational structure is a tree of more than 2 levels
When not to use
- if your website's navigational structure has less than 3 levels of depth
- if your site navigational structure isn't a tree