Material Design Lite – Menus

Material Design Lite – Menus : The Material Design Lite(MDL) Menu component is user interface that provides various options and select one of them. The material design menu options have animation effects when you click on it. It also provides functionality to enable and disable the options. Here in this tutorial we are going to explain how you can create different – different menus in material design lite. You can also use our demo to run and see the output.

Material Design Lite – Menus

Let us go step by step to learn how to create various types of menus in material design lite.

Lower Left Menu

You can create lower left menu in material design as below –

 <!-- Left aligned menu -->
<button id="dummy-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

If you run the above example it will produce output something like this –

Lower Right Menu

You can create lower right menu in material design as below –

 <!-- Right aligned menu -->
<button id="dummy-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

If you run the above example it will produce output something like this –

Top Left Menu

You can create Top Left menu in material design as below –

 
<!-- Left aligned menu on top -->
<button id="dummy-menu-top-left" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

If you run the above example it will produce output something like this –

Top Right Menu

You can create top right menu in material design as below –

 
<!-- Right aligned menu on top of button  -->
<button id="demo-menu-top-right" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

If you run the above example it will produce output something like this –