Coming Soon

We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.

Just a demo

The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.

Dropnav

The Dropnav component initializes all dropdowns in a navigation with the same options, so they don’t have to be initialized individually. All dropdowns within the dropnav are aim-aware. This means the dropdowns stay open as long as the mouse pointer moves towards the dropdown. An additional delay ensures that dropdowns stay open even if the mouse pointer shortly moves in another direction. In hover mode dropdowns close immediately if another menu item is hovered.

Usage

Note If you are not using Tailwind CSS, you can skip this step. On your tailwind.config.js file, add the Dropnav component within the ui() plugin.

import ui from "franken-ui";
 
ui({
    components: {
        dropnav: {
            hooks: {}
        }
    }
}),

The Dropnav component consists of a number of toggles and their related dropdowns. Add the uk-dropnav attribute to a list element which contains the toggles or its parent container element. Use the Dropdown component by adding the .uk-dropdown class to the dropdowns and the .uk-dropdown-nav class to navs inside the dropdown.

The Dropnav toggles are styled through other components, some of which will be shown here.

<ul uk-dropnav>
  <li>
    <a href=""></a>
    <div class="uk-dropdown">
      <ul class="uk-dropdown-nav uk-nav">
        ...
      </ul>
    </div>
  </li>
</ul>

In this example we are using the Subnav component.

Copy to clipboard
  • <nav uk-dropnav>
  <ul class="uk-subnav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>

Dropbar

A dropbar extends to the full width of the dropnav and displays the dropdown without its default styling. To place dropdowns inside such a dropbar, add the dropbar: true option to the uk-dropnav. Optionally, use dropbar-anchor option to select after which element the dropbar will be injected into the markup.

<nav uk-dropnav="dropbar: true">...</nav>
Copy to clipboard
  • <nav uk-dropnav="dropbar: true">
  <ul class="uk-subnav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li>
      <a href>Item</a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <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="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href>Item</a>
      <div class="uk-dropdown uk-width-large">
        <div class="uk-child-width-1-2" uk-grid>
          <div>
            <ul class="uk-dropdown-nav uk-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <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="#">Item</a></li>
            </ul>
          </div>
          <div>
            <ul class="uk-dropdown-nav uk-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <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="#">Item</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

Click mode

A parent item inside the dropnav can be enabled by either hovering or clicking the toggle. Just add the mode: click option to the uk-dropnav attribute.

<nav uk-dropnav="mode: click">...</nav>
Copy to clipboard
  • <nav uk-dropnav="mode: click">
  <ul class="uk-subnav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>

Alignment

By default, the dropdowns are positioned below the dropbar item and are aligned to the left. To change the alignment, set the align option to the uk-dropbar attribute.

PositionDescription
leftAligns the dropdowns to the left.
rightAligns the dropdowns to the right.
centerAligns the dropdowns to the center.
<nav uk-dropbar="align: center">...</nav>
Copy to clipboard
  • <nav uk-dropnav="align: center">
  <ul class="uk-flex-center uk-subnav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>

Target

By default, the dropdowns are aligned to their toggle item. To position the dropdown to a different element, just add target: SELECTOR option to the uk-dropbar attribute.

<nav uk-dropbar="target: !.uk-section">...</nav>
Copy to clipboard
  • <div class="uk-section uk-section-small uk-section-muted">
  <nav uk-dropnav="target: !.uk-section; align: center">
    <ul class="uk-subnav">
      <li class="uk-active"><a href="#">Active</a></li>
      <li>
        <a href>Parent</a>
        <div class="uk-drop uk-dropdown">
          <ul class="uk-dropdown-nav uk-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <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="#">Item</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href>Parent</a>
        <div class="uk-dropdown uk-width-large">
          <div class="uk-child-width-1-2" uk-grid>
            <div>
              <ul class="uk-dropdown-nav uk-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <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="#">Item</a></li>
              </ul>
            </div>
            <div>
              <ul class="uk-dropdown-nav uk-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <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="#">Item</a></li>
              </ul>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</div>

