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 #main_menu id.

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.

Search form

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>