Call Us (800) 755 1000

Shortcodes

Dropdowns

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.

Button with dropdowns

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.



markup
[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]

NOTE To use a colored menu, add the uk-color style to the nav shortcode. In this case, the uikit dropdown menu will inherit the color of the site's dropdown menu, which is set via the template settings.




Button group with dropdowns

You can also use button groups to split buttons into a standard action on the left and a dropdown toggle on the right.



markup
[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]

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


markup
[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]

Our Location

world-map

Our offices are located all over the globe with multi-lingual assistants to help you out

Life is a series of natural and spontaneous changes. Don't resist them - that only creates sorrow. Let reality be reality.

Our Vision

visionWe build the web
Believe that life is worth living and your belief will help create the fact


visionWe strive to excel
The world owes you nothing. It was here first. If you don't like, change it

Popup Widget

Lorem ipsum dolor sit amet sectetur elit Donec sit amet nibh dolor vivamus non arcu sanctus est penatibus et magnis dis parturient montes consectetur eleifend tempus. Cum sociis natoque penatibus et magnis orem ipsum dolor sit amet sectetur adipiscing elit

Popup B Widget

Lorem ipsum dolor sit amet sectetur elit Donec sit amet nibh dolor vivamus non arcu sanctus est penatibus et magnis dis parturient montes consectetur eleifend tempus. Cum sociis natoque penatibus et magnis orem ipsum dolor sit amet sectetur adipiscing elit

Popup C Widget

Lorem ipsum dolor sit amet sectetur elit Donec sit amet nibh dolor vivamus non arcu sanctus est penatibus et magnis dis parturient montes consectetur eleifend tempus. Cum sociis natoque penatibus et magnis orem ipsum dolor sit amet sectetur adipiscing elit

Lorem ipsum dolor sit amet sectetur elit Donec sit amet nibh dolor vivamus non arcu sanctus est penatibus et magnis dis parturient montes consectetur eleifend tempus. Cum sociis natoque penatibus et magnis orem ipsum dolor sit amet sectetur adipiscing elit