Drop

Position any element in relation to another element.

The Drop component is aim-aware. This means the drop stays open as long as the mouse pointer moves towards the drop. An additional delay ensures that the drop stays open even if the mouse pointer shortly moves in another direction. A drop closes immediately if another menu item is hovered.

Usage

Any content, like a button, can toggle the drop component. Just add the uk-drop attribute to a block element following the toggle.

<button type="button"></button>
<div uk-drop></div>

To group the toggle and the dropdown, just wrap them with a container element and add the .uk-inline class from the Utility component.

<div class="uk-inline">
  <button type="button"></button>
  <div uk-drop></div>
</div>

Note The Drop component has no default styling. In this example, we’ve used a card from the Card component for visualization.

Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="uk-inline">
      <button class="uk-button uk-button-default" type="button">
        Hover, Click
      </button>
      <div class="uk-card uk-card-body uk-card-default uk-drop" uk-drop>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>

Mode

By default, the drop is toggled on hover and on click. Set the mode option to change the toggle behavior.

ModeDescription
click,hoverToggle drop on click and hover.
clickToggle drop on click only.
hoverToggle drop on hover only.
<div uk-drop="mode: click"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="uk-inline">
      <button class="uk-button uk-button-default" type="button">Hover</button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="mode: hover"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>
    
    <div class="uk-inline">
      <button class="uk-button uk-button-default" type="button">Click</button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="mode: click"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>

Parent icon

To create a parent icon, just add the uk-drop-parent-icon attribute to a <span> element.

<button type="button">Parent <span uk-drop-parent-icon></span></button>
<div uk-drop="mode: click"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="uk-inline">
      <button class="uk-button uk-button-default" type="button">
        Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span>
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="mode: click"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>

Width and Grid

You can place a grid from the Grid component inside a drop. Just wrap the content with a <div> element and add the uk-grid attribute. If the grid should stack automatically whenever the drop no longer fits its container, just add the .uk-drop-grid class.

<div class="uk-width-large" uk-drop>
  <div class="uk-child-width-1-2@m uk-drop-grid" uk-grid></div>
</div>

Use one of the classes from the Width component to adjust the drop’s width.

Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <button class="uk-button uk-button-default" type="button">Hover</button>
    <div
      class="uk-card uk-card-body uk-card-default uk-drop uk-width-large"
      uk-drop
    >
      <div class="uk-child-width-1-2@m uk-drop-grid" uk-grid>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt.
        </div>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt.
        </div>
      </div>
    </div>

Position

By default, the drop is positioned below the toggle. To change its position, set the pos option to the uk-drop attribute. The first part of the value refers to the side where the drop is positioned, while the second part defines its alignment to the toggle.

PositionDescription
top-leftPositions the drop above the toggle and aligns it to the left.
top-centerPositions the drop above the toggle and aligns it to the center.
top-rightPositions the drop above the toggle and aligns it to the right.
bottom-leftPositions the drop below the toggle and aligns it to the left.
bottom-centerPositions the drop below the toggle and aligns it to the center.
bottom-rightPositions the drop below the toggle and aligns it to the right.
left-topPositions the drop to the left of the toggle and aligns it to the top.
left-centerPositions the drop to the left of the toggle and aligns it to the center.
left-bottomPositions the drop to the left of the toggle and aligns it to the bottom.
right-topPositions the drop to the right of the toggle and aligns it to the top.
right-centerPositions the drop to the right of the toggle and aligns it to the center.
right-bottomPositions the drop to the right of the toggle and aligns it to the bottom.
<div uk-drop="pos: top-left"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="uk-inline">
      <button class="uk-button uk-button-default" type="button">Top Right</button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: top-right"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>
    
    <div class="uk-inline">
      <button class="uk-button uk-button-default" type="button">
        Bottom Center
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-center"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>
    
    <div class="uk-inline">
      <button class="uk-button uk-button-default" type="button">Right Top</button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: right-top"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>

Boundary

By default, the drop automatically changes its positions if it exceeds the viewport or any other parent scrolling ancestor. It will flip its position to the other side to prevent it from covering the toggle and shift its alignment to fit into the viewport. To set a different boundary other than the scrolling ancestor, just add the boundary: SELECTOR option to the uk-drop attribute using a selector for the boundary. To set a boundary on one axis only, use boundary-x: SELECTOR or boundary-y: SELECTOR.

