Breadcrumb
What are breadcrumbs?
A breadcrumb, or breadcrumb trail, is a secondary website navigation scheme that displays the location of a page in relation to the rest of the site or web application. Similar but more complex than a status bar, this higher-level of specification allows users to understand and explore a webpage, and makes it possible for them to easily navigate through the different related pages and levels.
Breadcrumb trails are most commonly presented across the top of a page as a series of horizontal links separated by the “greater than” (>) symbol. In certain cases, this sign may be replaced by a small arrow or a slash in order to keep in line with the site’s visual language. Furthermore, when displayed on mobile devices with smaller screens, breadcrumb trails often show only the page immediately before the current one.
Main types of breadcrumbs in web design
1. Location-based
Location-based breadcrumbs show the hierarchical relation between the page currently viewed by the user and those at a higher level. This is the most popular type of breadcrumb navigation, and is most commonly seen in online stores with several categories, subcategories and product pages linked from their homepage.
2. Attribute-based
Attribute-based breadcrumbs present the different attributes users select on a page. Also known as history-based breadcrumb trails, these are almost exclusively seen in eCommerce websites with filtering capabilities.
3. Path-based
Path-based breadcrumbs display the different pages users clicked on in chronological order, allowing them to easily go back to one of the previous pages they visited. The most often-used application of path-based breadcrumb trails is the “Back to results” link.
You may also be interested in:
Benefits of using breadcrumbs
Improved user experience: The main purpose of breadcrumb trails is to offer an alternative way of navigating multi-level websites and provide them with better access to the different categories.
Reduced bounce rate: Encouraging web visitors to browse through related pages or effortlessly go back to their starting point makes them less likely to exit the site.
Structured internal linking: Categorizing a site hierarchically makes it easier to connect webpages to higher-level pages immediately above them and ensure the entire platform follows the same internal strategy.
Optimize SEO crawling: Search engines use breadcrumbs to crawl sites and categorize its content. By providing them with a breadcrumb trail to follow, your site can be indexed faster and thus might be more likely to rank higher on the search results.
Enhanced SERP presence: In 2015, Google replaced the URL on its site results with the site name and breadcrumb trail of the page. Since then, defining a breadcrumb trail for your site gives you more control over how your website or web application is perceived by potential visitors and offers the opportunity to further optimize your SERP presence.