Breadcrumb Navigation

Navbar Bootstrap 5Free

Free Bootstrap 5 navbar snippet — Breadcrumb Navigation. Preview, copy HTML, drop it into any Bootstrap 5 project.

1.5k views389 downloadslast year

gosnippets.com/preview/breadcrumb-navigation

Source Code

1<div class="container py-4">
2  <!-- Default -->
3  <h6 class="text-muted fw-semibold small mb-2">Default</h6>
4  <nav aria-label="breadcrumb" class="mb-4">
5    <ol class="breadcrumb">
6      <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Home</a></li>
7      <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Snippets</a></li>
8      <li class="breadcrumb-item active" aria-current="page">Navbar</li>
9    </ol>
10  </nav>
11
12  <!-- Pill / custom separator -->
13  <h6 class="text-muted fw-semibold small mb-2">Pill style</h6>
14  <nav aria-label="breadcrumb" class="mb-4">
15    <ol class="breadcrumb p-3 rounded-pill d-inline-flex gap-1" style="background:#E8F0FB;">
16      <li class="breadcrumb-item">
17        <a href="#" class="text-decoration-none fw-medium" style="color:#1B3A6B;">Home</a>
18      </li>
19      <li class="breadcrumb-item">
20        <a href="#" class="text-decoration-none fw-medium" style="color:#1B3A6B;">Snippets</a>
21      </li>
22      <li class="breadcrumb-item active fw-semibold" aria-current="page" style="color:#4A90D9;">Navbar</li>
23    </ol>
24  </nav>
25
26  <!-- Dark -->
27  <h6 class="text-muted fw-semibold small mb-2">Dark background</h6>
28  <nav aria-label="breadcrumb" class="p-3 rounded-3" style="background:#1B3A6B;">
29    <ol class="breadcrumb mb-0">
30      <li class="breadcrumb-item">
31        <a href="#" class="text-decoration-none text-white-50">Home</a>
32      </li>
33      <li class="breadcrumb-item">
34        <a href="#" class="text-decoration-none text-white-50">Snippets</a>
35      </li>
36      <li class="breadcrumb-item active text-white fw-semibold" aria-current="page">Navbar</li>
37    </ol>
38  </nav>
39</div>

More Navbar snippets

Responsive Sidebar Navigation for Dashboard

Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

NavbarView →

Bootstrap Transparent navbar example

Bootstrap Transparent navbar example — a free Bootstrap 5 navbar snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.

NavbarView →

Bootstrap 5 e-commerce navigation with product snippet

Bootstrap 5 e-commerce navigation with product snippet: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.

NavbarView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container py-4"> 2  3 <h6 class="text-muted fw-semibold small mb-2">Default</h6> 4 <nav aria-label="breadcrumb" class="mb-4"> 5 <ol class="breadcrumb"> 6 <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Home</a></li> 7 <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Snippets</a></li> 8 <li class="breadcrumb-item active" aria-current="page">Navbar</li> 9 </ol> 10 </nav> 11 12  13 <h6 class="text-muted fw-semibold small mb-2">Pill style</h6> 14 <nav aria-label="breadcrumb" class="mb-4"> 15 <ol class="breadcrumb p-3 rounded-pill d-inline-flex gap-1" style="background:#E8F0FB;"> 16 <li class="breadcrumb-item"> 17 <a href="#" class="text-decoration-none fw-medium" style="color:#1B3A6B;">Home</a> 18 </li> 19 <li class="breadcrumb-item"> 20 <a href="#" class="text-decoration-none fw-medium" style="color:#1B3A6B;">Snippets</a> 21 </li> 22 <li class="breadcrumb-item active fw-semibold" aria-current="page" style="color:#4A90D9;">Navbar</li> 23 </ol> 24 </nav> 25 26  27 <h6 class="text-muted fw-semibold small mb-2">Dark background</h6> 28 <nav aria-label="breadcrumb" class="p-3 rounded-3" style="background:#1B3A6B;"> 29 <ol class="breadcrumb mb-0"> 30 <li class="breadcrumb-item"> 31 <a href="#" class="text-decoration-none text-white-50">Home</a> 32 </li> 33 <li class="breadcrumb-item"> 34 <a href="#" class="text-decoration-none text-white-50">Snippets</a> 35 </li> 36 <li class="breadcrumb-item active text-white fw-semibold" aria-current="page">Navbar</li> 37 </ol> 38 </nav> 39</div>