Search within TutorialsPark

MDL : Menus


How to use MDL - Material Design Lite to create Menus


Material Design Lite (MDL) : Menus

Material Design Lite(MDL) component menu component is used to create an user interface to enable users to select multiple options

The result of the selection initiates a change of setting, or other visual effects.There must be atleast two or more selectable options in a menu.

The Purpose of a menu is to get the user to select from a set of options, and is dismissed when a selection is made.The menu options can also be programmed to enable or disable an option based on requirement.

The Design , usage and placement of the menu has a very significant effect on the User Experience.


Material Design Lite(MDL) : Bottom-left and Bottom-right Aligned Menus

A MDL Menu us created using class mdl-menu to create a container to hold menu items.

To Align the Menu along bottom-Left side use class mdl-menu--bottom-left.

To Align the Menu along bottom-right side use class mdl-menu--bottom-right.

Example: Material Design Lite (MDL) Menu Aligned bottom-left and bottom-right

Give it a TRY! » Note:Based on the Requirement, users can use any material icons or even images


Material Design Lite(MDL) Menu : Aligned Lower-Left and Top-Right

To Align the Menu along top-Left side use class mdl-menu--top-left.

To Align the Menu along top-right side use class mdl-menu--top-right.

Example: Material Design Lite (MDL) Menu Aligned Lower-Left and Top-Right

Give it a TRY! » Note: A Primary theme color is selected as the color of the spinner.


Material Design Lite : Progress Bar Classes

MDL Class Description
mdl-button To create a container for progress bar.
mdl-button--icon To assign MDL behaviour to progress bar component
material-icons To apply animation effect to MDL progress bar.
mdl-menu To Create a Container for MDL Menu Component.
mdl-js-menu To Assign MDL behaviour to the menu bar
mdl-menu__item To Define each mdl option on the menu popup.
mdl-js-ripple-effect To apply a ripple effect to the option links within the menu
mdl-menu--top-left To position the menu above the button, and aligns the left edge of the menu with the button
mdl-menu--bottom-left To position the menu below the button, and aligns the left edge of the menu with the button
mdl-menu--top-right To position the menu above the button, and aligns the right edge of the menu with the button
mdl-menu-bottom-right To position the menu below the button, and aligns the right edge of the menu with the button