Angular Sidebar
Our Angular Sidebars are powerful and customisable responsive navigation components for any type of vertical navigation. A Angular Sidebar comes with built-in support for branding, navigation, and more. Now keep reading some examples to see how Angular Sidebars work.
Example
Angular side navbar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.
<nav
class="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-white"
id="sidenav-main"
(mouseover)="onMouseEnterSidenav()"
(mouseout)="onMouseLeaveSidenav()">
<perfect-scrollbar>
<div class="scrollbar-inner">
<div class="sidenav-header d-flex align-items-center">
<a class="navbar-brand" [routerLink]="['/dashboards/dashboard']">
<img
src="assets/img/brand/red.png"
class="navbar-brand-img"
alt="..."
/>
</a>
<div class="ml-auto">
<!-- Sidenav toggler -->
<div
class="sidenav-toggler d-none d-xl-block"
data-action="sidenav-unpin"
data-target="#sidenav-main"
(click)="minimizeSidebar()">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</div>
</div>
<div class="navbar-inner">
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<!-- Collapse header -->
<ul class="navbar-nav">
<li *ngFor="let menuitem of menuItems" class="nav-item">
<!--If is a single link-->
<a
routerLinkActive="active"
[routerLink]="[menuitem.path]"
*ngIf="menuitem.type === 'link'"
class="nav-link">
<i class="ni "></i>
<span class="nav-link-text"></span>
</a>
<!--If it have a submenu-->
<a
data-toggle="collapse"
routerLinkActive="active"
*ngIf="menuitem.type === 'sub'"
(click)="menuitem.isCollapsed = !menuitem.isCollapsed"
[attr.aria-expanded]="!menuitem.isCollapsed"
[attr.aria-controls]="menuitem.collapse"
class="nav-link">
<i class="ni "></i>
<span class="nav-link-text"></span>
</a>
<!--Display the submenu items-->
<div
id=""
class="collapse"
*ngIf="menuitem.type === 'sub'"
[collapse]="menuitem.isCollapsed"
[isAnimated]="true">
<ul class="nav nav-sm flex-column">
<li
*ngFor="let childitems of menuitem.children"
class="nav-item">
<!--If is a single link-->
<a
routerLinkActive="active"
[routerLink]="[menuitem.path, childitems.path]"
class="nav-link"
*ngIf="childitems.type === 'link'">
</a>
<!--If it have a submenu-->
<a
data-toggle="collapse"
(click)="childitems.isCollapsed = !childitems.isCollapsed"
[attr.aria-expanded]="!childitems.isCollapsed"
[attr.aria-controls]="childitems.collapse"
*ngIf="childitems.type === 'sub'"
class="nav-link">
</a>
<!--Display the submenu items-->
<div
id=""
class="collapse"
*ngIf="childitems.type === 'sub'"
[collapse]="childitems.isCollapsed"
[isAnimated]="true">
<ul class="nav">
<li
*ngFor="let childitem of childitems.children"
class="nav-item">
<a href="javascript:void(0)" class="nav-link">
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</perfect-scrollbar>
</nav>Collapsible menus Pro
<app-sidebar _ngcontent-kml-c1="" _nghost-kml-c2="" class="sidenav fixed-left">
<nav _ngcontent-kml-c2="" class="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-white" id="sidenav-main">
<perfect-scrollbar _ngcontent-kml-c2="">
<div style="position: static;" class="ps">
<div class="ps-content">
<div _ngcontent-kml-c2="" class="scrollbar-inner">
<div _ngcontent-kml-c2="" class="sidenav-header d-flex align-items-center">
<a _ngcontent-kml-c2="" class="navbar-brand" href="#/dashboards/dashboard"><img _ngcontent-kml-c2="" alt="..." class="navbar-brand-img" src="./assets/img/brand/red.png"></a>
<div _ngcontent-kml-c2="" class="ml-auto">
<div _ngcontent-kml-c2="" class="sidenav-toggler d-none d-xl-block" data-action="sidenav-unpin" data-target="#sidenav-main">
<div _ngcontent-kml-c2="" class="sidenav-toggler-inner"><i _ngcontent-kml-c2="" class="sidenav-toggler-line"></i><i _ngcontent-kml-c2="" class="sidenav-toggler-line"></i><i _ngcontent-kml-c2="" class="sidenav-toggler-line"></i></div>
</div>
</div>
</div>
<div _ngcontent-kml-c2="" class="navbar-inner">
<div _ngcontent-kml-c2="" class="collapse navbar-collapse" id="sidenav-collapse-main">
<ul _ngcontent-kml-c2="" class="navbar-nav">
<!---->
<li _ngcontent-kml-c2="" class="nav-item">
<!----><!----><a _ngcontent-kml-c2="" class="nav-link" data-toggle="collapse" routerlinkactive="active" aria-expanded="true"><i _ngcontent-kml-c2="" class="ni ni-shop text-primary"></i><span _ngcontent-kml-c2="" class="nav-link-text">Dashboards</span></a><!---->
<div _ngcontent-kml-c2="" class="collapse in show" id="" aria-expanded="true" aria-hidden="false" style="display: block; overflow: hidden;">
<ul _ngcontent-kml-c2="" class="nav nav-sm flex-column">
<!---->
<li _ngcontent-kml-c2="" class="nav-item">
<!----><a _ngcontent-kml-c2="" class="nav-link active" routerlinkactive="active" href="#/dashboards/dashboard"> Dashboard </a><!----><!---->
</li>
<li _ngcontent-kml-c2="" class="nav-item">
<!----><a _ngcontent-kml-c2="" class="nav-link" routerlinkactive="active" href="#/dashboards/alternative"> Alternative </a><!----><!---->
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!---->
<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps__rail-y" style="top: 0px; right: 0px; height: 646px;">
<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
</div>
</div>
</perfect-scrollbar>
</nav>
</app-sidebar>