Bootstrap Sidebars - Argon Dashboard
Discover 6 Bootstrap Sidebars available in Argon Dashboard
Sidebar Complex
Component from
Argon Dashboard
Builder
<div class="sidenav-header align-items-center">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png" class="navbar-brand-img" alt="...">
</a>
</div>
<div class="navbar-inner">
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:">
<i class="fa fa-desktop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-globe text-info"></i>
<span class="nav-link-text">Icons</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-map-marker text-warning"></i>
<span class="nav-link-text">Maps</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-table text-dark"></i>
<span class="nav-link-text">Tables</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-lock text-danger"></i>
<span class="nav-link-text">Login</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-key text-success"></i>
<span class="nav-link-text">Register</span>
</a>
</li>
</ul>
<hr class="my-3">
<h6 class="navbar-heading p-0 text-muted">
<span class="docs-normal">Documentation</span>
</h6>
<ul class="navbar-nav mb-md-3">
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-rocket"></i>
<span class="nav-link-text">Getting started</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-palette"></i>
<span class="nav-link-text">Foundation</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-chart-pie"></i>
<span class="nav-link-text">Components</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-puzzle-piece"></i>
<span class="nav-link-text">Plugins</span>
</a>
</li>
</ul>
</div>
</div>Sidebar With Logo
Component from
Argon Dashboard
Builder
<div class="sidenav-header align-items-center">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png" class="navbar-brand-img" alt="...">
</a>
</div>
<div class="navbar-inner">
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:">
<i class="fa fa-desktop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-lock text-danger"></i>
<span class="nav-link-text">Login</span>
</a>
</li>
</ul>
</div>
</div>Sidebar Simple
Component from
Argon Dashboard
Builder
<div class="navbar-inner">
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:">
<i class="fa fa-desktop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-lock text-danger"></i>
<span class="nav-link-text">Login</span>
</a>
</li>
</ul>
</div>
</div>
