Hit enter after type your search item

Create Breadcrumbs with Bootstrap 5

What is breadcrumb and how to use it in Bootstrap 5?

The breadcrumbs:

  • Aids users in navigating the website
  • Acts as the secondary navigation
  • Indicates the current page location within the hierarchy of navigation

Bootstrap 5 enables the creation of breadcrumb components easily by automatically adding separators via CSS.

An example of breadcrumb in Bootstrap 5

In order to create a default breadcrumb with minimal style, simply use the ordered or unordered list.

So, if you are using an ordered list then:

  • Assign .breadcrumb to the <ol>
  • Assign .breadcrumb-item class to each <li>.
  • Also, add .active class to the <li> that you will not be linked and shown as the current page.

See an example below:

See online demo and code

Bootstrap5-breadcrumb


You can see, a forward slash is added as a separator for the basic styling.

An example of using “>” divider

You can change the breadcrumb divider in two ways:

  • By modifying –bs-breadcrumb-divider local CSS property
  • By $breadcrumb-divider Sass variable

The example below shows using the “greater than” sign i.e. “>” as the divider in breadcrumbs:

See online demo and code

BS5-breadcrumb-divider


In the above code, you can see –bs-breadcrumb-divider is modified in the <nav> tag. There we used “>” divider.

Using embedded SVG icon as divider example

You may also embed the SVG icon as a divider in the Bootstrap 5 breadcrumb component. See an example below:

See online demo and code

BS5-breadcrumb-SVG

Changing color of breadcrumb example

If you need to change the color of that SVG icon, you can do this easily. In the SVG code, see the fill=’currentColor’ in the above code. Now, just change the currentColor to the color of your choice.

For the example, I have changed this to orange and red colors – see the output and code below:

See online demo and code

BS5-breadcrumb-SVG-col

Breadcrumbs without divider example

Don’t want to use dividers in breadcrumbs at all? No problem. Just use the –bs-breadcrumb-divider: ” and you are done.

See the example below:

See online demo and code

BS5-breadcrumb-no-divi


Reference: https://getbootstrap.com/docs/5.0/components/breadcrumb/
This div height required for enabling the sticky sidebar