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

0 vote101 views1 answer
Css class and attribute selector
CSS
36 votes159 views6 answers
Css gradient
CSS
0 vote137 views1 answer
.sidebar { --offset: 2rem; flex-grow: 1; flex-basis: 300px; align-self: start; position: sticky; top: var(--offset); }
CSS
0 vote147 views1 answer
Wordpress how to change logo on a certain page with css
CSS
100 votes144 views2 answers
What is position property in css
CSS
0 vote152 views1 answer
Resctrict css to apply on div
CSS
1 vote151 views1 answer
Convert image in rounshape in css
CSS
6 votes141 views5 answers
Grepper shortcuts
CSS
19 votes133 views6 answers
Css font family
CSS
0 vote178 views1 answer
Name attribute css doesn't work
CSS