Material css sidebar

<nav> <!-- navbar content here  --> </nav>

  <ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

Source: materializecss.com

Similar codes

3 votes258 views1 answer
Rotate icon on click css
CSS
2 votes315 views1 answer
Autofit grid css
CSS
2 votes323 views3 answers
Css properties in html
CSS
48 votes285 views3 answers
Font-size
CSS
0 vote327 views1 answer
Index.css code not working in 000webhost
CSS
3 votes296 views1 answer
Change css to scss angular
CSS
23 votes308 views5 answers
Align item center flex
CSS
0 vote314 views2 answers
How to zoom picture on hover using css
CSS
0 vote382 views2 answers
Bootstrap 5 container
CSS Bootstrap
1 vote319 views2 answers
How to change highlight color on website
CSS