A bread crumb menu, sometimes referred to as breadcrumb navigation, is a type of secondary navigation system used on websites and in software applications. It provides links back to each previous page the user navigated through to get to the current page, showing the user’s location within the site or application. For example, if a user is several levels deep into a website, the breadcrumb menu will show Home > Category > Subcategory > Current Page, allowing the user to easily navigate back up the path. Breadcrumb menus are an important tool for usability and navigation.
What is the purpose of bread crumb menus?
Breadcrumb menus serve several key purposes:
Show hierarchy and location
As mentioned above, a key function is showing users where they are within the larger site hierarchy and structure. It provides contextual information about how the current page fits into the overall navigation scheme. This helps orient users and prevents them from feeling “lost” deep in a website.
Facilitate navigation
By showing the navigation path, breadcrumb menus allow users to quickly move back up to higher-level pages. This is especially useful on deep pages many levels into a site. A user doesn’t have to hit the Back button multiple times, they can simply click on a higher-level page in the breadcrumb trail.
SEO
Breadcrumb menus can also help with search engine optimization (SEO). They provide semantic information about page structure and hierarchy through the descriptive text links. This can aid search engines in understanding the organization of a site.
When should you use breadcrumb menus?
Here are some key instances when breadcrumb menus are useful on websites and apps:
Deep navigation hierarchies
Breadcrumb menus are particularly helpful on sites with complex, multi-level navigation schemes. For example, ecommerce sites with categories and subcategories several layers deep benefit greatly from breadcrumb trails.
Long web pages
For very long pages with extensive scrolling, breadcrumb menus anchored at the top provide an easy way for users to jump back up the page hierarchy without excessive scrolling.
Search Results Pages
On search results pages that pull in content from across an entire website, breadcrumb trails are useful to show the original context and location of each result.
Mobile Apps
Mobile apps with multi-screen flows can effectively use breadcrumb navigation at the top of the screen to orient users.
Best practices for breadcrumb menus
Here are some best practices to follow when implementing breadcrumb menus:
Place at top of screen
Breadcrumb menus are typically most usable at the very top of the page, before the main content. This allows users to quickly identify their location. Placing breadcrumbs further down risks them being overlooked.
Use > separators
The convention for breadcrumb menus is to use > symbols between each page in the trail. The separators visually differentiate each level. For example:
Home > Category > Subcategory
Link levels back to original pages
Each page name in the breadcrumb trail should be clickable, linking back to the original page. This enables quick navigation. Don’t use plain text for breadcrumb levels.
Avoid truncating
If possible, avoid truncating or shortening page names in the breadcrumbs. The full page name provides more context for users. If space is limited, truncate beginning with the first page name, not the last.
Show current page last
The end of the breadcrumb trail should visually indicate the current page. This is typically done by not making the last page a link, and sometimes bolding it.
Only include logical navigation levels
Breadcrumb menus should not include every single link level. Only key logical navigational hierarchies that orient users should be included. Too many granular levels overloads users.
| Good Practice | Bad Practice |
|---|---|
| Home > Products > Laptops > Dell Laptops > XPS 15 | Home > Products > Electronics > Computers > Laptops > Dell > Dell Laptops > XPS Laptops > XPS 15 Laptop |
When not to use breadcrumb menus
While breadcrumb menus are very useful in many cases, there are some instances where they may not be necessary or could create clutter:
Very simple/flat sites
If a website only has a single page hierarchy level, breadcrumbs likely don’t add much value. For example, a very simple marketing site with just a few top-level pages doesn’t need breadcrumbs.
Minimal browser navigation
On web apps where users primarily navigate by interacting with the app itself, rather than browser navigation, persistent breadcrumbs may be overkill. Dynamic breadcrumbs that appear on hover/click may be more appropriate.
Short content pages
For very short pages with minimal scrolling, the persistent visual presence of breadcrumbs may not be warranted. Again, conditional breadcrumbs on hover/click may be suitable.
Highly visual pages
On highly visual pages like image galleries or store product pages, persistent breadcrumb trails can sometimes create clutter or distract from the core content. Tucking them out of the way until hovered over can prevent this.
Examples of breadcrumb menu implementations
To illustrate real-world examples, here are screenshots showing how some popular sites implement breadcrumb menus:
Amazon
Amazon utilizes breadcrumb menus extensively across their site, given the deep hierarchy of their product categories. The breadcrumbs appear prominently at the top of each product page.
YouTube
YouTube uses breadcrumbs on video pages to show video location within channel hierarchies. On channel pages themselves, they menu shows higher channel levels.
Wikipedia
Wikipedia shows a breadcrumb trail on article pages to display the navigational hierarchy from Main Page to Categories to Article. This provides contextual back navigation.
LinkedIn’s breadcrumbs on profile pages indicate the path back to main profile overview from specific profile sections like Activity or Experience.
Conclusion
Breadcrumb menus are a versatile web navigation convention that every UX designer should have in their toolkit. When used properly, they provide multiple user experience benefits:
- Display site hierarchy and help orient users
- Enable quick backwards navigation
- Aid with search engine optimization
Key best practices include placing them prominently, linking levels back to original pages, maintaining logical hierarchies, and indicating the current page. Breadcrumbs improve navigation and enhance usability, especially on complex, content-heavy sites. Just take care not to overuse them when simplistic site architecture obviates the need.