Bootstrap 4 breadcrumbs provide the current page's location within a navigation hierarchy that adds separators automatically.
Steps To Create Breadcrumb :
<ol>
(ordered list) inside <nav>
..breadcrumb
to the <ol>
element base class. .breadcrumb-item
to <li>
element base class. active
,assign .active
to <li>
element base class also.Note: It is used to locate page position inside navigation hierarchy.
General Syntax
<nav aria-label="breadcrumb bg-light">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Design</a></li>
<li class="breadcrumb-item active" aria-current="page">Development</li>
</ol>
</nav>
Source Code
<nav aria-label="breadcrumb bg-light">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Web Design</a></li>
<li class="breadcrumb-item"><a href="#">App Design</a></li>
<li class="breadcrumb-item active" aria-current="page">Graphics Design</li>
</ol>
</nav>
Try it yourself
Source Code : Output
Note:Here .active
is used to indicated current active page inside navigation hierarchy..