Layout Admin

coreNavigation using font feather icons menu for this sample, include feather assets to make icon

HTML

<nav hidden>
    <div class="nav-header">
        <a href="#" class="brand">
            <img src="/images/brand.png" />
        </a>
        <button class="toggle-bar">
            <i data-feather="menu"></i>
        </button>	
    </div>								
    <ul class="menu">
        <li><a href="#"><i data-feather="underline"></i> UI ELement</a></li>
        <li><a href="#"><i data-feather="credit-card"></i> Cards</a></li>
        <li><a href="#"><i data-feather="box"></i> Extra Components</a></li>
        <li><a href="#"><i data-feather="grid"></i> Widgets</a></li>
        <li class="dropdown">
            <a href="#"><i data-feather="list"></i> Multi Level</a>
            <ul class="dropdown-content">
                <li><a href="#">Level 1</a></li>
                <li><a href="#">Level 1</a></li>
                <li class="dropdown">
                    <a href="#">Dropdown 2</a>
                    <ul class="dropdown-content">
                        <li><a href="#">Level 2</a></li>
                        <li><a href="#">Level 2</a></li>
                        <li class="dropdown">
                            <a href="#">Dropdown 3</a>
                            <ul class="dropdown-content">
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>   
                            </ul>                                 
                        </li>
                        <li><a href="#">Level 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Level 1</a></li>
                <li><a href="#">Level 1</a></li>
            </ul>
        </li>
        <li><a href="#"><i data-feather="user"></i> Authentication</a></li>
    </ul>

    <ul class="attributes">
        <li><a href="#"><i class="icon" data-feather="facebook"></i></a></li>
        <li><a href="#"><i class="icon" data-feather="twitter"></i></a></li>
        <li><a href="#"><i class="icon" data-feather="instagram"></i></a></li>
    </ul>
</nav>

Javascript

$('nav').coreNavigation({
    layout: "sidebar",
    responsideSlide: true, // true or false
    dropdownEvent: "accordion",
    mode: 'fixed'
});

feather.replace()

CSS

nav .wrap-core-nav-list {
	background: #fff;
}
nav .nav-header {
	background: #fff;
	padding: 30px 25px;
}
nav .nav-header .brand {
	display: block;
	position: relative;
	width: 170px;
	padding: 0 !important;
}
nav .nav-header .brand img {
	width: 100%;
}
nav .menu{
	display: block;
}
nav .menu li a {
	display: block;
	padding: 20px 30px 20px 60px;
	text-decoration: none;
	color: #3a3a3a;
	position: relative;
}
nav .menu li a:hover {
	color: #e74c3c;
}

nav .menu li a .feather{
    width: 16px;
	height: 16px;
	position: absolute;
	top: 22px;
	left: 30px;
}

nav .attributes .feather{
	width: 18px;
	height: 18px;
}

/*
DROPDOWN STYLE
=========================== */
nav .menu li.dropdown > a::before{
    margin-left: 10px;
    content: '';
    border-top: solid 5px #a1aad1;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    float: right;
    position: relative;
    top: 8px;
}

nav .menu li.dropdown.open > a::before{
	border-top: 0;
	border-bottom: solid 5px #a1aad1;
}

nav .menu li.dropdown > .dropdown-content > li.dropdown > a::before{
	left: -13px;
}

nav .menu li.dropdown.open > a{
	color: #e74c3c;
	border: 0;
}

nav .menu > li.dropdown > .dropdown-content{
	border: 0 !important;
	border-top: solid 1px #efefef !important;
	border-bottom: solid 1px #efefef !important;
	padding-left: 45px !important;
}

nav .menu li.dropdown .dropdown-content{
	background: #fafafa;
}

nav .menu li.dropdown .dropdown-content a{
	border: 0;
}
/* =========================== */

.section{
	padding: 100px 0;
	border-top: solid 1px #efefef;
}

.container {
	padding-right: 30px;
	padding-left: 30px;
	margin-right: auto;
	margin-left: auto;
}

@media(min-width:992px){
	nav{
		box-shadow: 0 0 20px 0 rgba(62,28,131,0.1);
	}

	.nav-sidebar{
		overflow: auto;
		padding-bottom: 71px;
	}

	.wrap-core-nav-list{
		display: block;
		margin-top: 100px;
		padding: 0 !important;
	}

	nav .menu > li > a{
		border-bottom: solid 1px #efefef;
	}

	nav .menu > li:first-child > a{
		border-top: solid 1px #efefef;
	}

	nav .attributes{
		border-top: solid 1px #dfdfdf;
		border-right: solid 1px #dfdfdf;
		background: #fff;
		padding: 5px 20px;
		text-align: center;
	}
}

@media (max-width: 992px) {
	nav .nav-header {
		padding: 0;
		min-height: 60px;
		margin-bottom: 0;
		border-bottom: solid 1px #efefef;
   }
	nav .nav-header .brand {
		margin: 0 auto 5px;
		float: none;
		display: block;
		width: 170px;
		position: relative;
		top: 17px;
   }
	nav .nav-header .brand img {
		width: 100%;
   }
	nav .nav-header .toggle-bar {
		font-size: 18px;
		position: absolute;
		top: 17px;
		left: 15px;
   }
	nav .menu {
		border-bottom: solid 1px #efefef;
   }
   	nav .menu > li > a{
		border-bottom: solid 1px #efefef;
	}

	nav .attributes li a{
		padding: 19px 4px !important;
	}

	nav .attributes .feather{
		width: 16px;
		height: 16px;
	}

	.container {
		padding-right: 15px;
		padding-left: 15px;
	}
}