Breadcrumb

Bootstrap 5 Breadcrumb

Bootstrap 5 Breadcrumb is a component that indicates to users where they are on a website or a web application. It's a navigational component that allows website visitors or web application users to track their current location and previous navigated page(s).

The breadcrumb Bootstrap navigation system follows a standard format. Each item in the navigation system is preceded by a chevron character and is followed by a forward slash. Each item in the navigation is also linked so that users can easily go back to the previous page.

Navigation Breadcrumb

HTML

html

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item text-primary">Home</li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-flat">
    <li class="breadcrumb-item">Home</li>
    <li class="breadcrumb-item">Library</li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

The breadcrumb bootstrap system is essential in any application or website a user visits.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Box

ButtonGroup