<!-- nav --> 
<ul id="dropdown" class="dropdown-content">
  <li><a href="#">La première</a></li>
  <li><a href="#">La deuxième</a></li>
  <li class="divider"></li>
  <li><a href="#">La troisième</a></li>
</ul>

<div class="navbar-fixed">

  <nav class="light-blue lighten-1 nav-extended" role="navigation">

    <div class="nav-wrapper container">

      <a id="logo-container" href="#" class="brand-logo">Logo</a>

      <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>

      <ul class="right hide-on-med-and-down">
        <li class="active"><a href="#">Lien1</a></li>
        <li><a href="#">Lien2</a></li>
        <li><a class="dropdown-trigger btn indigo" href="#" data-target="dropdown">Menu déroulant<i class="material-icons right">arrow_drop_down</i></a></li>      
      </ul>

    </div>

    <div class="nav-content container">
      <ul class="tabs tabs-transparent">
        <li class="tab"><a href="#element1">Element 1</a></li>
        <li class="tab"><a class="active" href="#element2">Element 2</a></li>
      </ul>
    </div>

  </nav>
</div>

<ul id="nav-mobile" class="sidenav">
  <li class="active"><a href="#">Lien1</a></li>
  <li><a href="#">Lien2</a></li>
</ul>
<!--nav-->  
(function($){
  $(function(){

    $('.dropdown-trigger').dropdown({ hover: false });

    $('.sidenav').sidenav();

  }); // end of document ready
})(jQuery); // end of jQuery name space

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.