Breadcrumbs are a navigation aid that helps website visitors understand their location on a website and how they got there. They are typically displayed horizontally at the top of a webpage, and each level of the hierarchy is separated by a symbol, such as a greater-than sign (>). Breadcrumbs provide a clear path for users to retrace their steps and quickly navigate to previous pages or sections of a website.
TL;DR What is Breadcrumbs (for a website)?
Breadcrumbs are visual aid used on websites to display the user’s location within a website’s hierarchy. They are displayed horizontally at the top of a webpage, providing an easy-to-follow path for users to retrace their steps and navigate to previous pages or sections.
Importance
Breadcrumbs are essential to website navigation and can significantly impact user experience. They make it easier for visitors to understand the structure of a website and find the information they need quickly. In terms of marketing, breadcrumbs can help reduce bounce rates and improve user engagement by guiding visitors to other relevant pages on a website.
Examples/Use Cases
E-commerce websites: Breadcrumbs can display a user’s location within a product hierarchy, making it easier to find similar products or navigate to related categories.
News websites: Breadcrumbs can show the user’s location within a news hierarchy, making it easier to find related articles or navigate to different sections of the website.
Service-based websites: Breadcrumbs can show the user’s location within a service hierarchy, making it easier to find related services or navigate to different areas of the website.
Category
- Website navigation
- User experience design
- Web development
- Information Architecture
Synonyms/Acronyms
Synonyms
- Website breadcrumbs
- Site breadcrumbs
Acronyms
N/a
Key Components/Features
- Hierarchy structure: Breadcrumbs display the hierarchy structure of a website, from the home page to the current page the user is on.
- Separator symbol: Each hierarchy level is separated by a character, such as a greater-than sign (>).
- Clickable links: Each level of the breadcrumb is typically a clickable link that takes the user to the corresponding page.
Related Terms
- Navigation menu
- Sitemap
- User interface design
- User experience (UX)
Tips/Best Practices
- Use clear and concise labels: Breadcrumb labels should be descriptive and easy to understand.
- Display breadcrumbs at the top of the page: Breadcrumbs should be displayed at the top to ensure they are visible to users.
- Use appropriate separator symbols: Choose separator symbols that are clear and easy to distinguish.
- Limit the number of levels: Breadcrumbs should typically only display up to three or four levels of the hierarchy to avoid cluttering the page.
- Make breadcrumbs clickable: Each level of the breadcrumb should be a clickable link to the corresponding page.
Further Reading/Resources
- https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/
- https://vwo.com/blog/why-use-breadcrumbs/
FAQs
What is the purpose of breadcrumbs on a website?
The purpose of breadcrumbs is to provide users with an easy way to navigate back to previous pages or sections of a website. They display the user’s location within the website hierarchy, making it easier to understand the website’s structure and find relevant information.
How can breadcrumbs improve user experience?
Breadcrumbs can improve user experience by making it easier for visitors to navigate a website and quickly find the necessary information. They provide a clear path for users to retrace their steps and help reduce bounce rates by guiding visitors to other relevant pages on a website.
Are breadcrumbs necessary for all websites?
No, breadcrumbs are not necessary for all websites. They are most useful for websites with a hierarchical structure, such as e-commerce or news websites. Websites with a simple design or fewer pages may not benefit from using breadcrumbs.
How should I label my breadcrumbs?
Breadcrumb labels should be clear and concise and accurately describe the page or section of the website they represent. It’s best to use plain language that is easy for users to understand rather than technical or jargon-filled terms.
Can breadcrumbs hurt SEO?
No, breadcrumbs typically do not hurt SEO. They can be beneficial by providing additional links and making it easier for search engines to understand the structure of a website. However, it’s essential to ensure that the use of breadcrumbs does not result in duplicate content or other SEO issues.
