On large websites and websites with hierarchically arranged pages, breadcrumbs are a really great way for users to navigate around the web site. They are a type of secondary navigation scheme which indicates the exact location of a user on a website. They greatly improve the findability of a web site’s sections and pages.
Breadcrumbs, in the simplest form, are horizontally arranged text links separated by a greater than symbol (>). Using breadcrumbs on your website can be really beneficial. It provides a convenient way for users to navigate around the website and also allows users to establish their location on the website.
It provides an alternate way for users to navigate the website. For first-time visitors breadcrumbs can be a great way to entice them in exploring the website. Hence, it can be really effective in reducing the overall bounce rate of the website.
Different websites use different stylized breadcrumbs that blend in well with their site theme. Below is a showcase of websites with some of the best designed breadcrumbs.
1. Apple Store
The Glasgow Collective has made use of stylish colorful breadcrumbs shaped in the form of a hexagon.
Nestle has used simple and neat breadcrumbs that blends in well with the theme of the website. The breadcrumbs are arranged in the form of horizontal text links separated by a greater than symbol (>).
Delicious has presented their breadcrumb trail of keyword tags in a simple and interactive way. The ‘x’ button besides the keyword tags lets you delete items in the breadcrumb trail in order to help you find your bookmarks easily.
Crooked Tongues has made use of the standard attribute-based breadcrumb trail with a right-pointing triangle replacing the classic greater than symbol (>).
This website too has made use of the classic breadcrumb trail in which the greater than symbol (>) is replaced by a forward slash (/).
10. Yahoo! TV
NASA has made use of the simple, classic breadcrumb trail consisting of horizontal text links separated by a greater than symbol (>). The color scheme of the breadcrumbs blends in well with the entire entire.
Wufoo has made use of the simple text-based breadcrumbs in their own creative way. The breadcrumbs have been integrated with the site’s logo and the classic greater than symbol (>) have been replaced with a right-pointing arrow.
The Girl Scouts website have breadcrumbs that are well designed to provide an easy navigation around the website. The breadcrumbs displays various categories and sub-categories of the website. Breadcrumbs are used as a primary navigation on the Girl Scouts website.
Brige55.com uses the classic text-based breadcrumbs that indicates the user’s current location on the website as well as provides an easy way to go back and find similar products.
This website has made use of interactive breadcrumbs with drop-down menus that display the various categories, sub-categories and pages of the website providing a convenient, user-friendly navigation scheme.
20. MarTique Designs
This technology website uses the classic text-based breadcrumbs in which the greater than symbol (>) is replaced by a right-pointing triangle. The breadcrumbs indicate the user’s current location on the website as well as enables the user to easily navigate between the sub-categories of the website.
Srikanth is a Web Developer & SEO Consultant. Check out his portfolio