Breadcrumbs


min read

Improve your navigation, make for better orientation and enhance the user experience with breadcrumbs.

Iubenda uses breadcrumbs within the account section clearly guiding users where they're now and how they got here.

How you can use this design pattern

  1. Start the breadcrumb with a hyperlink back to your dashboard.
  2. Use breadcrumbs to display current location. The locate should be relevant to the products hierarchy.
  3. Reduce breadcrumbs for mobile. Instead of showing the complete trial.
  4. Use recognisable symbols for separators. These include the greater than symbol, right arrow and slashes.
  5. Make sure your breadcrumb is located in a familiar place. This allows users to make better use of them.

Common mistakes you should avoid

  • Use a breadcrumb as a replacement for the primary navigation.
  • Making the last item (current screen) a hyperlink. This is not necessary.
  • Making the breadcrumb the focal point of the design. Avoid using fancy fonts or styling.
Research by Nielsen Norman Group showed that there are multiple benefits of using breadcrumbs while very few drawbacks.

About Simon McCade

I can help you turn more trial users into paying customers through better UX design.
Learn more

Other Design Patterns