Material Design Lite navigation

material-design-lite
Matt P picture Matt P · Jul 10, 2015 · Viewed 14.1k times · Source

How can I make submenu items in the navigation? 

<!-- Navigation -->
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
  </nav>

I can't use <ul> <li> with it. What is the correct class?

Answer

sam picture sam · Jul 11, 2015

MDL doesn't seem to support sub menus natively just yet. However there are classes for menus you can use as sub menus:

http://www.getmdl.io/components/index.html#menus-section

So in your code you might look like this: 

<!-- Left aligned menu below button -->
<nav class="mdl-navigation">
  <a id="submenu" class="mdl-navigation__link" href="#">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
</nav>

<!-- sub menu only visible when clicked on the link above -->
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
    for="submenu">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

Make sure to have # inside your href.

Related questions

Centered form with material design lite

I am looking for an easy to get a login form centered on the screen using Google's Material Design Lite library. I've been through a number of iterations and this is the best I've come up with: <div class="…

Read More
How to format select box with Material Design Lite?

I've read through the Components listing and read through the CSS provided, but I don't see any mention of select boxes - just regular inputs; text, radio, checkbox, textarea, etc. How do you use Material Design Lite with a select …

Read More
How to make an Angular Material table responsive

I have a simple table with numerous columns, and I would like the columns to shrink automatically when sizing the browser window. The table-responsive works with Bootstrap, but I am looking for something similar for Angular Material. I am trying …

Read More