Use Breadcrumb Navigation

Breadcrumb navigation is not the sexiest of UI components, but it’s a long-standing, tried-and-tested control that your users will turn to again and again. An example of breadcrumb navigation is as follows:

Home > Products > Apparel > Hoodies

Websites and apps on the desktop and tablet (and often mobile) can fit a small and unobtrusive breadcrumb into their UI with ease. They are commonly well understood by users in testing and real-world use.

The breadcrumb allows your user to see their position in the system and easily return to a previous level of the hierarchy. What’s more, by displaying the path the user took to get to their current location, breadcrumb navigation helps the user to form a better mental model of the layout of the product.

Increasingly, in the world of single-page JavaScript apps, we’re seeing breadcrumbs overlooked in the design phase, perhaps because they’re seen as boring (they’...