Have you ever lost your phone, keys, or wallet? If so, you’ve probably been advised to retrace your steps. Breadcrumb navigation helps visitors to your site do just that, but instead of searching the kitchen, bathroom, and front door area only to find their keys in the refrigerator, breadcrumb navigation shows users their current location and the steps taken to get there.
Types of Breadcrumb Navigation
Location or Hierarchy Based Breadcrumbs
Path or History Based Breadcrumbs
Attribute Based Breadcrumbs
Breadcrumb Navigation Tips and Examples
1. Only use breadcrumb navigation if it makes sense for your site’s structure.
2. Don’t make your breadcrumb navigation too large.
3. Include the full navigational path in your breadcrumb navigation.
Elon is smart to include the full navigational path, including “Home” and “Admissions” in the breadcrumb navigation.
4. Progress from highest level to lowest.
A study by Nielsen Norman Group found users spend 80% of their time viewing the left half of a page and 20% viewing the right half, making a strong case for left-to-right design. Plus, the link closest to the left will appear as the beginning of the chain, so you want it to be your highest-level page.
5. Keep your breadcrumb titles consistent with your page titles.
Sony effectively labels its breadcrumb titles to match the page titles. “Environment, CSR, and Quality,” for instance, reads the same in the breadcrumb navigation as it does on the page.
6. Get creative with design.
Hoka uses a “/” to separate the items in their breadcrumb navigation. In this case, the subtle design variation makes sense for their site and brand aesthetic.
7. Keep it clean and uncluttered.
8. Consider which type of breadcrumb navigation makes the most sense for your site.
Verishop uses attribute based breadcrumbs to display the users selections as they narrow down their towel search by brand and color, for example.
9. Know your audience.
Apple, one of the
most valuable companies of all time, defies this logic by putting their breadcrumb navigation in the footer, at the bottom of the site. Ultimately, it’s critical you know your audience. Apple’s customers are typically tech-savvy, and would likely find the navigation if they needed it. Consider your customers’ needs, and implement A/B testing if you’re unsure.
Breadcrumb Navigation in HTML and CSS
Here’s an HTML template for breadcrumbs that you can use:
Notice how I’ve also enclosed the unordered list in an HTML <nav> (navigation) element, and added a class and an ARIA label to its opening tag. This is optional, but helps make your page more accessible to screen readers and search engines.
the code at the bottom of the CSS tab.
Breadcrumb Navigation in Bootstrap CSS
Bootstrap CSS also offers a way to create breadcrumbs without needing to add custom CSS. To do this, use the Breadcrumb component like so. Here’s an example from the Bootstrap 5 documentation:
This is just the basics of breadcrumb navigation in Bootstrap — see the Bootstrap breadcrumb documentation to learn all the details.
Design to Help Users Navigate Your Site
Ultimate Guide to UX Design.