<div class="uk-margin-large" data-uk-margin>
<div class="uk-button-group">
<button class="uk-button">Button</button>
<div data-uk-dropdown="{mode:'click'}">
<button class="uk-button"><i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown uk-dropdown-width-2">
<div class="uk-grid">
<div class="uk-width-1-2">
<ul class="uk-nav uk-nav-dropdown uk-panel">
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Separated item</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-2">
<ul class="uk-nav uk-nav-dropdown uk-panel">
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Separated item</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-primary">Primary</button>
<div data-uk-dropdown="{mode:'click'}">
<button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown uk-dropdown-small">
<ul class="uk-nav uk-nav-dropdown">
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Separated item</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-success">Success</button>
<div data-uk-dropdown="{mode:'click'}">
<button class="uk-button uk-button-success"><i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-dropdown">
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Separated item</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="uk-button-group">
<button class="uk-button uk-button-danger">Danger</button>
<div data-uk-dropdown="{mode:'click'}">
<button class="uk-button uk-button-danger"><i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-dropdown">
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Separated item</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<button class="uk-button" disabled>Disabled</button>
<button class="uk-button uk-button-link">Button link</button>
</div>