The markup for sidebar menu is quite simple:
<ul id="main-menu" class=""> <!-- add class "multiple-expanded" to allow multiple submenus to open --> <!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" --> <!-- Search Bar --> <li>...</li> ... </ul>
Note that “multiple-expanded” means that several submenu items can be opened, so by not adding this class will make the menu container to have only one submenu open, and others will be collapsed.
An item could be set with this markup:
<li> <a href="charts-charts.html"> <i class="entypo-chart-bar"></i> <span>Charts</span> </a> </li>
If you want to apply badge to the link:
<a href="mailbox.html"> <i class="entypo-mail"></i> <span>Mailbox</span> <span class="badge badge-secondary">8</span> </a>
Repeat this process with other submenus, simply only the parent element (menu container) should have
In case when you have submenu and you want to make it always open add this class to li parent element: opened
Active class is name as usually “active“, so it should applied to li element.
It has custom structure and cannot be any different, so always apply this markup if you want to add the search to sidebar menu:
<li id="search"> <form method="get" action=""> <input type="text" name="q" class="search-input" placeholder="Search something..."/> <button type="submit"> <i class="entypo-search"></i> </button> </form> </li>