How to Enhance Your Website Using Breadcrumbs – Showcase

Posted in Web Design • Posted on 10 Comments

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 Apple Store has made use of breadcrumbs in a really creative way. The breadcrumbs are designed in the form of stylized buttons that fits in well with entire site’s theme. Apple Store

2. The Glasgow Collective

The Glasgow Collective has made use of stylish colorful breadcrumbs shaped in the form of a hexagon. The Glasgow Collective

3. Nestle

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 (>).

Nestle

4. Delicious

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. Delicious

5. Crooked Tongues

Crooked Tongues has made use of the standard attribute-based breadcrumb trail with a right-pointing triangle replacing the classic greater than symbol (>). Crooked Tongues

6. Ideo

Ideo has presented the breadcrumb trail in a really innovative way. The breadcrumb trail consists of square shaped colorful buttons whose color becomes darker as the breadcrumb advances. Ideo

7. Mia & Maggie

This website too has made use of the classic breadcrumb trail in which the greater than symbol (>) is replaced by a forward slash (/). Mia & Maggie

8. guardian.co.uk

guardian.co.uk has made use of simple & colorful hexagon shaped breadcrumbs that matches pretty well the multi-colored theme of the website. guardin.co.uk

9. Coolspotters

Coolspotters uses simple button-like breadcrumb trail that matches well with the website template and also provides an easy way to navigate between the sub-categories of the website. Coolspotters

10. Yahoo! TV

Yahoo! has made use of interactive button-like breadcrumbs on their Yahoo! TV webpage. Clicking on the inverted triangle brings a drop-down menu displaying different categories of the website. Yahoo! TV

11. NASA

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. NASA

12. Design Collectors

The Design Collectors have designed simple and classic text-based breadcrumbs with color scheme that matches well the website’s template. Design Collectors

13. Bell

The Bell shop uses simple text-based breadcrumb trail in which the text links are separated by a right-pointing triangle. Bell

14. Wufoo

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. Wufoo

15. Girl Scouts

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. Girl Scouts

16. Bridge55.com

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. Bridge55.com

17. The Hillside Group

The Hillside Group uses breadcrumbs that are similar to the ones used in the Apple Store website. It has been designed to provide an easy way to navigate around the sub-categories of the website. The Hillside Group

18. Wowhead

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. Wowhead

19. Devlounge

Devlounge uses simple button-like breadcrumb trail that enables users to easily navigate around different categories of the web blog. Devlounge

20. MarTique Designs

MarTique Desings uses the simple, classic text-based breadcrumbs in which the greater than symbol (>) is replaced by a forward slash (/). Martique Designs

21. TechRadar

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. TechRadar

22. BP

This website too uses the classic text-based breadcrumb trail that enables users to easily navigate around the website. The color scheme of the breadcrumb blends in well with the entire website. BP

8 Written ArticlesWebsite

Srikanth is a Web Developer & SEO Consultant. Check out his portfolio

10 Comments Best Comments First
  • Mehdi

    Friday, July 16th, 2010 23:46

    1

    Great article…. love the apple breadcrumb. I’ll surely use it in my website.

    0
  • Guilherme Moreira

    Monday, July 19th, 2010 13:49

    4

    Awesome inspirational article!

    I just loved the Bell’s breadcrumb, it’s modern and ellegant!

    0
  • Josh Kohlbach

    Monday, July 19th, 2010 01:25

    3

    I used to hate breadcrumbs feircly, but this is a really nice showcase. Made me thing about re-introducing them onto some of my sites.

    0
  • Kyle Hogan

    Sunday, July 18th, 2010 17:01

    2

    Good examples of breadcrumbs, but some examples of implementation would be nice too. Thanks.

    0
  • john

    Wednesday, July 21st, 2010 15:58

    5

    Thanks for the tip. It makes me have more knowledge.

    0
  • Bom

    Thursday, August 12th, 2010 12:06

    6

    Nice tips and really good samples. Good job!! :)

    I like the Apple’s one

    0
  • Dinesh

    Thursday, January 5th, 2012 14:00

    10

    Hello, Using breadcrumbs can lead to lose ranking in Google ?

    Without using it we have benefits like when user searches for a query then Google also matches keywords in URL as well i.e. important URL structure that may get disabled due to use of breadcrumbs.. Please reply… Thanks in advance..

    0
  • Vance

    Wednesday, November 16th, 2011 07:11

    9

    Thanks for the nice collection of websites with different style of breadcrumbs. It agree that breadcrumbs are really great in improving the navigation experience of the user. All the better if they are great to look at.

    0
  • Ryan

    Tuesday, March 22nd, 2011 02:32

    8

    Those are some creative variations on the breadcrumb theme. The Wufoo one in particular inspires me to try an experiment, of hanging the entire navigation off a site’s logo.

    0
  • warren

    Monday, February 14th, 2011 17:59

    7

    Breadcrumbs helps to navigate the website without getting lost. This reminds me of hansel and gretel. thank you for sharing.

    0
  • Dinesh

    Thursday, January 5th, 2012 14:00

    10

    Hello, Using breadcrumbs can lead to lose ranking in Google ?

    Without using it we have benefits like when user searches for a query then Google also matches keywords in URL as well i.e. important URL structure that may get disabled due to use of breadcrumbs.. Please reply… Thanks in advance..

    0
  • Vance

    Wednesday, November 16th, 2011 07:11

    9

    Thanks for the nice collection of websites with different style of breadcrumbs. It agree that breadcrumbs are really great in improving the navigation experience of the user. All the better if they are great to look at.

    0
  • Ryan

    Tuesday, March 22nd, 2011 02:32

    8

    Those are some creative variations on the breadcrumb theme. The Wufoo one in particular inspires me to try an experiment, of hanging the entire navigation off a site’s logo.

    0
  • warren

    Monday, February 14th, 2011 17:59

    7

    Breadcrumbs helps to navigate the website without getting lost. This reminds me of hansel and gretel. thank you for sharing.

    0
  • Bom

    Thursday, August 12th, 2010 12:06

    6

    Nice tips and really good samples. Good job!! :)

    I like the Apple’s one

    0
  • john

    Wednesday, July 21st, 2010 15:58

    5

    Thanks for the tip. It makes me have more knowledge.

    0
  • Guilherme Moreira

    Monday, July 19th, 2010 13:49

    4

    Awesome inspirational article!

    I just loved the Bell’s breadcrumb, it’s modern and ellegant!

    0
  • Josh Kohlbach

    Monday, July 19th, 2010 01:25

    3

    I used to hate breadcrumbs feircly, but this is a really nice showcase. Made me thing about re-introducing them onto some of my sites.

    0
  • Kyle Hogan

    Sunday, July 18th, 2010 17:01

    2

    Good examples of breadcrumbs, but some examples of implementation would be nice too. Thanks.

    0
  • Mehdi

    Friday, July 16th, 2010 23:46

    1

    Great article…. love the apple breadcrumb. I’ll surely use it in my website.

    0

Comments are closed.

54.196.119.93 - unknown - unknown - US