endeRH-Webdesign | Shopware Freelancer

What is breadcrumb?

Breadcrumb is a certain type of navigation on a website, which helps the user to find his way back to the initial page or to other orders or levels of the page. This makes it easy for the user to jump to previously visited hierarchical levels.

  • Is a secondary navigation
  • The users path becomes traceable
  • Is usually placed inconspicuously
  • Has great advantages for usability

Functionality of breadcrumb navigation

In English, the name of this navigation pattern means breadcrumbs, and similar to the Grimm fairy tale “Hansel and Gretel”, the user can find his way back or jump back and forth. The user can quickly see which subpages he has already visited from the page hierarchical structure. This is why it is of such great importance for usability. For the same reasons, this type of navigation could also be called “Ariadnes path”. The breadcrumb navigation shows the logical path and can be integrated into the website without much effort (low hanging fruit). Often it is placed as a design element by the webmaster at the top of the page, and this usually in a rather subtle way. The separators can be represented for example by arrows or similar typographic characters. With a simple click, the user can then access either the main page or other levels. However, the last point in the navigation is not clickable. The breadcrumbs are usually placed above the fold on a page. Because the main navigation should not be pushed into the background, the breadcrumb navigation is always discreet in terms of font size and colour. Consistency is equally important. If breadcrumb navigation is used, this should also be done on all subpages. Breadcrumb is used mainly for quite large pages, for example in online shops. Such complex portals have a complicated hierarchical structure, so this (additional) type of navigation is very common. The user is helped to find his way through the big jumble of categories and products.

The advantages of breadcrumb navigation

As long as the website has a logical hierarchy, one can only advise to use the breadcrumbs, because the inherent logic is a great advantage for the users. Breadcrumb navigations have, as already mentioned, especially great advantages for the usability of pages. They allow the visitor to navigate to the top of the page hierarchy with a single click. The breadcrumbs also show the users their current position in relation to the other hierarchical levels of the page. So they are a real help for application and navigation. If a visitor lands in the middle of the information architecture via a search engine, breadcrumbs help quickly and effectively. The breadcrumb navigation aid also takes up very little space on the website and is usually very easy to implement. Users almost always recognise the functionality quickly and without problems, as extensive tests have shown. For search engine optimization it is important to implement the breadcrumb navigation correctly. A good approach is to create a sitemap first. Then it is checked whether the breadcrumb navigation would help the visitor. If the page structure consists of many levels, this can also be seen in the sitemap. Then the breadcrumb navigation can be built up in the same way, as it also reflects the page architecture. However, the breadcrumb navigation – usually placed horizontally at the top of the page – should always remain a secondary help, which does not replace menus or other main navigation. This is why it is so important that primary and secondary navigations remain separate in terms of design and layout. The breadcrumbs can be integrated in different ways (plug-in, PHP and JavaScript, content management system, HTML).

Online Shop planned?
High-performance and visually appealing online stores are my daily business as a Shopware freelancer.
Learn more