Stretch

To stretch a dropdown, use the Drop component and its stretch option. In the following example the dropdown is aligned to the boundary of the dropnav.

<nav uk-dropnav="boundary: true; stretch: x; flip: false">...</nav>
Copy to clipboard
  • <nav uk-dropnav="boundary: true; stretch: x; flip: false">
  <ul class="uk-subnav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li>
      <a href>Parent</a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <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="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href>Parent</a>
      <div class="uk-drop uk-dropdown">
        <div class="uk-child-width-1-2" uk-grid>
          <div>
            <ul class="uk-dropdown-nav uk-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <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="#">Item</a></li>
            </ul>
          </div>
          <div>
            <ul class="uk-dropdown-nav uk-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <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="#">Item</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

Parent icon

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

<ul uk-dropnav>
  <li>
    <a href="">Parent <span class="ml-2" uk-drop-parent-icon></span></a>
    <div class="uk-dropdown">...</div>
  </li>
</ul>
Copy to clipboard
  • <nav uk-dropnav>
  <ul class="uk-subnav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>

Dropnav and tab

The dropnav is easily applied to the Tab component.

<nav uk-dropnav>
  <ul class="uk-tab">
    ...
  </ul>
  <nav></nav>
</nav>
Copy to clipboard
  • <nav uk-dropnav>
  <ul class="uk-tab">
    <li class="uk-active"><a href="#">Active</a></li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href
        >Parent <span class="uk-margin-small-left" uk-drop-parent-icon></span
      ></a>
      <div class="uk-drop uk-dropdown">
        <ul class="uk-dropdown-nav uk-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>

Available hooks

Learn more about using hooks.

Hook NameAffected Classes
hook-misc*

Component options

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

OptionValueDefaultDescription
alignStringleftDropdown alignment (left, right, center).
dropbar BooleanfalseEnable or disable dropbar behavior.
dropbar-anchorCSS selectorfalseIf set, dropbar will be inserted after the anchor element.
stretchBoolean, StringfalseStretch dropdown on both (true) or given axis (x, y).
modeStringclick, hoverComma-separated list of dropdown trigger behavior modes (click, hover).
delay-showNumber0Delay time in hover mode before a dropdown is shown in ms.
delay-hideNumber800Delay time in hover mode before a dropdown is hidden in ms.
boundaryCSS selectortrueThe area the dropdown can’t exceed causing it to flip and shift. By default, the nearest scrolling ancestor.
targetBoolean, CSS selectorfalseThe element the dropdown is positioned to (true for window).
target-xBoolean, CSS selectorfalseThe element’s X axis the dropdown is positioned to (true for window).
target-yBoolean, CSS selectorfalseThe element’s Y axis the dropdown is positioned to (true for window).
offsetNumber0The dropdown 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 dropdown 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 dropdown should be appended in the DOM.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.dropnav(element, options);

Events

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

NameDescription
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 after an item’s hide animation has started.
hiddenFires after an item is hidden.

Accessibility

The Dropnav component adheres to the Disclosure Navigation Menu WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA states and properties.

  • The nav items and toggle items have the aria-expanded state and the aria-haspopup property.
  • The toggle items also have the aria-label property.

Keyboard interaction

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

  • The tab or shift+tab keys place focus inside or outside the dropnav.
  • The left/right arrow keys navigate through the dropnav items. In hover mode the dropdown will open automatically. If the focus is on the last item, it moves to the first item.
  • The enter or space keys open and close the dropdown of the focused dropnav item.
  • The up/down arrow keys navigates through the nav items in a dropdown. If the focus is on the last item, it moves to the first item.
  • The esc key closes any dropdown even if focus has moved to another element.

Internationalization

The Toggle Item component uses the following translation strings. Learn more about translating components.

KeyDefaultDescription
labelOpen Menuaria-label attribute.