Dependencias
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
#Exemplo de uso
<div sidenav>
<img style="filter:invert(100%)" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" class="sidenav-image" alt="">
<div sidenav-item><i class="material-icons">directions_bike</i><span class="text">Usuário</span></div>
<div jump-bottom>
<div sidenav-item><i class="material-icons">account_circle</i><span class="text">Pessoa</span></div>
</div>
</div>
<div side-container>
<h1>Usuários</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum cum quos repellendus eos saepe sed tempore incidunt est similique officia ut voluptatem, dolores hic ex aspernatur inventore qui fugit illo!
</div>