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 know if there is any builtin class for this in bootstrap  or can it be done using the top-bar with any hack

User · Answer

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

User · Answer

You can use the sidebar class to render list items vertically  Not exactly a menu  but close   http   twitter github com bootstrap examples fluid html

User · Answer

You can use Bootstrap s tabs with bootstrap-verticaltabs  This modifies Bootstrap s Tabs to provide an alternative vertical styling  That way you can use the built in tabs in bootstrap and get the vertical menu you are looking for   Bootstrap Vertical Tabs  https   github com entropillc bootstrap-verticaltabs

User · Answer

No  not in the current one  But you can take a look at the next version by downloading it from github  It has vertical pills and tabs  Maybe that will help   be aware  it s under construction tho

User · Answer

With a few CSS overrides  I find the accordion   collapse plugin works well as a sidebar vertical menu  Here s a small sample of some overrides I use for a menu on a white background  The accordion is placed within a section container    accordion-group       margin-bottom  1px      -webkit-border-radius  0px      -moz-border-radius  0px      border-radius  0px      border-bottom  1px solid  E5E5E5      border-top  none      border-left  none      border-right  none      accordion-heading hover       background-color   FFFAD9

User · Answer

Try the following  no custom css required     lt div class  col-md-2  gt       lt nav gt           lt ul class  nav  gt               lt li gt  lt a href     gt Link1 lt  a gt  lt  li gt               lt li gt  lt a href     gt Link2 lt  a gt  lt  li gt               lt li gt  lt a href     gt Link3 lt  a gt  lt  li gt               lt li gt  lt a href     gt Link4 lt  a gt  lt  li gt           lt  ul gt       lt  nav gt   lt  div gt

User · Answer

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

User · Answer

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    lt nav gt     lt ul class  nav nav-pills nav-stacked span2  gt       lt li gt  lt a href     gt Home lt  a gt  lt  li gt       lt li gt  lt a href     gt About lt  a gt  lt  li gt       lt li gt  lt a href     gt Contact lt  a gt  lt  li gt     lt  ul gt   lt  nav gt

User · Answer

here is vertical menu base on Bootstrap http   www okvee net articles okvee-bootstrap-sidebar-menu it is also support responsive design

User · Answer

With Bootstrap 2 0 you can give your tabs the  stackable  class  which makes them stack vertically

User · Answer

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

User · Answer

This doesn t quite yet look like what I want  but I accomplished something like this by stacking nav pills in the leftmost two spans   This is what my app s app views layouts application html erb file looks like    lt  DOCTYPE html gt         lt body gt       lt  -- top navigation bar -- gt       lt div class  navbar navbar-fixed-top  gt                  lt  div gt       lt div class  container-fluid  gt         lt  -- the navigation buttons bar on the left -- gt         lt div class  sidebar-nav span2  gt   lt  -- we reserve 2 spans out of 12 for this -- gt           lt ul class  nav nav-pills nav-stacked  gt             lt li class   lt    current page  root path     active     inactive    gt   gt               lt    link to  Home   root path   gt             lt  li gt             lt li class   lt    current page  section a path     active     inactive    gt   gt               lt    link to  Section A   section a path   gt             lt  li gt             lt li class   lt    current page  section b path     active     inactive    gt   gt               lt    link to  Section B   section b path   gt             lt  li gt           lt  ul gt         lt  div gt         lt div class  container-fluid span10  gt   lt  -- use the remaining 10 spans -- gt           lt    flash messages   gt           lt    yield  layout   gt   lt  -- the content page sees a full 12 spans -- gt         lt  div gt       lt  div gt   lt  -- class  container-fluid  -- gt             lt  body gt   lt  html gt    Now the stacked pills appear on the top left  below the navbar   When the user clicks on one of them  the corresponding page loads   From the point of view of application html erb  that page has the 10 rightmost spans available for it  but from the page s view  it has the full 12 spans available   The button corresponding to the page currently being displayed is rendered as active  and the others as inactive   Specify the colours for active and inactive buttons in file app assets stylesheets custom css scss  in this case  the colour for a disabled state is also defined     import  bootstrap        spray         81c9e2   grey light    dddddd       nav-pills        inactive  gt  a   inactive  gt  a hover           background-color   spray             disabled  gt  a   disabled  gt  a hover           background-color   grey light            The active pill s colour is not defined  so it appears as the default blue   File custom css scss is included because of the line    require tree   in file app assets stylesheets application css

[css] Vertical Menu in Bootstrap

Examples related to css

Examples related to twitter-bootstrap