I want to attach breadcrumbs to the top of the navbar. Currently, I am developing an application using Angular and Bootstrap 4.
app.component.html
<nav class="navbar navbar-expand-lg navbar-toggleable-lg navbar-dark bg-dark sticky-top" style="position:sticky">
<!--navbar-expand-sm navbar-dark bg-dark sticky-top -->
<!-- Important - make sure to have the toggler button outside of the container -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<!--aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"-->
<span class="navbar-toggler-icon"></span>
</button>
<div>
<span class="navbar-text" style="color:white">Header</span>
</div>
</nav>
<div class="container-fluid" style="padding-left:0px;">
<div class="row">
<div class="col-12 col-xl-2 col-lg-3 col-md-4">
<div class="col-xl-12 col-lg-12 col-md-12 x1-sidebar bg-dark" style="position:sticky;">
<app-navbar></app-navbar>
</div>
</div>
<div class="col">
<router-outlet></router-outlet>
</div>
</div>
</div>
The app-navbar is a vertical navigation component.
The router-outlet represents the main content which includes dynamic breadcrumbs and content.
Below are the breadcrumbs and content:
<div class="container">
<div class="row" *ngIf="breadCrumbs?.length>0" style="position:inherit;">
<div class="col">
<nav aria-label="breadcrumb">
<ul class="breadcrumb bg-dark sticky-top" >
<li class="breadcrumb-item" *ngFor='let breadcrumb of breadCrumbs; let i = index' >
<a >{{ Dynamic breadcrumb label }}</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col">
//content.......
</div>
</div>
</div>
If the code is unclear, please let me know so I can provide more information.