"Sidebar Menu BS4 CSS"
Bootstrap 4.0.0 Snippet by sharkness

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> </head> <body> <div class="container-fluid"> <div class="row"> <div id="admin-sidebar" class="col-md-2 p-x-0 p-y-3"> <ul class="sidenav admin-sidenav list-unstyled"> <li><a href="#">NavLink 1</a></li> <li><a href="#">NavLink 2</a></li> <li><a href="#">NavLink 3</a></li> <li><a href="#">NavLink 4</a></li> <li><a href="#">NavLink 5</a></li> <li><a href="#">NavLink 6</a></li> </ul> </div> <!-- /#admin-sidebar --> <div id="admin-main-control" class="col-md-10 p-x-3 p-y-1"> <div class="content-title m-x-auto"> <i class="fa fa-dashboard"></i> Dashboard </div> <p class="display-4">Dashboard-y Things</p> <p class="text-primary">This is where one might find all sorts of dashboard-y goodness...</p> <p class="text-success">Instead, you're seeing Lorem Gibson, which is cooler than Lorem Ipsum, but a little less cool than Lorem Jackson.</p> <p class="text-muted">Mostly, you'll find that I'm just finding excuses to use BS4's crazy cool classes...</p> <p class="text-danger">Don't be distracted by all of this filler. The cool stuff is in the sidebar nav!</p> <p>Military-grade dissident concrete knife RAF warehouse stimulate wonton soup sentient lights sub-orbital modem jeans. Ablative engine kanji sentient order-flow vehicle corporation plastic. Assassin Shibuya woman camera nano-network corrupted cartel boy. Tank-traps into youtube footage bicycle towards cyber-dissident. Futurity bridge modem skyscraper shanty town nodal point hotdog boat cartel A.I. DIY. Systema modem j-pop claymore mine singularity uplink tube systemic 3D-printed </p> </div> <!-- /#admin-main-control --> </div> <!-- /.row --> </div> <!-- /.container-fluid --> </body>
@import 'https://fonts.googleapis.com/css?family=Raleway:300,400'; body { font-family: 'Raleway:300', sans-serif } .admin-sidenav { width: auto; height: auto; margin-left: 0px; } .admin-sidenav a { text-decoration: none; } .admin-sidenav li { text-align: justify; padding: .5rem; padding-left: 1rem; -webkit-transition: all .2s linear; transition: all .2s linear; background-color: #000; border: 1px solid #333; } .admin-sidenav li a { color: #fff; } .admin-sidenav li a:active { border-color: #02d3f5; } .admin-sidenav li:hover { border-radius: 0 .5rem .5rem 0; border-color: #02d3f5; -webkit-transform: translate(30px, 0px); transform: translate(30px, 0px); background: -webkit-linear-gradient(left, #006a7b, #002340); background: linear-gradient(to right, #006a7b, #002340); } .admin-sidenav li:active { border-color: #02d3f5; }

Related: See More

Material Kit React
sidebar.rtl
Bootstrap NavBar Menu Dropdowns
Content + Sidebar BS4

Questions / Comments: