How to make a breadcrumb using bootstrap

What is a breadcrumb?

A breadcrumb is a visual component that displays the current page's location within a hierarchical structure. For example:

BootstrapA CSS framework for building responsive websites provides us with a breadcrumb component. This component implements CSS to automatically add the separator ( / ) between the breadcrumb items.

Syntax

We implement the breadcrumb as an ordered list using the <ol> tag within a <nav> tag. The generalized syntax is as follows:

The ordered list element uses the breadcrumb class, while each item in the list uses the breadcrumb-item class. Each list item also contains a hyperlink to its respective web page.

For the final item in the breadcrumb, we use the active class in addition to the breadcrumb-item class. We don't create a hyperlink for the last item as the user is already on the concerned page. The active class differentiates the styling for this item, making the current page easily identifiable.

Example

Explanation

• Line 4: We'll use a content delivery network (CDN)A network of servers from where users can access resources like CSS files to load the bootstrap styles.
• Line 7: We create a <nav> tag to contain the breadcrumb. The aria-label is set to "breadcrumb" to let assistive technologies, like screen readers. Please know that the web page will display a breadcrumb.
• Line 8: We make an ordered list using the <ol> tag. We use the breadcrumb class provided by bootstrap, which provides the necessary styling for the separators.
• Lines 9–10: We list each item in a <li> tag. We hyperlink each item to its respective web page using an <a> tag.
• Line 11: We use the <li> tag to create the last item on our breadcrumb or current page. We include the active class so that the current page is visually discernible. Finally, the aria-current attribute is set to "page" to indicate that this item refers to the current page.

Note: Click here to learn more about ARIA in HTML.

Change the separator

Bootstrap allows us to choose custom separators. These custom separators can be a string or an SVGScalable Vector Graphic icon.

We'll use the custom style property --bs-breadcrumb-divider on the <nav> tag to specify the new separator.

Custom string separator

We can set the separator between breadcrumb items to any string in the following manner:

• Line 7: The --bs-breadcrumb-divider style property is set to '=>' using inline CSS.

Custom SVG separator

We can also set the separator to a custom SVG element, such as a simple horizontal line. We have placed the SVG code as a separate CSS class for simplicity.

• Lines 5–9: We create a custom-divider class within the <style> tag. In this class, we set the --bs-breadcrumb-divider property to a reference to an SVG element.
• Line 12: We apply the newly created class on the <nav> tag.

Note: Click here to learn more about the HTML SVG element.