Contents
How to create a Breadcrumb Navigation ?
- Step 1: Create an HTML list of the navigation links.
- Step 2: Set the CSS display: inline in order to show the list in the same line.
- Step 3: Add a separator after every list element.
- Example:
- Output:
- Step 1: We simply add aria-label=”breadcrumb” to the nav element.
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner.
Where do you find breadcrumb navigation on a website?
Breadcrumb navigation is a feature usually located at the top of the webpage and tells the user exactly what pages they’ve been on and how they have ended up where they are. For example, let’s say you visited a website specializing in cloud-based communication software.
What does the attribute breadcrumb mean on a website?
The attribute breadcrumb, as the name suggests, describes each level of breadcrumb navigation category. It does not show you your location on the site but shows meta information about each page. Accessing this kind of a breadcrumb navigation does not necessarily take you back on the path you came from within the site navigation.
Hierarchy-based breadcrumbs enable users to easily navigate to a product’s category to find related products. Here a test subject isn’t 100% sure about the jacket, so she easily navigated to the “Jackets & Coats” category she came from using the hierarchy-based breadcrumb links at H&M’s product page.
During testing the most common usage of breadcrumbs was as a way to return to the category the test subject just came from – much like using the browser’s “Back” button, only this is part of the webpage’s interface.