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

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

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

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

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

Reference: https://getbootstrap.com/docs/5.0/components/breadcrumb/