The Unsung Heroes of Navigation: Breadcrumbs
Have you ever found yourself lost on a website, wondering how to get back to where you started? Just like losing your car in a parking lot, users can easily get lost on a website. But fear not, dear users! Website designers have a trusty solution to this navigation problem: breadcrumbs.
What are Breadcrumbs?
Breadcrumbs are a secondary navigation element that helps users get to related content nearby in the hierarchical structure of a website. They’re often overlooked, but they’ve stood the test of time. Think of them as a trail of digital breadcrumbs, leading you back to where you started.
The Three Types of Breadcrumbs
- Location-based breadcrumbs: Show the user’s current location in the website structure.
- Attribute-based breadcrumbs: Show the user an attribute of the current page.
- Path breadcrumbs: Show the user the unique steps they took to get to the current page (though this is considered bad practice and should be avoided).
Why Use Breadcrumbs?
Breadcrumbs are an easy and widely accepted way to aid in wayfinding, save users time, and reduce frustration. They’re especially useful for large or complex hierarchy sites, as they show users where they are without adding noise or complication to each page.
When to Use Breadcrumbs
Use breadcrumbs when:
- Your site has multiple page levels.
- Your site has complex hierarchies.
- You want to help users navigate through related content.
Best Practices for Breadcrumbs
- Keep breadcrumbs simple and consistent.
- Use clear and concise language.
- Avoid using breadcrumbs for forms or sessions history.
- Don’t overcrowd breadcrumbs with too many links.
- Use arrows or forward slashes to separate links.
Mobile Breadcrumbs
On mobile devices, breadcrumbs can take up valuable screen space. To solve this, use only one breadcrumb or one line of breadcrumbs. This will help users navigate without overwhelming them with too much information.
Simple HTML for Breadcrumbs
Breadcrumbs are just nested links and text, often organized in a list using HTML/CSS. Keep it simple and easy to read.
Styling Breadcrumbs
When styling breadcrumbs, consider the following:
- What color are past links?
- What color are clicked links?
- Is the current page a link?
- Is there a hover state?
- How do we separate each link?
Conclusion
Breadcrumbs may seem like a small detail, but they’re a crucial element in website navigation.