The breadcrumb is a trail, informing the users on their current location in the site's structure. This is done relative to the homepage, and allows them to navigate up the site's information architecture.
Anatomy
Core
- mandatory
- optional
Standardised (Harmonised)
- mandatory
- optional
| Elements | Mandatory desktop | Mandatory mobile | Description |
|---|---|---|---|
| homepage link | yes | yes | link taking users to the homepage (this is considered level 0) |
| parent page link | yes | yes | link taking users to the parent page (this is considered level 1) |
| child page label | yes | yes | label of the current page (this is considered level 2) |
Note: Showcase images reflect the minimum number of levels (homepage + 2 levels)
Do's
- always label the the first element 'Home' and link to the homepage of the current site
Don'ts
- do not add the link to European Commission (previous iteration), the redirect now happens from the EC logo
When to use
- when you site is 2 or more levels deep
When not to use
- do not use on one-page sites
- do not use when your site only has childless parent pages (as indicator of the current page is displayed in the horizontal menu)