Balsamiq

Toggle navigation

Breadcrumb Guidelines

Breadcrumbs are a secondary form of navigation that allows users to navigate a hierarchically structured website.

Applies to:
Breadcrumbs

Use breadcrumbs for hierarchical navigation

Breadcrumbs are a chain of links used on websites with hierarchical navigation.

To create successful hierarchical navigation, pages should only have one parent category. If more categories are needed, use tags instead.

Because breadcrumbs use page names as part of their structure, it’s recommended to keep parent page names as specific and short as possible.


Best practices

There are a few best practices when it comes to breadcrumbs.

While it can be tempting to show the user’s previous steps in a breadcrumb, this is not the best practice. Breadcrumbs should show website hierarchy.

Breadcrumbs are only a secondary form of navigation and should never be the only navigation method available to users. Make sure you have a menu bar or other primary navigation method to allow users to navigate more freely.

Navigation, regardless of the type, is usually expected to sit above the content. The main navigation is always at the very top, followed by breadcrumbs. This allows users to orientate themselves as they move throughout the website.

Consider condensing breadcrumbs when they get too long.

When your breadcrumbs get too long for their allocated space, consider condensing them by using an ellipsis (...).

Breadcrumbs should show the current page, even if the title is repeated elsewhere on the page, as this helps users orientate themselves. Something to note is that the current page shouldn’t be a link.

To avoid users getting confused about where the start and end of a link is, always separate them with a special character. The most common are the greater than symbol (>) and the forward slash (/).


Variations

Try making your own breadcrumb variations in Balsamiq.

DIY symbols

You can make your own custom breadcrumb symbols in Balsamiq.

Condensed breadcrumb: The condensed breadcrumb can be used when your breadcrumb gets too long.

DIY breadcrumbs: You can create your own breadcrumb using a label component.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.