This is the code they have provided for the menu,in index.html page. I have used it in the master page.
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<ul class="nav navbar-top-links navbar-right">
</ul>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- /#page-wrapper -->
</div>
</body>
The solution is like below. Just include the
<ul class="nav" id="side-menu"></ul>
inside a div. You can add several div s like this and control the visibility in server side according to roles.
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<ul class="nav navbar-top-links navbar-right">
</ul>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<div runat="server" visible="false" id="divA" >
<ul class="nav" id="side-menu">
</ul>
</div>
<div runat="server" visible="false" id="divB" >
<ul class="nav" id="side-menu">
</ul>
</div>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- /#page-wrapper -->
</div>
</body>