Breadcrumb Navigation

Loading…

Breadcrumb Navigation | GoSnippets

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>

Breadcrumb Navigation

Source Code

More Navbar snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery