Add a navbar to your UI with Bootstrap Breadcrumb & Material Design Breadcrumb snippets. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css'>
2 <main class="hm-gradient">
3
4 <!--MDB -->
5 <div class="container mt-4">
6
7 <!-- Grid row -->
8 <div class="row">
9
10 <!-- Grid column -->
11 <div class="col-md-12">
12
13 <div class="card p-3">
14 <div class="card-block">
15
16 <div class="light-font">
17
18 <ol class="breadcrumb default-color">
19 <li class="breadcrumb-item active">Home</li>
20 </ol>
21 <ol class="breadcrumb primary-color">
22 <li class="breadcrumb-item"><a class="white-text" href="#">Home</a></li>
23 <li class="breadcrumb-item active">Library</li>
24 </ol>
25 <ol class="breadcrumb secondary-color">
26 <li class="breadcrumb-item"><a class="white-text" href="#">Home</a></li>
27 <li class="breadcrumb-item"><a class="white-text" href="#">Library</a></li>
28 <li class="breadcrumb-item active">Data</li>
29 </ol>
30
31 </div>
32
33 <div class="bc-icons pb-4">
34
35 <ol class="breadcrumb purple darken-4">
36 <li class="breadcrumb-item active"><i class="fa fa-star-o me-2 white-text" aria-hidden="true"></i>Home</li>
37 </ol>
38 <ol class="breadcrumb pink darken-4">
39 <li class="breadcrumb-item"><i class="fa fa-star-o me-2 white-text" aria-hidden="true"></i><a class="white-text" href="#">Home</a></li>
40 <li class="breadcrumb-item active"><i class="fa fa-star-o mx-2 white-text" aria-hidden="true"></i>Library</li>
41 </ol>
42 <ol class="breadcrumb red darken-4">
43 <li class="breadcrumb-item"><i class="fa fa-star-o me-2 white-text" aria-hidden="true"></i><a class="white-text" href="#">Home</a></li>
44 <li class="breadcrumb-item"><i class="fa fa-star-o mx-2 white-text" aria-hidden="true"></i><a class="white-text" href="#">Library</a></li>
45 <li class="breadcrumb-item active"><i class="fa fa-star-o mx-2 white-text" aria-hidden="true"></i>Data</li>
46 </ol>
47
48 </div>
49
50 <div class="bc-icons-2">
51
52 <ol class="breadcrumb indigo lighten-4">
53 <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-caret-right mx-2" aria-hidden="true"></i></li>
54 <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-caret-right mx-2" aria-hidden="true"></i></li>
55 <li class="breadcrumb-item active">Data</li>
56 </ol>
57 <ol class="breadcrumb blue-grey lighten-4">
58 <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
59 <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
60 <li class="breadcrumb-item active">Data</li>
61 </ol>
62 <ol class="breadcrumb purple lighten-4">
63 <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-angle-right mx-2" aria-hidden="true"></i></li>
64 <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-angle-right mx-2" aria-hidden="true"></i></li>
65 <li class="breadcrumb-item active">Data</li>
66 </ol>
67 <ol class="breadcrumb red lighten-4">
68 <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-angle-double-left mx-2" aria-hidden="true"></i></li>
69 <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-angle-double-left mx-2" aria-hidden="true"></i></li>
70 <li class="breadcrumb-item active">Data</li>
71 </ol>
72 <ol class="breadcrumb cyan lighten-4">
73 <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-angle-left mx-2" aria-hidden="true"></i></li>
74 <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-angle-left mx-2" aria-hidden="true"></i></li>
75 <li class="breadcrumb-item active">Data</li>
76 </ol>
77 <ol class="breadcrumb amber lighten-4">
78 <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fa fa-caret-left mx-2" aria-hidden="true"></i></li>
79 <li class="breadcrumb-item"><a class="black-text" href="#">Library</a><i class="fa fa-caret-left mx-2" aria-hidden="true"></i></li>
80 <li class="breadcrumb-item active">Data</li>
81 </ol>
82
83 </div>
84
85 </div>
86 </div>
87
88 </div>
89 <!-- Grid column -->
90
91 </div>
92 <!-- Grid row -->
93
94 </div>
95 <!--MDB -->
96
97 </main>
98 <script src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js'></script>
Responsive Sidebar Navigation for Dashboard
Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
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.
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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.