Bootstrap – Vertical Navbar (with submenu)

The Bootstrap Navbar gives the impression that the main navigation on any website should be a horizontal menu. Well for some layouts a main navigation in the sidebar is more fitting. We could restyle a Nav list to look like a vertical Navbar. But this requires more than a few CSS rules. A much simpler solution is to make the Navbar vertical.

Any menu on a website basically consists of an unordered list of list items (and of course a tags for the hyperlinks). And an unordered list without any styling shows as a vertical list. Bootstrap’s horizontal Navbar therefor only became a horizontal menu because additional styling rules were used.

When we want to make the Navbar vertical (again) we are infact returning it to its natural state.

First I want to show you a demo of the vertical Navbar we’re going to create:

Vertical Navbar

First we’ll look at the HTML structure we need for a menu with several links and a submenu. After that we will add the necessary CSS rules. For this second part a (basic) understanding of CSS is required.

The HTML structure

Compared to a basic unordered list we need to add a second unordered list met a few list items to create a submenu. I have also added some icon-fonts from Font Awesome for the Home and Contact link and to show where the submenu can be found:

<nav class="navbar span4">
<div class="navbar-inner">
<ul class="nav">
  <li class="active">
    <a href="#"><i class="icon-home icon-large"></i> Home</a>
  </li>
  <li><a href="#" class="icon_align">Link</a></li>
  <li><a href="#" class="icon_align">Link <i class="icon-caret-right icon-large"></i></a>
        <ul class="nav sub-level">
        <li><a href="#">Sublink</a></li>
        <li><a href="#">Sublink</a></li>
        </ul>
  </li>
  <li><a href="#" class="icon_align">Link</a></li>
  <li><a href="#" class="icon_align">Link</a></li>
  <li><a href="#" class="icon_align">Link</a></li>
  <li><a href="#"><i class="icon-phone icon-large"></i> Contact</a></li>
</ul>
</div>
</nav>

If you look at the HTML markup closely you will notice that I inserted a few class labels (icon-align, sub-level).Why we need those will become clear later on when we cover the CSS styling of our menu.

The icon fonts

To get the Font Awesome font icons to work we need to download the Font Awesome CSS file and insert it into the ‘css’ folder of our project (we have done this before in the tutorial Navbar with dropdowns). We also need to include this link into our head section:

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

CSS styling

Without further styling (and without the span4 class) our Navbar would now look like this:

Navbar shows horizontally and submenu is visible
What this image tells us is that we need additional CSS rules for our Navbar to achieve 2 things:

  1. Get the list items stacked in one column.
  2. Hide the submenu and only show it when the pointer hovers over the link with that holds the submenu.

List items in one column

In the default Bootstrap Navbar the links show horizontally because a ‘float: left’ was used. We set a ‘float; none’ to get them stacked vertically.

.navbar-inner {
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
}
.navbar .nav > li {
    float: none;
}
.navbar .nav > li a {
	padding: 10px 0 10px 20px;
}

As you can see I also did a reset for the ‘navbar-innner’ and for the padding of the list items.

Hide and show submenu

To hide and show the submenu we first tell the browser that this unordered list should not be displayed in the default state. And then we tell the browser that when the pointer hovers over a list item with the class ‘sub-level’ it should display it.

.navbar ul.sub-level {
    display: none;
}
.navbar li:hover .sub-level {
    position: relative;
    left: 45px;
    top: 0px;
	display: block;
}

I also wanted the submenu items to show a bit more to the right compared to the other links. So I gave them a relative position 45px from the left.

Making our Vertical Navbar suitable for different sidebar widths

As you can see in the HTML structure I have used a class ‘span4′ for the Navbar. To make our vertical Navbar suitable for either a span2 or span3 as well we need to set the widths of the list items.

.span2 .nav >li a {
	width: 120px;
}
.span3 .nav >li a {
	width: 200px;
}
.span4 .nav >li a {
	width: 280px;
}

Aligning our icon indicating a submenu

Finally we align our icon (for the submenu) to the right:

.icon_align {
	margin-left: 28px;
}

With this vertical Navbar we have one solution for a menu in the sidebar. In one of the next tutorials I will show you another solution.

These are the Bootstrap tutorials in this series: