<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav id="sidebar-wrapper" class="navbar navbar-dark bg-dark header-top fixed-top navbar-expand-md navbar-expand-lg navbar-expand-xl" > <span class="navbar-toggler-icon leftmenutrigger"></span> <a class="navbar-brand" href="#">Actions</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarItems" aria-controls="navbarItems" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse show" id="navbarItems"> <!--flex-column--> <ul class="navbar-nav animate side-nav"> <li class="nav-item"><a class="nav-link" href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> My Dashboard</a></li> <li class="nav-item dropdown"> <a id="dashboardForDropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-tachometer" aria-hidden="true"></i> Open Dashboard For<span class="caret"></span> </a> <ul class="dropdown-menu"> @foreach (var member in Model.CurrentUser.StaffManaged) { <li class="nav-item dropdown-item" aria-labelledby="dashboardForDropdown"> <a href="@Url.Action("View", "Home", new { id = @member.ID.ToString()})"> @member.Fullname</a> </li> } </ul> </li> <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-calendar" aria-hidden="true"></i> Open Your Timesheet</a></liclass="nav-item"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> <i class="fa fa-calendar" aria-hidden="true"></i> Open Timesheet For <span class="caret"></span> </a> <ul class="dropdown-menu"> <li class="nav-item"><a class="nav-link" href="#">Person 1</a></li> <li class="nav-item"><a class="nav-link" href="#">Person 2</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Open Timesheet Sign Off Report</a></li> </ul> </div> </nav>