Search code examples
cssmaterialize

Mobile Tab Navigation

I would like to achieve a mobile menu which is always visible on the bottom of my page. I don't know if there is a specific name for such menus but I've found a page which does exactly this menu: enter image description here

What is the best way to achieve exactly this for tablet and smaller devices using materialize?

Solution

  • There is something called a Toolbar in Materialize.

      <div class="fixed-action-btn toolbar">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
      <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li>
      <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li>
      <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li>
      <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>

    But it's not the same what you are looking for. You have to modify this or you need to create your own.

    Fab for toolbar: http://materializecss.com/buttons.html