Management Bar
Management Bar
Management Bar is an extension of Navbar. Combine different management-bar components to create a toolbar that fits your needs.
Management Bar Default
Default Skin for Management Bar
<div class="management-bar management-bar-default">
<div class="management-bar-header">
<div class="checkbox">
<label>
<input type="checkbox" value="">
</label>
</div>
<a class="management-bar-toggle management-bar-toggle-link collapsed" data-toggle="collapse" href="#mgmtBarCollapse0">
<span class="management-bar-item-title">Label</span>
<span aria-hidden="true" class="icon-sort">
</a>
</div>
<div class="management-bar-header-right">
<a class="btn" href="#"><span aria-hidden="true" class="icon-th-large icon-monospaced"></span></a>
<a class="btn" href="#"><span aria-hidden="true" class="icon-th-list icon-monospaced"></span></a>
<a class="btn hidden-xs" href="#"><span aria-hidden="true" class="icon-th icon-monospaced"></span></a>
</div>
<div class="collapse management-bar-collapse" id="mgmtBarCollapse0">
<ul class="nav management-bar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
<span class="management-bar-item-title">Status: Approved, Draft, Pending, Expired</span>
<span aria-hidden="true" class="icon-sort"></span>
</a>
<ul class="dropdown-menu">
<li>
<form>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="checkbox active">
<label><input checked type="checkbox" value=""> Approved</label>
</div>
<div class="checkbox active">
<label><input checked type="checkbox" value=""> Draft</label>
</div>
<div class="checkbox active">
<label><input checked type="checkbox" value=""> Pending</label>
</div>
<div class="checkbox active">
<label><input checked type="checkbox" value=""> Expired</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value=""> Scheduled</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value=""> Rejected</label>
</div>
</form>
</li>
<li><a href="#1">Something Outside</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
<span class="management-bar-item-title">Recent</span>
<span aria-hidden="true" class="icon-sort"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#1">All</a></li>
<li class="active"><a href="#1">Recent</a></li>
<li><a href="#1">Mine</a></li>
</ul>
</li>
<li class="dropdown management-bar-item-xs-inline-block">
<a class="dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
<span class="management-bar-item-title">Order By: Modified Date</span>
<span aria-hidden="true" class="icon-sort"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#1">Name</a></li>
<li><a href="#1">Create Date</a></li>
<li class="active"><a href="#1">Modified Date</a></li>
<li><a href="#1">Downloads</a></li>
<li><a href="#1">Size</a></li>
</ul>
</li>
<li class="management-bar-item-xs-inline-block">
<a class="btn btn-default" href="#1" role="button"><span aria-hidden="true" class="icon-caret-up icon-monospaced"></span></a>
</li>
<li class="management-bar-item-xs-inline-block">
<a class="btn btn-default" href="#1" role="button"><span aria-hidden="true" class="icon-caret-down icon-monospaced"></span></a>
</li>
</ul>
</div>
</div>
Management Bar No Collapse
Use class management-bar-no-collapse on management-bar to preserve desktop management-bar styles in mobile.
<div class="management-bar management-bar-default management-bar-no-collapse">
<ul class="nav management-bar-nav">
<li>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</label>
</div>
</li>
<li>
<span class="management-bar-text">4 items selected</span>
</li>
</ul>
<ul class="nav management-bar-nav management-bar-nav-right">
<li>
<a class="btn" href="#"><span aria-hidden="true" class="icon-trash icon-monospaced"></span></a>
</li>
<li>
<a class="btn" href="#"><span aria-hidden="true" class="icon-ellipsis-vertical icon-monospaced"></span></a>
</li>
</ul>
</div>