mdb-ui-kit/docs/4.0/material-design/menus.md

layout	title	group
docs	Menus	material-design

Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdowns/), but these are also known as menus in the Material Design specification.

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

Styles

Icon with buttons

{% example html %}

more_vert

Action Another action Another action

{% endexample %}

Icon with links

{% example html %}

more_vert

Regular link Disabled link Another link

{% endexample %}

Small fab

{% example html %}

more_vert

Action Another action

{% endexample %}

Default fab

{% example html %}

more_vert

Action Another action

{% endexample %}

Default button

{% example html %}

Dropdown

Action Another action Something else here

{% endexample %}

Alignment

Lower left side

{% example html %}

more_vert

Action Another action Disabled action

Separated link

{% endexample %}

Lower right side

dropdown usage misaligned - see upstream Bootstrap issue #18552. Use btn-group instead until issue is resolved (next example). {% example html %}

more_vert

Action Another action Disabled action

Separated link

{% endexample %}

btn-group usage works fine in this alignment. {% example html %}

more_vert

Action Another action Disabled action

Separated link

{% endexample %}

Widths

Minimum width

{% example html %}

more_vert

A B

{% endexample %}

Maximum width

{% example html %}

more_vert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero. Another action

{% endexample %}