A type of secondary navigation scheme that reveals the user’s location in a website or Web application.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

When to use

  • To show users where they are in your overall structure.
  • To offer a way to go up the hierarchy back to the start.


Anatomy of breadcrumb

1. Active state: Indicates all the links which can be clicked onto and in timeline.

2. Slash: For showing a visual differentiation between 2 links/pages in a series.

3. Current state: Shows the name of the page/link the user is on currently.

Best Practices

  1. Not be too large - The breadcrumb trail is a secondary navigation aid and hence its size and prominence should be less than that of the primary navigation.
  2. Start with the homepage and end with the current page.
  3. Have a simple, one-character separator between each level
  4. Not be used if all the pages are on the same level. Breadcrumbs are intended to show hierarchy.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.