Elements - Sandal

English

- 8:00 am to 10:00 pm

### Talk to us now

+49 555 000 000

### Visit our offices

Mirage Plaza - Hamburg

### Send us an email

hello@sandal.com

### We are open all day

8:00 am to 10:00 pm daily

# Elements

## 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 `uk-button-dropdown` class 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 1
markup

    <div class="uk-button-dropdown" data-uk-dropdown>
      <a class="uk-button-default uk-button" href="#" target="_self">Dropdown 1 <i class="uk-icon-angle-down"></i></a>
      <div class="uk-dropdown">
        <ul class="uk-nav uk-nav-dropdown"><p></p>
          <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="#"><i class="uk-icon-envelope-o"></i> Menu Icon</a></li>
          <li><a href="#"><i class="uk-icon-heart-o"></i> Another Menu item</a></li>
          <li class="uk-nav-divider"></li>
          <li><a href="#">Separated item</a></li>
        </ul>
      </div>
    </div>

### 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.

Button
Button
markup

    <div class="uk-button-group">
      <a class="uk-button-success uk-button" href="#" target="_self">Button</a>
      <div class="" data-uk-dropdown>
        <a class="uk-button-success uk-button" href="#" target="_self"><i class="uk-icon-caret-down"></i></a>
        <div class="uk-dropdown">
          <ul class="uk-nav uk-nav-dropdown"><p></p>
            dropdown items go here
          </ul>
        </div>
      </div>
    </div>

The following is a list of possible class options that can be used in conjunction with the `uk-dropdown` class

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

    <div class="uk-button-group">
      <a class="uk-button-success uk-button" href="#" target="_self">Button</a>
      <div class="" data-uk-dropdown>
        <a class="uk-button-success uk-button" href="#" target="_self"><i class="uk-icon-caret-down"></i></a>
        <div class="uk-dropdown uk-color uk-dropdown-up uk-dropdown-center uk-dropdown-small">
          <ul class="uk-nav uk-nav-dropdown"><p></p>
            dropdown items go here
          </ul>
        </div>
      </div>
    </div>

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes