Skip to content
All posts

Bootstrap breadcrumbs

  Admin  ·  1 minute read

Bootstrap breadcrumb is a navigation element that allows users to trace back their steps through a website or application. It helps users to navigate through pages and allows them to find their way back to the homepage. It also provides information about the current page’s position in the site hierarchy.

There are several ways to display Bootstrap breadcrumbs, but all of them have one thing in common: they are placed at the top of the page.

In this short tutorial, I will teach you how to create Bootstrap breadcrumbs with different dividers.

We'll prepare:

  • Default Bootstrap breadcrumbs with a slash as a divider

  • Breadcrumbs with bullet point dividers

  • Breadcrumbs with Font Awesome icon dividers

  • And arrow-styled breadcrumbs.

You will need basic HTML knowledge to get started.

To create breadcrumbs, we first need to create an ordered or unordered list with the li.breadcrumb-item elements for each link for each level in our navigation. If you want the breadcrumb item to contain a link, simply add <a href="">Link</a> into the breadcrumb item.

So, let's have a look at the interactive example on JSFiddle below.

If you liked this snippet, you might also enjoy exploring Custom Bootstrap Scrollbar or Bootstrap Collapse Panel .