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.
What is breadcrumb navigation?
Breadcrumbs are a navigational aid that allows users to keep track of their current location on a website or interface. A breadcrumb trail displays the page a user is currently on and its relation to the pages they visited before it, or the hierarchy of higher level parent pages above the current page. Breadcrumb navigation provides the user with ability to quickly navigate back to their starting point or earlier pages from their visit.
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.
4. Progress from highest level to lowest.
5. Keep your breadcrumb titles consistent with your page titles.
6. Get creative with design.
7. Keep it clean and uncluttered.
8. Consider which type of breadcrumb navigation makes the most sense for your site.
9. Know your audience.
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.
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