Bootstrap – Sidebar Menu with Nav list

When you need a menu in a sidebar the Bootstrap Navbar just won’t fit. In those instances the Nav list component will provide the solution.

List with links

The markup for a sidebar menu with the Nav list is:

<body>
        <aside class="span3">
            <ul class="nav nav-list">
              <li class="nav-header">List</li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
        </aside><!--/span3-->
</body>

As you can see we need to use the class ‘nav-list’. And we use the class nav-header for a list item that will appear as a heading for the menu.

A web page complete with a main content section and a sidebar would look like this:

example of sidebar aside hero unit and articles

The markup for the complete layout is:

<body>
<div class="container">
    <div class="row">
        <div class="span4">
            <ul class="nav nav-list">
              <li class="nav-header">Navigation List</li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="divider"></li>
              <li><a href="#">Link</a></li>
            </ul>
        </div><!--/span3-->
        <div class="span8">
          <div class="hero-unit">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
          </div>
          <div class="row">
            <article class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details »</a></p>
            </article>
            <article class="span4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn" href="#">View details »</a></p>
            </article>
              </div><!--/row-->
            </div><!--/span9-->
          </div><!--/row-->
</div><!-- container -->
</body>

Nav list menu shows different groups

We can also divide our menu in two distinct groups with a divider and a second header:

Vertical list with blue line as a divider

To achieve this we use this markup:

<body>
        <aside class="span3">
            <ul class="nav nav-list">
              <li class="nav-header">First List</li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="divider"></li>
              <li class="nav-header">Second List</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
        </aside><!--/span3-->
</body>

Again – as in with the divider in the previous tutorial – I have given the divider a different than the default color to make it easier to see. If you want to do the same insert the CSS rules below in the head section (or in an extra style sheet of course):

.nav-list .divider {
    border-bottom: 1px solid #39F;
}

These are the Bootstrap tutorials in this series: