TL;DR
- Breadcrumb navigation on websites shows you a clear path of where you are.
- It helps you easily go back to previous pages or explore related topics.
- This type of navigation makes websites easier to use for everyone, especially those with memory challenges.
- Using breadcrumbs is a smart way to meet accessibility guidelines for websites.
Ever felt lost on a website, unsure how you got to a certain page or how to get back to a previous section? Breadcrumb navigation on websites acts like a digital trail of Hansel and Gretel’s breadcrumbs, showing you exactly where you are and making it simple to find your way. It’s a small feature that makes a big difference in how easy and enjoyable a website is to use.
What Exactly is Breadcrumb Navigation?
Think of breadcrumb navigation on websites as a secondary navigation system. It typically appears as a horizontal line of links, often near the top of a page, below the main navigation bar. These links show the path you’ve taken to reach the current page, or the page’s position within the website’s structure.
There are two main types of breadcrumbs:
- Hierarchical (or Location-based) Breadcrumbs: These are the most common. They show you where the current page sits within the website’s overall structure. For example:
Home > Women's Clothing > Jackets > Blazers > Current Blazer Product. Each part of that trail is a clickable link. - Historical (or Path-based) Breadcrumbs: These show the actual path you, as an individual user, have clicked through to arrive at the current page. While less common for primary navigation, they can be useful in certain contexts, like after a complex filtering process.
For most websites, hierarchical breadcrumb navigation on websites provides the most consistent and clear benefit to users.
Keeping You Focused and Aware
One of the biggest advantages of breadcrumb navigation on websites is its ability to help you maintain focus. By clearly displaying your current location, you always understand where you are in the grand scheme of the site. You’re not left wondering, “How deep am I in this section?”
This isn’t just about knowing your current spot; it’s also about seeing the “content around you.” Imagine you’re looking at a specific blazer on an online clothing store. The breadcrumbs might look like: Home > Women's > Outerwear > Blazers > [Specific Blazer Name].
From here, you can easily:
- Click on “Blazers” to see other blazers.
- Click on “Outerwear” to explore other types of jackets or coats.
- Click on “Women’s” to browse all women’s clothing.
- Click “Home” to go right back to the start.
This is much quicker and more intuitive than repeatedly hitting the “back” button or having to navigate all the way back to the main menu to explore related categories.
Meeting Accessibility Standards: Multiple Ways to Navigate
Web Content Accessibility Guidelines (WCAG) are crucial for making the web usable for everyone, including people with disabilities. Guideline 2.4.5, “Multiple Ways,” states that users should have more than one way to locate a webpage within a set of web pages. Breadcrumb navigation on websites directly helps meet this requirement.
Without breadcrumbs, users often have to make what are called “scope jumps.” This means if they want to explore a slightly different but related area of the site, their only option might be to go all the way back to the main menu and start their navigation journey again. This can be frustrating and time-consuming. Breadcrumbs offer a more direct, contextual path.
Discovering Related Content Easily
Hierarchy-based breadcrumb navigation on websites can be a surprisingly effective tool for content discovery, especially on sites with a lot of information, like blogs or extensive FAQ sections.
For example, if a blog post is tagged with categories like “Web Design,” “User Experience,” and “Accessibility,” these tags can form part of the breadcrumb trail. A user reading an article about accessibility might see a breadcrumb like Home > Blog > Accessibility > [Article Title]. They can then easily click on “Accessibility” to find all other articles on that topic, or even “Blog” to see the latest posts. Similarly, FAQs can be organised by topic, and breadcrumbs can help users browse related questions and answers without starting their search from scratch.
A Big Help for Impaired Working Memory
For individuals with impaired working memory, navigating complex websites can be particularly challenging. Keeping track of the navigation path and current location requires cognitive effort. Breadcrumbs significantly reduce this cognitive load.
By providing a constant, visible trail, breadcrumb navigation on websites acts as an external memory aid. Users don’t have to remember how they got to a page; the path is laid out for them. This makes the website feel more manageable and less overwhelming.
Make Your Links Clear and Descriptive
When implementing breadcrumb navigation, it’s vital that the links themselves are descriptive. Each link in the breadcrumb trail should clearly indicate what content the user will find if they click on it. Vague or misleading link text defeats the purpose.
For instance, instead of a breadcrumb like Home > Section 1 > Sub-section A > Page, use clear labels like Home > Services > Web Design > Our Process. This ensures users can confidently navigate, knowing where each link will take them. This clarity benefits all users but is particularly important for those relying on screen readers or those who scan pages quickly.
In conclusion, incorporating breadcrumb navigation on websites is a simple yet powerful web design choice. It enhances usability, aids accessibility, and provides a smoother, more intuitive journey for your visitors. By helping users understand their location, explore related content, and navigate with ease, breadcrumbs contribute significantly to a positive user experience.
Do you need help making your website more accessible? We provide a website accessibility audit for £150, find out more about our accessibility audit here.