Breadcrumb

Why and how to use this component

Users need a way to see a page's location in the site hierarchy. They also need a way to navigate to higher levels in the site architecture.

The breadcrumb - included on every page except the homepage itself - provides the user with a 'sense of place' and a relationship to the site's hierarchy and structure. This is particularly useful for a user who has arrived at a page directly through a link, bookmark/favourite or a search engine

General

• breadcrumbs start on the highest level of the site with the label "Home" to reduce the length of the breadcrumb
• short titles can be used to create a shorter version of the title which will be displayed only in the breadcrumb and not in the headline
• the links in the breadcrumb must point to pages in the same language as the current page
• clicking an item in the breadcrumb directs the user to that level in the hierarchy above the current page
• the title of the current page is displayed on the last element of the breadcrumb
• the last element of the breadcrumb will have a slightly different style to indicate users that it's not a clickable element
• labels should provide continuity to the website. This is done by ensuring each tab label is styled the same
• each label is parted with a separating character
• the separating characters and the spaces between the links and the labels are not linked

When to use this component

• breadcrumbs are required and should appear in the page header on every page of the site (except on the homepage of European Commission's political and information sites)

Do not use this component

• if there is no second level to show