[heading size=”h2″ style=”uk-module-title”]Dropdowns[/heading]
Dropdowns are a creative way to provide more options on a click or hover element. With Uikit dropdown component, you can attach the dropdown to couple of elements to enrich your UI composition.
[heading size=”h3″ style=”uk-module-title”]Button with dropdowns[/heading]
To create a button dropdown, wrap the [dropdown] shortcode around a button that you’d like to add a dropdown menu, then add the dropdowm markup right after the button. Additionally, you can add an arrow icon using the [icon] shortcode to depict a dropdown menu.
[dropdown style=”uk-button-dropdown”] [button style=”default” href=”#” target=”_self”]Dropdown 1 [icon style=”icon-angle-down”/][/button] [nav style=””]
- Menu item
- Menu item
- [icon style=”icon-envelope-o”/] Menu Icon
- [icon style=”icon-heart-o”/] Another Menu item
- Separated item
[/nav] [/dropdown] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][dropdown style=”uk-button-dropdown”] [button style=”default” href=”#” target=”_self”]Dropdown 1 [icon style=”icon-angle-down”/][/button] [nav style=””] <li><a href=”#”>Menu item</a></li> <li><a href=”#”>Menu item</a></li> <li class=”uk-nav-header uk-navbar-nav-subtitle”>Menu Heading<div>Subtitle possible</div></li> <li><a href=”#”>[icon style=”icon-envelope-o”/] Menu Icon</a></li> <li><a href=”#”>[icon style=”icon-heart-o”/] Another Menu item</a></li> <li class=”uk-nav-divider”></li> <li><a href=”#”>Separated item</a></li> [/nav] [/dropdown] [/code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Button group with dropdowns[/heading]
You can also use button groups to split buttons into a standard action on the left and a dropdown toggle on the right.
[button_group] [button style=”success” href=”#” target=”_self”]Button[/button] [dropdown style=””] [button style=”success” href=”#” target=”_self”][icon style=”icon-caret-down”/][/button] [nav style=””]
- Menu item
- Menu item
- [icon style=”icon-envelope-o”/] Menu Icon
- [icon style=”icon-heart-o”/] Another Menu item
- Separated item
[/nav][/dropdown] [/button_group] [button_group] [button style=”color” href=”#” target=”_self”]Button[/button] [dropdown style=””] [button style=”color” href=”#” target=”_self”][icon style=”icon-caret-down”/][/button] [nav style=””]
- Menu item
- Menu item
- [icon style=”icon-envelope-o”/] Menu Icon
- [icon style=”icon-heart-o”/] Another Menu item
- Separated item
[/nav][/dropdown] [/button_group] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][button_group] [button style=”color” href=”#” target=”_self”]split button[/button] [dropdown style=””] [button style=”color” href=”#” target=”_self”][icon style=”icon-angle-down”/][/button] [nav style=””] …menu items [/nav] [/dropdown] [/button_group] [/code] [line_break/]
The following is a list of possible style options for the [nav] dropdown menu
| style | Description |
|---|---|
uk-color |
Use the main menu color in the dropdown menu |
uk-dropdown-flip |
Aligns the dropdown menu to the right |
uk-dropdown-up |
Aligns the dropdown menu above the toggle |
uk-dropdown-center |
Centers the dropdown menu. |
uk-dropdown-small |
Set the dropdown to be smaller |
[badge style=”note uk-margin-top”]markup[/badge]
[code][button_group] [button style=”color” href=”#” target=”_self”]split button[/button] [dropdown style=””] [button style=”color” href=”#” target=”_self”][icon style=”icon-angle-down”/][/button] [nav style=”uk-color uk-dropdown-up uk-dropdown-center uk-dropdown-small”] …menu items [/nav] [/dropdown] [/button_group] [/code] [line_break/]