sidenav-navigation-list-example-html.html

<span class="hljs-tag">&lt;<span class="hljs-name">md-sidenav-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-sidenav-navigation-list-container"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">md-sidenav</span> #<span class="hljs-attr">sidenav</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"side"</span> <span class="hljs-attr">opened</span>=<span class="hljs-string">"true"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">md-toolbar</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"primary"</span>&gt;</span>Title for the app<span class="hljs-tag">&lt;/<span class="hljs-name">md-toolbar</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">md-nav-list</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">md-list-item</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">"let link of links"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">md-line</span>&gt;</span>{{ link.name }}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>

      <span class="hljs-tag">&lt;/<span class="hljs-name">md-list-item</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">md-nav-list</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">md-sidenav</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-scrolling-content"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
    Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum
    etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor
    id wisi turpis magna aliquam magna.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">md-raised-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"primary"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"sidenav.toggle()"</span>&gt;</span>
      Sidenav Toggle
    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">md-sidenav-container</span>&gt;</span>