<div class="my-class">
  <button type="button"></button>
  <div uk-drop="boundary: !.my-class"></div>
</div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="boundary uk-height-medium uk-placeholder uk-panel">
      <button class="uk-button uk-button-default uk-float-left" type="button">
        Bottom Right
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-right; boundary: !.boundary"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    
      <button class="uk-button uk-button-default uk-float-right" type="button">
        Bottom Left
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-left; boundary: !.boundary"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>

Shift and flip

To disable automatic shifting and flipping, add the shift: false or flip: false option to the uk-drop attribute.

<div uk-drop="shift: false; flip: false"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="boundary uk-height-medium uk-placeholder uk-panel">
      <button class="uk-button uk-button-default uk-float-left" type="button">
        Bottom Right
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-right; boundary: !.boundary; shift: false; flip: false"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    
      <button class="uk-button uk-button-default uk-float-right" type="button">
        Bottom Left
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-left; boundary: !.boundary; shift: false; flip: false"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>

Auto update

By default, the drop repositions on scrolling. To disable dynamic positioning, add auto-update: false option to the uk-drop attribute. The drop will only be positioned once when opened.

<div uk-drop="auto-update: false"></div>

Target

By default, the drop is aligned to its toggle. To position the drop to a different element, just add target: SELECTOR option to the uk-drop attribute. To change just the side where the drop is positioned or the alignment to another element, use target-x: SELECTOR or target-y: SELECTOR.

<div class="my-class">
  <button type="button"></button>
  <div uk-drop="target: !.my-class"></div>
</div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="target uk-height-medium uk-placeholder uk-panel">
      <button class="uk-button uk-button-default uk-float-left" type="button">
        Bottom Left
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-left; target: !.target"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    
      <button class="uk-button uk-button-default uk-float-right" type="button">
        Bottom Right
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-right; target: !.target"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>

Inset

By default, the drop is positioned outside the toggle. To change the position to the inside, add the inset: true option to the uk-drop attribute. This option should only be used if the target option is also set so the drop doesn’t cover its toggle.

<div uk-drop="target: .my-class; inset: true"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="target uk-height-medium uk-placeholder uk-panel">
      <button class="uk-button uk-button-default uk-float-left" type="button">
        Bottom Left
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-left; target: !.target; inset: true"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    
      <button class="uk-button uk-button-default uk-float-right" type="button">
        Bottom Right
      </button>
      <div
        class="uk-card uk-card-body uk-card-default uk-drop"
        uk-drop="pos: bottom-right; target: !.target; inset: true"
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </div>
    </div>

Stretch

To stretch the drop to fill the size of its closest scrolling ancestor, add the stretch: true option to the uk-drop attribute. To only stretch to one axis, use stretch: x or stretch: y. If the boundary option is set, the drop stretches to the defined boundary.

<div uk-drop="stretch: true"></div>
Copy to clipboard
  • <nav class="uk-navbar-container" uk-navbar>
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li>
            <a href>Hover</a>
            <div
              class="uk-drop uk-navbar-dropdown uk-padding-small"
              uk-drop="boundary: !.uk-navbar; stretch: x; flip: false"
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt.
            </div>
          </li>
        </ul>
      </div>
    </nav>

Animation

Apply one or more animations to the dropdown by adding the animation: uk-animation-* option with one of the classes from the Animation component. You can also determine the animation’s duration. Just add the duration option with a value in milliseconds. Set animate-out: true to also show an animation when closing the drop.

<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <button class="uk-button uk-button-default" type="button">Hover</button>
    <div
      class="uk-card uk-card-body uk-card-default uk-drop"
      uk-drop="animation: uk-animation-slide-top-small; animate-out: true"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt.
    </div>

Alternatively, the Drop component has two additional animation types that are not covered by the Animation component. slide-* animations slide the drop and its content from a selected direction, while with the reveal-* animations, the content of the drop stays static and is revealed from a selected direction.

