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".
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.
(item changes backgorund on hover and on click). Set toggle={false} property inside DropdownItem to prevent dropdown from closing.
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.
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.
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>
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/
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With