Vertical Menu in Bootstrap

Question

Is there a way to create a vertical menu (not dropdown, entirely separate vertical menu on sidebar) by using any bootstrap class? I can create one using my css, but just want to

Answer 1

Responsive utility classes

Easiest way I can think of is to have a vertical left menu AND the collapsing Top Nav in your design and attach/use bootstraps responsive css.

Then just add classes of hidden phone, tablet etc (to suit) to your left nav and hidden desktop etc to the top nav

see: http://twitter.github.com/bootstrap/scaffolding.html#responsive

play around with that and hopefully it should be able to do what you want

Answer 2

Try the following (no custom.css required):

<div class="col-md-2">
    <nav>
        <ul class="nav">
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
        </ul>
    </nav>
</div>

Answer 3

With Bootstrap 2.0 you can give your tabs the "stackable" class, which makes them stack vertically.

Answer 4

You can use menu left sidebar collapse accordion, animated with right arrow

Demo: http://www.jqueryscript.net/demo/Bootstrap-Style-Vertical-Accordion-Menu-with-jQuery-CSS3-bs-leftnavi/

Download: http://www.jqueryscript.net/menu/Bootstrap-Style-Vertical-Accordion-Menu-with-jQuery-CSS3-bs-leftnavi.html

Answer 5

The "nav nav-list" class of Twiter Bootstrap 2.0 is handy for building a side bar.

You can see a lot of documentation at http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php

Answer 6

The question is old now.

But if somebody looks here the trick in the current version is to use the nav-stack class, like so:

<nav>
  <ul class="nav nav-pills nav-stacked span2">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>