Example

Markup

NOTE If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports. Just add the data-uk-margin attribute from the Utility component to their parent element.

Example

Markup

A button can be used to trigger a dropdown menu from the Dropdown component. Just add the .uk-button-dropdown class and the data-uk-dropdown attribute to a <div> element that contains the button and the dropdown itself.

Markup

<!-- This is the container enabling the JavaScript --><divclass="uk-button-dropdown"data-uk-dropdown><!-- This is the button toggling the dropdown --><buttonclass="uk-button">...</button><!-- This is the dropdown --><divclass="uk-dropdown uk-dropdown-small"><ulclass="uk-nav uk-nav-dropdown"><li><ahref="">...</a></li><li><ahref="">...</a></li></ul></div></div>

Button group with dropdowns

Use button groups to split buttons into a standard action on the left and a dropdown toggle on the right. Just wrap a <div> element around the button and the dropdown and add the data-uk-dropdown="{mode:'click'}" attribute. Of course, a dropdown can also be applied to a button within a button group.

Markup

<divclass="uk-button-group"><!-- This is a button --><buttonclass="uk-button">...</button><!-- This is the container enabling the JavaScript --><divdata-uk-dropdown="{mode:'click'}"><!-- This is the button toggling the dropdown --><ahref=""class="uk-button">...</a><!-- This is the dropdown --><divclass="uk-dropdown uk-dropdown-small"><ulclass="uk-nav uk-nav-dropdown"><li><ahref="">...</a></li><li><ahref="">...</a></li></ul></div></div></div>