A menu button is a button that opens a menu. It is often styled as a typical push button with a
downward pointing arrow or triangle to hint that activating the button will display a menu.
The menu button has roles, attributes and behaviour as outlined in
WAI-ARIA Authoring Practices.
mdl-button
mdl-textfield
mdlext-bordered-fields
custom styled <div>
Sign in with ...
mdl-button--icon
Twitter
GitHub
G+
LinkedIn
Facebook
Menu buttons positioned left, middle and right, using textalign.
infoMenu item #1
help_outlineMenu item #2. A long text to check ellipsis overflow 0123456789radio
Menu item #3, disabledaccessibility
Menu item #IVbuild
Menu item #Vbuild
Menu item #VIbuild
Menu item #VIIbuild
Menu item #n
infoMenu item #1
help_outlineMenu item #2radio
Menu item #3, disabledaccessibility
Menu item #IVbuild
Menu item #Vbuild
Menu item #VIbuild
Menu item #VIIbuild
Menu item #VIIIbuild
Menu item #IXbuild
Menu item #Xbuild
Menu item #XIbuild
Menu item #XIIbuild
Menu item #XIIIbuild
Menu item #XIVbuild
Menu item #XVbuild
Menu item #XVIbuild
Menu item #XVIIbuild
Menu item #XVIIIbuild
Menu item #XIXbuild
Menu item #XXbuild
Menu item #n
infoMenu item #1
help_outlineMenu item #2radio
Menu item #3, disabledaccessibility
Menu item #IVbuild
Menu item #Vbuild
Menu item #VIbuild
Menu item #VIIbuild
Menu item #n
This menu button has WAIA roles and attributes coded in markup
X Small
Small
Medium
Large
X Large
XXX Large
A disabled menu button should do nothing
Menu item #1
Menu buttons inside a table. Menus placed inside and after the table element to verify
that positioning works as expected.
The box with green borders has overflow:hidden
Material
Quantity
Unit price
Acrylic (Transparent)
$2.90
Plywood (Birch)
$1.25
Laminate (Gold on Blue)
$2.35
This menu button has a menu with dark color theme, mdlext-dark-color-theme class
infoMenu item #1
help_outlineMenu item #2. A long text to check ellipsis overflow 0123456789radio