Breadcrumb It is a secondary navigation within a web (also called breadcrumb navigation). Breadcrumbs offers web users the option, in the form of internal links, to quickly return to the home page or to another level of the web. Thanks to breadcrumb navigation, the user can reconstruct which pages they have previously visited. This secondary navigation is usually built hierarchically according to the web and shows the logical path from the main page to the current position. A breadcrumb navigation can be found regularly at the top of a web portal, and it is usually not very noticeable as a design element.
Background
The term derives from the fairy tale "Hansel and Gretel" by the Brothers Grimm. In the fairy tale, two children used breadcrumbs to find their way home. Breadcrumbs, as applied to the Internet, offer users the opportunity to find their way back to the home page. Breadcrumb navigation tracks your previous pages. This navigation is hierarchically structured and shows the path from the home page to the current location in the page tree.
File: 600 × 400-Breadcump-en-01.png
Graphical representation of the breadcrumb
The labels will be displayed by means of arrows, other typographic or graphic symbols and buttons. With one click, the user ends up on the main page or the main page of the wiki. In this way, the last point of the navigation cannot be clicked. Breadcrumbs are constantly displayed in an area of a web titled "above the fold"; however, they are fairly unobtrusive in font and color so that the main navigation is still noticeable. Consistency is also relevant: if a secondary navigation is used, it should be available on all pages and subpages.
Types of breadcrumb
Strictly speaking, breadcrumbs must be differentiated from the click path, because click paths can be distinguished by jumps to different hierarchical levels, surely circular and not logically necessary. However, the data for breadcrumb production often comes from the click path that the user has followed. Depending on the variation of the breadcrumb, the navigation with a click path is identical or relative to other items and levels of a website.
In this way, navigation with breadcrumbs can be differentiated according to the relative level of the web portal or the click path the user is on.
- Click Path: Consists of a route-based navigation that traces the actual click path and displays the current position. With long routes and webs with a deep structure, variation is less possible. Fundamentally, the user can perform the same function with the forward and back buttons of the browser. The implementation of the data is dependent on the data from the click path analysis, and under certain circumstances a path-based navigation can be very lengthy.
- Location- A location-based breadcrumb refers to the user's current position in the web hierarchy. Websites with more than 2 sublevels often implement this variation in order to quickly reach the parent items in the page tree.
- Categories (attribute): Attribute-based breadcrumbs allow the user to see to which category the currently visited page belongs and to which attribute this page can be attributed. These navigation systems will generally be used by e-commerce websites and online stores at the product level, and with search and offered in conjunction with search and personalization functions. In this way, the implementation is more complex, since the breadcrumb has to adapt to the functions of the webs, and surely also to the database.
Apps
Navigation with breadcrumb is mainly used for very large websites and portals that have a complex hierarchical structure. You will come across breadcrumb navigation options in online stores many times as well, since they help users find their way through the large category and selection of products. If a web portal does not have a logical hierarchy, breadcrumb navigation is not recommended. One way to do this is to build the breadcrumb structure as a sitemap, which generally reflects the architecture of the web.
It is important to highlight creating a sitemap and then checking if a navigation with breadcrumb would help. In case the page structure includes many levels, this should be visible in the sitemap. In summary, the breadcrumb can be built like the sitemap, since they reflect the architecture of the page. The next rule is essential: breadcrumb navigation It is a secondary aid that does not replace either the menu or the navigation. In this way, primary and secondary navigation must be separated, including in terms of layout and design.
Implementation of Breadcrumbs on a website
Breadcrumbs can be integrated in many ways:
- Plug in: Depending on the CMS (eg wordpress), different plug-ins are possible for breadcrumbs. The add-on program allows you to make changes and integrate secondary navigation. Structured data or microdata support is optional, since breadcrumbs can be read by search engines and displayed in SERPs.
- PHP and JavaScript: alternatively, code items from different programming and scripting languages can be integrated into the source code. For example, a function can be defined in PHP and later retrieved in the document. This happens in a similar way with JavaScript, even though dynamically generated webs also receive a breadcrumb.
- Content management system- Some CMS and store systems also offer breadcrumbs as an option on the backend. Implementation is usually easy and achievable with just a few clicks.
- HTML: manual variation is based on links that can be summarized in a relative path pointing to previously visited sides. The design is formed by means of CSS and must be consistent.
Breadcrumbs have the following advantages for usability on the web:
- They show users the current position relative to other hierarchical levels of a website. With this, the breadcrumbs is a support for use and navigation.
- They allow you to navigate through the page hierarchy with a single click. If the user arrives through Google-Search or deep links in the middle of the information architecture, breadcrumbs are a quick and easy navigation aid.
- Breadcrumbs do not take up much space on a website and are relatively easy to implement.
- According to usability expert Jakob Nielsen, they never cause problems with user testing. Users know what this secondary navigation is and how they can use breadcrumbs.
Importance for SEO
Based on numerous usability tests, breadcrumb navigation is believed to greatly help users navigate. In this way, from a usability point of view, breadcrumbs are indispensable. From an SEO and OnPage optimization perspective it is essential to implement breadcrumb correctly. For some time now Google's SERPs have partially displayed breadcrumb navigation in the URL line as rich snippets. It is recommended to tag the navigation with breadcrumbs in the source code using microdata (more information can be found in the google helpdesk).
In a broader sense, breadcrumbs help search engines crawl and summarize websites. Through navigation, will strengthen the internal relationship and the thematically adjusted URLs will be linked via the navigation element. In this way, through breadcrumb navigation, directories deeper in the page hierarchy can be reached and crawled more quickly.
Web Links
