Breadcrumb: 7 tips

A breadcrumb or crumb trail shows you where you are on a website. It shows the site’s hierarchy, from the homepage to the current page.

If you take these 7 tips into account, your breadcrumb will be a very practical addition to the navigation.

1. Between page title and top

Put the breadcrumb above the page title, but below the top navigation or graphical top of your website.

2. Start with ‘Home’

Start the breadcrumb with ‘Home’. Breadcrumbs used to start with ‘You are here:’. During user tests we have noticed this is no longer necessary. Even people who have never heard of the word breadcrumb know what it’s for.

3. Left align

Align the breadcrumb to the left. That way, the first part of the breadcrumb (‘Home’) is in the top left part of the website, where people expect to find the link to the homepage.

4. Greater-than sign

Use a greater-than sign to separate the crumb trail’s various parts. The greater-than sign is best suited to indicate the hierarchical relationship between the various parts. 

5. Smaller font size

Use a slightly smaller font size for the breadcrumb than you do for the rest of the text on your site. Verdana 8 points is perfect.

6. Clickability

Every part of the crumb trail has to be clickable, except the current page. Obviously, you need to follow the general rules of clickability.

7. No breadcrumb on the homepage

Don’t put a breadcrumb on the homepage. Other elements (colour indication in the navigation, content, lay-out, etc) should make clear that it’s the homepage.