AnimationDescription
slide-topSlides the drop from the top.
slide-bottomSlides the drop from the bottom.
slide-leftSlides the drop from the left.
slide-rightSlides the drop from the right.
reveal-topReveals the drop from the top.
reveal-bottomReveals the drop from the bottom.
reveal-leftReveals the drop from the left.
reveal-rightReveals the drop from the right.
<div uk-drop="animation: slide-top; animate-out: true"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <div class="uk-margin" uk-margin>
      <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Top</button>
        <div
          class="uk-card uk-card-body uk-card-default uk-drop"
          uk-drop="animation: slide-top; animate-out: true; duration: 700"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt.
        </div>
      </div>
    
      <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">
          Reveal Top
        </button>
        <div
          class="uk-card uk-card-body uk-card-default uk-drop"
          uk-drop="animation: reveal-top; animate-out: true; duration: 700"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt.
        </div>
      </div>
    
      <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">
          Slide Left
        </button>
        <div
          class="uk-card uk-card-body uk-card-default uk-drop"
          uk-drop="animation: slide-left; animate-out: true; duration: 700"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt.
        </div>
      </div>
    
      <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">
          Reveal Left
        </button>
        <div
          class="uk-card uk-card-body uk-card-default uk-drop"
          uk-drop="animation: reveal-left; animate-out: true; duration: 700"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt.
        </div>
      </div>
    </div>

Offset

To define a custom offset between the drop and its toggle, add the offset option with a value in pixels.

<div uk-drop="offset: 80"></div>
Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
  • <button class="uk-button uk-button-default" type="button">Hover</button>
    <div class="uk-card uk-card-body uk-card-default uk-drop" uk-drop="offset: 80">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt.
    </div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
toggleCSS selector- *CSS selector for the element to be used as toggle. By default, the preceding element.
posStringbottom-leftDrop position.
stretchBoolean, StringfalseStretch drop on both (true) or given axis (x, y).
modeStringclick, hoverComma-separated list of drop trigger behavior modes (click, hover).
delay-showNumber0Delay time in hover mode before a drop is shown in ms.
delay-hideNumber800Delay time in hover mode before a drop is hidden in ms.
auto-updateBooleantrueDisable dynamic positioning while scrolling by setting this option to false.
boundaryCSS selectorfalseThe area the drop can’t exceed causing it to flip and shift. By default, the nearest scrolling ancestor.
boundary-xCSS selectorfalseThe area on the x-axis the drop can’t exceed causing it to flip and shift.
boundary-yCSS selectorfalseThe area on the y-axis the drop can’t exceed causing it to flip and shift.
targetBoolean, CSS selectorfalseThe element the drop is positioned to (true for window).
target-xBoolean, CSS selectorfalseThe element’s X axis the drop is positioned to (true for window).
target-yBoolean, CSS selectorfalseThe element’s Y axis the drop is positioned to (true for window).
insetBooleanfalsePosition inside its target.
flipBooleantrueFlip the drop along the main axis if it overflows the boundary.
shiftBooleantrueShift the drop along the cross axis if it overflows the boundary.
offsetNumber0The drop offset.
animationStringuk-animation-fadeSpace-separated names of animations. Comma-separated for animation out.
animate-outBooleanfalseUse animation when closing the drop.
bg-scrollBooleantrueAllow background scrolling while drop is opened.
close-on-scrollBooleanfalseClose the drop on scrolling a parent scroll container.
durationNumber200The animation duration.
containerBooleanfalseDefine a target container via a selector to specify where the drop should be appended in the DOM.

pos is the Primary option, and its key may be omitted if it’s the only option in the attribute value.

<span uk-drop="top-left"></span>

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.drop(element, options);

Events

The following events will be triggered on elements with this component attached:

NameDescription
toggleFires before an item is toggled.
beforeshowFires before an item is shown. Can prevent showing by calling preventDefault() on the event.
showFires after an item is shown.
shownFires after the item’s show animation has completed.
beforehideFires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hideFires before an item is hidden.
hiddenFires after an item is hidden.
stackFires when the drop-stackclass is applied.

Methods

The following methods are available for the component:

Show

UIkit.drop(element).show();

Shows the drop.

Hide

UIkit.drop(element).hide(delay);

Hides the drop.

NameTypeDefaultDescription
delayBooleantrueDelay hiding the drop.

Accessibility

The Drop component adheres to the Menu Button WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.

  • The toggle has the button role, the aria-expanded state and the aria-haspopup property.

Keyboard interaction

The Drop component can be accessed through keyboard using the following keys.

  • The enter or space keys open and close the drop.
  • The esc key closes the drop even if focus has moved to another element.

Theme development

On your tailwind.config.js file, add the Drop component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        drop: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*