菜单

左对齐链接

要左对齐导航栏链接，只需向包含它们的 <ul> 添加一个 left 类。



  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo right">Logo</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

使徽标居中

徽标将在中小型屏幕上居中，但如果您希望徽标始终居中，请向 <a class="brand-logo"> 添加 center 类。如果您使用此功能，则必须确保链接不会重叠。



  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">Logo</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

活动项目

向 li 标签添加活动类以表示当前页面。



  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Logo</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

图标链接


您可以在链接中添加图标。对于仅图标的链接，您不需要任何其他类。只需弹出 i 标记，它就会起作用。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html"><i class="material-icons">search</i></a></li>
        <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
        <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
        <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
      </ul>
    </div>
  </nav>


要向文本链接添加图标，您需要根据您希望图标所在的位置向图标添加 left 或 right 类。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html"><i class="material-icons left">search</i>Link with Left Icon</a></li>
        <li><a href="badges.html"><i class="material-icons right">view_module</i>Link with Right Icon</a></li>
      </ul>
    </div>
  </nav>

按钮


您可以在链接中添加按钮。对于按钮，您不需要任何其他类。只需在 a 标记上弹出 .btn 类。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a class="waves-effect waves-light btn">Button</a></li>
        <li><a class="waves-effect waves-light btn">Button <i class="material-icons right">cloud</i></a></li>
        <li><a class="waves-effect waves-light btn-large">Large Button</a></li>
      </ul>
    </div>
  </nav>

扩展导航栏中的半路 FAB

向您的扩展导航栏添加一个半路 FAB。




  <nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a>A link</a></li>
        <li><a>A second link</a></li>
        <li><a>A third link</a></li>
      </ul>
    </div>
    <div class="nav-content">
      <span class="nav-title">Title</span>
      <a class="btn-floating btn-large halfway-fab waves-effect waves-light teal">
        <i class="material-icons">add</i>
      </a>
    </div>
  </nav>

搜索栏


您可以在导航栏中添加一个搜索表单。


  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label class="label-icon" for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

移动折叠按钮


当您的导航栏调整大小时，您会看到右侧的链接变成汉堡包图标 menu。请查看下面的示例以获取此功能。将整个 sidenav-trigger 行添加到您的 nav 中。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
  </ul>

初始化

将 sidenav-trigger 行包含到导航栏中后，您现在要做的就是初始化插件。以下示例假设您未修改上述示例中的类。如果您已修改，只需更改以下行中的选择器以匹配它。


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });