"Nav sidebar"
Bootstrap 3.0.0 Snippet by Tomboasy

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-3"> <ul class="nav bs-sidenav"> <li> <a href="#glyphicons">Glyphicons</a> <ul class="nav"> <li><a href="#glyphicons-glyphs">Available glyphs</a></li> <li><a href="#glyphicons-how-to-use">How to use</a></li> <li><a href="#glyphicons-examples">Examples</a></li> </ul> </li> <li> <a href="#dropdowns">Dropdowns</a> <ul class="nav"> <li><a href="#dropdowns-example">Example</a></li> <li><a href="#dropdowns-alignment">Alignment options</a></li> <li><a href="#dropdowns-headers">Headers</a></li> <li><a href="#dropdowns-disabled">Disabled menu items</a></li> </ul> </li> <li> <a href="#btn-groups">Button groups</a> <ul class="nav"> <li><a href="#btn-groups-single">Basic example</a></li> <li><a href="#btn-groups-toolbar">Button toolbar</a></li> <li><a href="#btn-groups-sizing">Sizing</a></li> <li><a href="#btn-groups-nested">Nesting</a></li> <li><a href="#btn-groups-vertical">Vertical variation</a></li> <li><a href="#btn-groups-justified">Justified link variation</a></li> </ul> </li> <li> <a href="#btn-dropdowns">Button dropdowns</a> <ul class="nav"> <li><a href="#btn-dropdowns-single">Single button dropdowns</a></li> <li><a href="#btn-dropdowns-split">Split button dropdowns</a></li> <li><a href="#btn-dropdowns-sizing">Sizing</a></li> <li><a href="#btn-dropdowns-dropup">Dropup variation</a></li> </ul> </li> <li> <a href="#input-groups">Input groups</a> <ul class="nav"> <li><a href="#input-groups-basic">Basic example</a></li> <li><a href="#input-groups-sizing">Sizing</a></li> <li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li> <li><a href="#input-groups-buttons">Button addons</a></li> <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li> <li><a href="#input-groups-buttons-segmented">Segmented buttons</a></li> </ul> </li> <li class=""> <a href="#nav">Navs</a> <ul class="nav"> <li><a href="#nav-tabs">Tabs</a></li> <li><a href="#nav-pills">Pills</a></li> <li><a href="#nav-justified">Justified nav</a></li> <li><a href="#nav-disabled-links">Disabled links</a></li> <li><a href="#nav-dropdowns">Using dropdowns</a></li> </ul> </li> <li class=""> <a href="#navbar">Navbar</a> <ul class="nav"> <li><a href="#navbar-default">Default navbar</a></li> <li class=""><a href="#navbar-forms">Forms</a></li> <li><a href="#navbar-buttons">Buttons</a></li> <li><a href="#navbar-text">Text</a></li> <li><a href="#navbar-links">Non-nav links</a></li> <li><a href="#navbar-component-alignment">Component alignment</a></li> <li><a href="#navbar-fixed-top">Fixed to top</a></li> <li><a href="#navbar-fixed-bottom">Fixed to bottom</a></li> <li><a href="#navbar-static-top">Static top</a></li> <li><a href="#navbar-inverted">Inverted navbar</a></li> </ul> </li> <li><a href="#breadcrumbs">Breadcrumbs</a></li> <li> <a href="#pagination">Pagination</a> <ul class="nav"> <li><a href="#pagination-default">Default pagination</a></li> <li><a href="#pagination-pager">Pager</a></li> </ul> </li> <li><a href="#labels">Labels</a></li> <li><a href="#badges">Badges</a></li> <li><a href="#jumbotron">Jumbotron</a></li> <li><a href="#page-header">Page header</a></li> <li> <a href="#thumbnails">Thumbnails</a> <ul class="nav"> <li><a href="#thumbnails-default">Default example</a></li> <li><a href="#thumbnails-custom-content">Custom content</a></li> </ul> </li> <li> <a href="#alerts">Alerts</a> <ul class="nav"> <li><a href="#alerts-examples">Examples</a></li> <li><a href="#alerts-dismissable">Dismissable alerts</a></li> <li><a href="#alerts-links">Links in alerts</a></li> </ul> </li> <li> <a href="#progress">Progress bars</a> <ul class="nav"> <li><a href="#progress-basic">Basic example</a></li> <li><a href="#progress-alternatives">Contextual alternatives</a></li> <li><a href="#progress-striped">Striped</a></li> <li><a href="#progress-animated">Animated</a></li> <li><a href="#progress-stacked">Stacked</a></li> </ul> </li> <li> <a href="#media">Media object</a> <ul class="nav"> <li><a href="#media-default">Default media</a></li> <li><a href="#media-list">Media list</a></li> </ul> </li> <li class="active"> <a href="#list-group">List group</a> <ul class="nav"> <li><a href="#list-group-basic">Basic example</a></li> <li class="active"><a href="#list-group-badges">Badges</a></li> <li class=""><a href="#list-group-linked">Linked items</a></li> <li class=""><a href="#list-group-custom-content">Custom content</a></li> </ul> </li> <li> <a href="#panels">Panels</a> <ul class="nav"> <li><a href="#panels-basic">Basic example</a></li> <li><a href="#panels-heading">Panel with heading</a></li> <li><a href="#panels-alternatives">Contextual alternatives</a></li> <li><a href="#panels-tables">With tables</a> </li><li><a href="#panels-list-group">With list groups</a> </li></ul> </li> <li><a href="#wells">Wells</a></li> </ul> </div> </div> </div>

Related: See More


Questions / Comments: