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:

<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"> Item </a></li>
        <li class="breadcrumb-item active"> Current Item </li>
    <ol>
</nav>

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

A breadcrumb using bootstrap
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:
A breadcrumb with the string separator, '=>'
  • 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.
A breadcrumb with an SVG separator of a dash
  • 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.
Free Resources
Copyright ©2025 Educative, Inc. All rights reserved