Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 vertical menu with toggable submenus

Using Bootstrap 3, I need to construct a vertical menu containing toggable submenus. I have the following structure:

<nav>
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2 (toggle)</a>
            <ul>
                <li><a href="#">Item 2.1</a></li>
                <li><a href="#">Item 2.2</a></li>
                <li><a href="#">Item 2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</nav>

I want the UL inside "Item 2" to be hidden by default and unhide/hide it by pressing "Item 2".

like image 972
Gustavo Avatar asked Nov 13 '14 19:11

Gustavo


People also ask

How do I create a vertical navbar in Bootstrap?

The basic vertical menu in bootstrap is only based on . nav class. In the <ul> tag, class “nav navbar-nav” helps to make menu bar vertical. Explanation: The Default vertical menu in bootstrap takes space otherwise we need to use collapse class.

How do I keep a drop down menu from opening when I click it?

(item changes backgorund on hover and on click). Set toggle={false} property inside DropdownItem to prevent dropdown from closing.

Which key is used to add separator bar in drop down menu?

Press Alt+A. The separator is added to the list of buttons on the Quick Access Toolbar and the focus is on the separator. (Move Down) button depending on where you want to move the separator.

How do I create a sub navigation bar?

Create A SubnavUse any element to open the subnav/dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the subnav menu and add the subnav links inside it. Wrap a <div> element around the button and the <div> to position the subnav menu correctly with CSS.


3 Answers

The key of making a vertical submenu toggable is to use the attribute data-toggle="collapse" instead of the most common used in navs data-toggle="dropdown".

I prepared this jsfiddle example, and this is the wordking code:

<nav>
    <ul class="nav">
      <li><a href="#">Link 1</a></li>
    <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Link 2 (toggle)</a>
      <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
        <li><a href="#">Link 2.1</a></li>
        <li><a href="#">Link 2.2</a></li>
        <li><a href="#">Link 2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</nav>
like image 55
Gustavo Avatar answered Oct 14 '22 11:10

Gustavo


Sometimes you need both a menu item link and a toggle for submenu items.

Here is a test:

/* CSS */

.toggle-custom {
  position: absolute !important;
  top: 0;
  right: 0;
}
.toggle-custom[aria-expanded='true'] .glyphicon-plus:before {
  content: "\2212";
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript" ></script>

<nav>
  <ul class="nav">
    <li><a href="#">Link 1</a>
    </li>
    <li><a href="#">Link 2</a><a href="#" class="toggle-custom" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
      <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
        <li><a href="#">Link 2.1</a>
        </li>
        <li><a href="#">Link 2.2</a>
        </li>
        <li><a href="#">Link 2.3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Link 3</a>
    </li>
  </ul>
</nav>

http://jsfiddle.net/zoxqpftc/461/

like image 42
eye-wonder Avatar answered Oct 14 '22 11:10

eye-wonder


For future readers using newer Bootstrap 5 (update 2021).. The Collapse component can still be used along with the Nav component.

If you want the menu to have an accordion effect (only one item open at a time) use the data-bs-parent attribute to set the parent of each menu section..

<div class="nav flex-column">
    <a href="#menu1" class="nav-link collapsed" data-bs-toggle="collapse" role="button">Item 1 ▾</a>
    <div class="collapse ps-2" id="menu1" data-bs-parent="#sidebar">
        <a href="#menu1sub1" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">Subitem1 1 ▾</a>
        <div class="collapse ps-2" id="menu1sub1" data-bs-parent="#menu1">
            <a href="#" class="nav-link" data-bs-parent="#menu1sub1">Subitem a</a>
            <a href="#" class="nav-link" data-bs-parent="#menu1sub1">Subitem b</a>
            <a href="#menu1sub1sub1" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">Subitem c ▾</a>
            <div class="collapse ps-2" id="menu1sub1sub1" data-bs-parent="#menu1sub1sub1">
                <a href="#" class="nav-link">Subitem c.1</a>
                <a href="#" class="nav-link">Subitem c.2</a>
            </div>
        </div>
    </div>
    <a href="#" class="nav-link">Item 2</a>
    <a href="#" class="nav-link">Item 3</a>
    <a href="#" class="nav-link">Item 4</a>
</div>

Bootstrap 5 Vertical Sidebar

like image 2
Zim Avatar answered Oct 14 '22 10:10

Zim