Navbar

Create a navigation bar with dropdown menus for the main site navigation.

This documentation is a work in progress.

The Navbar component initializes all dropdowns with the same options, so they don’t have to be initialized individually. All dropdowns within the navbar 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

The Navbar component consists of a navbar container, the navbar itself and one or more navigations.

ElementDescription
uk-navbarAdd this attribute to a <nav> element to define the Navbar component.
.uk-navbar-containerAdd this class to the same <nav> element or a parent element to add the navbar background style.
.uk-navbar-left
.uk-navbar-center
.uk-navbar-right		Add one of these classes to a <div> element to align the navigation.
.uk-navbar-navAdd this class to a <ul> element to create the navigation. Use <a> elements as menu items within the list.
.uk-parentAdd this class to indicate a parent menu item.
.uk-activeAdd this class to indicate an active menu item.
<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li class="uk-active"><a href=""></a></li>
      <li class="uk-parent"><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
</nav>
Copy to clipboard 
  • <nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li class="uk-active"><a href="#">Active</a></li>
      <li>
        <a href="#">Parent</a>
        <div class="uk-navbar-dropdown">
          <ul class="uk-nav uk-navbar-dropdown-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>
  </div>
</nav>

Neither the navbar, nor the navbar container have horizontal padding. To set the same horizontal padding as the rest of the page use the Container component.

<nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>…</div>
  </div>
</nav>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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>
      </div>
    </div>
  </div>
</nav>

Multiple navigations

You can place more than one navigation inside a navbar container. That way you can have a left-aligned, a centered and a right-aligned navigation inside the same navbar.

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">…</div>
  <div class="uk-navbar-center">…</div>
  <div class="uk-navbar-right">…</div>
</nav>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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>
      </div>

      <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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>
      </div>
    </div>
  </div>
</nav>

Transparent modifier

When using an image or a colored background for the hero section of your website, you might want to turn the navbar transparent. Just add the .uk-navbar-transparent class on the same element as the .uk-navbar-container class.

<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>…</nav>
Copy to clipboard 
  • <div class="uk-position-relative">
  <img src="/images/light.jpg" width="1800" height="1200" alt="" />
  <div class="uk-position-top">
    <nav class="uk-navbar-container uk-navbar-transparent">
      <div class="uk-container">
        <div uk-navbar>
          <div class="uk-navbar-left">
            <ul class="uk-navbar-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                  <ul class="uk-nav uk-navbar-dropdown-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>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Subtitle

To define a subtitle, create a <div> element inside an item’s <a> element. Add the .uk-navbar-subtitle class to another <div> element.

<li>
  <a href="">
    <div>
      …
      <div class="uk-navbar-subtitle"></div>
    </div>
  </a>
</li>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li class="uk-active">
            <a href="#">
              <div>
                Active
                <div class="uk-navbar-subtitle">Subtitle</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div>
                Parent
                <div class="uk-navbar-subtitle">Subtitle</div>
              </div>
            </a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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="#">
              <div>
                Item
                <div class="uk-navbar-subtitle">Subtitle</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Content item

You can also add custom content to the navbar, like text, icons, buttons or forms. Add the .uk-navbar-item class to a <div> element that serves as a container for your content.

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <a href="" class="uk-navbar-item uk-logo"></a>
    <ul class="uk-navbar-nav">
      …
    </ul>
    <div class="uk-navbar-item">…</div>
  </div>
</nav>

Add the .uk-logo class from the Utility component to an <a> or <div> element to indicate your brand.

Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <a class="uk-navbar-item uk-logo" href="#" aria-label="Back to Home"
          >Logo</a
        >

        <ul class="uk-navbar-nav">
          <li>
            <a href="#">
              <span class="uk-margin-small-right">
                <uk-icon icon="star"></uk-icon>
              </span>
              Features
            </a>
          </li>
        </ul>

        <div class="uk-navbar-item">
          <div>Some <a href="#">Link</a></div>
        </div>

        <div class="uk-navbar-item">
          <form action="javascript:void(0)">
            <input
              class="uk-input uk-width-small"
              type="text"
              placeholder="Input"
              aria-label="Input"
            />
            <button class="uk-button uk-button-default">Button</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</nav>

You can create a split menu with a centered logo. Just add the uk-navbar-center-left class to one navbar and the uk-navbar-center-right class to another within the same navbar container. This will keep your logo centered and align the menus to the left and right.

<div class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-center">
    <div class="uk-navbar-center-left">…</div>
    <a href="" class="uk-navbar-item uk-logo"></a>
    <div class="uk-navbar-center-right">…</div>
  </div>
</div>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-center">
        <div class="uk-navbar-center-left">
          <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
              <a href="#">Parent</a>
              <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-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>
          </ul>
        </div>
        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
        <div class="uk-navbar-center-right">
          <ul class="uk-navbar-nav">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

Toggle item

Add the .uk-navbar-toggle class and the uk-navbar-toggle-icon attribute to an <a> or <div> element to create an icon as a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an off-canvas navigation from the Offcanvas component or a modal from the Modal component.

<div class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <a class="uk-navbar-toggle" uk-navbar-toggle-icon href=""></a>
  </div>
</div>
Copy to clipboard 
  • <nav class="uk-margin uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
      </div>
    </div>
  </div>
</nav>

<nav class="uk-margin uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <a class="uk-navbar-toggle" href="#">
          <span uk-navbar-toggle-icon></span>
          <span class="uk-margin-small-left">Menu</span>
        </a>
      </div>
    </div>
  </div>
</nav>

To change the toggle icon from a menu icon to a close icon with a smooth animation, add the .uk-navbar-toggle-animate class.

<a
  class="uk-navbar-toggle-animate uk-navbar-toggle"
  uk-navbar-toggle-icon
  href=""
></a>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <a
          class="uk-navbar-toggle-animate uk-navbar-toggle"
          uk-navbar-toggle-icon
          href="#"
        ></a>
        <div class="uk-navbar-dropdown">
          <ul class="uk-nav uk-navbar-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

A navbar can contain a dropdown from the Dropdown component. Just add the .uk-navbar-dropdown modifier to the dropdown, so it fits perfectly into the navbar styling. Add the .uk-navbar-dropdown-nav class to navs inside the dropdown.

<ul class="uk-navbar-nav">
  <li>
    <a href=""></a>
    <div class="uk-navbar-dropdown">
      <ul class="uk-nav uk-navbar-dropdown-nav">
        …
      </ul>
    </div>
  </li>
</ul>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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></li>
        </ul>
      </div>
      <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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>
        </ul>
      </div>
    </div>
  </div>
</nav>

Click mode

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

<nav class="uk-navbar-container" uk-navbar="mode: click">…</nav>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar="mode: click">
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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>
      </div>
    </div>
  </div>
</nav>

Alignment

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

PositionDescription
leftAligns the dropdowns to the left.
rightAligns the dropdowns to the right.
centerAligns the dropdowns to the center.
<div uk-navbar="align: center"></div>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar="align: center">
      <div class="uk-navbar-center">
        <ul class="uk-navbar-nav">
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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>
        </ul>
      </div>
    </div>
  </div>
</nav>

Target

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

<nav class="uk-navbar-container" uk-navbar="target: !.uk-navbar">…</nav>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar="target: !.uk-navbar; align: center">
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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-navbar-dropdown uk-navbar-dropdown-width-2">
              <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
                <div>
                  <ul class="uk-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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>
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
              <div class="uk-drop-grid uk-child-width-1-3" uk-grid>
                <div>
                  <ul class="uk-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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>
      </div>

      <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
          <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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>
        </ul>
      </div>
    </div>
  </div>
</nav>

Dropbar

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

<nav class="uk-navbar-container" uk-navbar="dropbar: true">…</nav>
Copy to clipboard 
  • <div class="uk-position-relative">
  <nav class="uk-navbar-container">
    <div class="uk-container">
      <div
        uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container"
      >
        <div class="uk-navbar-left">
          <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
              <a href="#">Parent</a>
              <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-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-navbar-dropdown uk-navbar-dropdown-width-2">
                <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
                  <div>
                    <ul class="uk-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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>
        </div>

        <div class="uk-navbar-right">
          <ul class="uk-navbar-nav">
            <li>
              <a href="#">Parent</a>
              <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-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>
          </ul>
        </div>
      </div>
    </div>
  </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 parent navbar.

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

Parent icon

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

<ul class="uk-navbar-nav">
  <li>
    <a href="">Parent <span uk-navbar-parent-icon></span></a>
    <div class="uk-navbar-dropdown">…</div>
  </li>
</ul>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li class="uk-active"><a href="#">Active</a></li>
          <li>
            <a href="#">Parent <span uk-navbar-parent-icon></span></a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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></li>
        </ul>
      </div>
      <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
          <li>
            <a href="#">Parent <span uk-navbar-parent-icon></span></a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-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>
        </ul>
      </div>
    </div>
  </div>
</nav>

Width and Grid

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

To accommodate up to five columns, you also need to add one of the following classes. Columns will stack if they no longer fit into the container.

ClassDescription
.uk-navbar-dropdown-width-2Add this class to double the dropdown’s width.
.uk-navbar-dropdown-width-3Add this class to triple the dropdown’s width.
.uk-navbar-dropdown-width-4Add this class to multiply the dropdown’s width by four.
.uk-navbar-dropdown-width-5Add this class to multiply the dropdown’s width by five.
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
  <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
    <div>
      <ul class="uk-nav uk-navbar-dropdown-nav">
        …
      </ul>
    </div>
    <div>…</div>
  </div>
</div>
Copy to clipboard 
  • <nav class="uk-navbar-container">
  <div class="uk-container">
    <div uk-navbar>
      <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
          <li>
            <a href="#">Two Columns</a>
            <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
              <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
                <div>
                  <ul class="uk-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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>
      </div>
    </div>
  </div>
</nav>

For a basic sticky navbar, wrap the navbar inside a container with the uk-sticky attribute from the Sticky component.

The navbar itself has a modifier class uk-navbar-sticky that ensures an optimized styling for the sticky state (for example, an additional box shadow). To let the Sticky component dynamically add and remove that class, set cls-active: uk-navbar-sticky. To ensure that the class is added to the navbar container, set sel-target: .uk-navbar-container.

Note You can view more examples in the tests for the Sticky Navbar.

<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
  <nav class="uk-navbar-container" uk-navbar>…</nav>
</div>
Copy to clipboard

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. 

  • <div
  uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: + *; offset: 80"
>
  <nav class="uk-navbar-container">
    <div class="uk-container">
      <div uk-navbar>
        <div class="uk-navbar-left">
          <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
              <a href="#">Parent</a>
              <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-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>
        </div>
      </div>
    </div>
  </nav>
</div>

<div
  class="uk-section uk-background-cover uk-section-secondary"
  style="background-image: url(&quot;/images/dark.jpg&quot;)"
>
  <div class="uk-container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum.
    </p>

    <p>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum.
    </p>
  </div>
</div>

Instead of using a Dropdown, you can also show the subnavigation in a Dropbar, which will stretch across the full width below the navbar. Simply set dropbar: true in the uk-navbar attribute.

<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
  <nav class="uk-navbar-container" uk-navbar="dropbar: true">…</nav>
</div>
Copy to clipboard

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. 

  • <div
  uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: + *; offset: 80"
>
  <nav class="uk-navbar-container">
    <div class="uk-container">
      <div
        uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container"
      >
        <div class="uk-navbar-left">
          <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
              <a href="#">Parent</a>
              <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-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-navbar-dropdown uk-navbar-dropdown-width-2">
                <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
                  <div>
                    <ul class="uk-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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>
        </div>
      </div>
    </div>
  </nav>
</div>

<div
  class="uk-section uk-background-cover uk-section-secondary"
  style="background-image: url(&quot;/images/dark.jpg&quot;)"
>
  <div class="uk-container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum.
    </p>

    <p>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum.
    </p>
  </div>
</div>

Transparent sticky navbar

When a transparent navbar becomes sticky, it is usually required to remove the .uk-navbar-transparent class together with .uk-light or .uk-dark and add them again when the navbar returns to the non-sticky state. To do that, set cls-inactive: uk-navbar-transparent uk-light.

By default, the immediate toggling of classes does not look ideal. Instead, set start: 200 to make the navbar disappear and then re-appear when the user has scrolled 200px past the navbar. In that case, the navbar can also slide in with an animation. Just set animation: uk-animation-slide-top.

<div
  uk-sticky="start: 200; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light"
>
  <nav class="uk-navbar-container" uk-navbar>…</nav>
</div>
Copy to clipboard

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. 

  • <div
  class="uk-preserve-color uk-background-cover uk-section-secondary"
  style="background-image: url(&quot;/images/dark.jpg&quot;)"
>
  <div
    uk-sticky="start: 170; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; end: ! *; offset: 80"
  >
    <nav class="uk-navbar-container">
      <div class="uk-container uk-container-expand">
        <div uk-navbar>
          <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
              <a href="#">Parent</a>
              <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-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>
        </div>
      </div>
    </nav>
  </div>

  <div class="uk-section">
    <div class="uk-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum.
      </p>

      <p>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
        officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum.
      </p>
    </div>
  </div>
</div>

Dropbar transparent mode

To optimize the look of a transparent navbar if it opens a dropbar, set the dropbar-transparent-mode option to one of the following values.

ModeDescription
removeRemove navbar transparency when the dropbar opens and add it when the dropbar closes.
behindOpen the dropbar behind the navbar so the navbar content is shown above the dropbar background.

Use the Inverse component to color the transparent navbar depending on the background behind. To prevent the navbar from changing its color when it stops being transparent, just add the sel-active: .uk-navbar-transparent option to the uk-inverse attribute.

For example, set dropbar-transparent-mode: remove if the navbar is only transparent in the hero section, but not when sticky.

<div
  uk-sticky="start: 200; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent"
>
  <nav
    class="uk-navbar-container"
    uk-inverse="sel-active: .uk-navbar-transparent"
    uk-navbar="dropbar: true; dropbar-transparent-mode: remove"
  >
    …
  </nav>
</div>
Copy to clipboard

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. 

  • <div
  class="uk-preserve-color uk-inverse-light uk-background-cover uk-section-secondary"
  style="background-image: url(&quot;/images/dark.jpg&quot;)"
>
  <div
    uk-sticky="start: 170; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; end: ! *; offset: 80"
  >
    <nav
      class="uk-navbar-container"
      uk-inverse="sel-active: .uk-navbar-transparent"
    >
      <div class="uk-container">
        <div
          uk-navbar="dropbar: true; dropbar-transparent-mode: remove; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container"
        >
          <div class="uk-navbar-left">
            <ul class="uk-navbar-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                  <ul class="uk-nav uk-navbar-dropdown-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-navbar-dropdown uk-navbar-dropdown-width-2">
                  <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
                    <div>
                      <ul class="uk-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <div class="uk-section">
    <div class="uk-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum.
      </p>

      <p>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
        officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum.
      </p>
    </div>
  </div>
</div>

Alternatively, if the navbar is always transparent even when sticky, set dropbar-transparent-mode: behind to open the dropbar behind the navbar, so it is no longer transparent.

<div class="uk-inverse-light">
  <div
    uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"
  >
    <nav
      class="uk-navbar-container uk-navbar-transparent uk-position-relative uk-position-z-index-high"
      uk-inverse="sel-active: .uk-navbar-transparent"
      uk-navbar="dropbar: true; dropbar-transparent-mode: behind; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container"
    >
      …
    </nav>
  </div>
</div>
Copy to clipboard

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. 

  • <div
  class="uk-preserve-color uk-inverse-light uk-background-cover uk-section-secondary"
  style="background-image: url(&quot;/images/dark.jpg&quot;)"
>
  <div
    uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: ! *; offset: 80"
  >
    <nav
      class="uk-navbar-container uk-navbar-transparent uk-position-relative uk-position-z-index-high"
      uk-inverse="sel-active: .uk-navbar-transparent"
    >
      <div class="uk-container">
        <div
          uk-navbar="dropbar: true; dropbar-transparent-mode: behind; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container"
        >
          <div class="uk-navbar-left">
            <ul class="uk-navbar-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                  <ul class="uk-nav uk-navbar-dropdown-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-navbar-dropdown uk-navbar-dropdown-width-2">
                  <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
                    <div>
                      <ul class="uk-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <div class="uk-section">
    <div class="uk-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum.
      </p>

      <p>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
        officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum.
      </p>
    </div>
  </div>
</div>

When using a sticky transparent navbar, it’s quite common to blend it with the page background. In this case, the dropbar needs to be placed outside of the blending element using dropbar-anchor, and the dropdowns using container. Otherwise, the dropbar and dropdowns would also blend with the page background. This also means the dropbar will be placed outside of the sticky container. As a result, only the navbar will stay sticky, and the opened dropbar will scroll out of view. This is why we added a new close-on-scroll option to close the dropbar before scrolling.

Since only white color blends well with the page background, make sure the navbar has light colors or use the .uk-light class. Do not use the uk-inverse attribute to color the navbar automatically.

<div
  class="uk-position-z-index-high uk-blend-difference"
  uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"
>
  <nav
    class="uk-navbar-container uk-navbar-transparent"
    uk-navbar="container: !.uk-section-default; dropbar: true; dropbar-transparent-mode: behind; close-on-scroll: true; dropbar-anchor: !.uk-blend-difference"
  >
    …
  </nav>
</div>
Copy to clipboard

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. 

  • <div
  class="uk-preserve-color uk-background-cover uk-section-default"
  style="background-image: url(&quot;/images/light.jpg&quot;)"
>
  <div id="test">
    <div
      class="uk-position-z-index-high uk-blend-difference"
      uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-section-default; offset: 80"
    >
      <nav class="uk-navbar-container uk-navbar-transparent">
        <div class="uk-container">
          <div
            uk-navbar="container: #test; dropbar: true; dropbar-transparent-mode: behind; close-on-scroll: true; dropbar-anchor: !.uk-blend-difference; target-y: #test .uk-navbar-container"
          >
            <div class="uk-navbar-left">
              <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li>
                  <a href="#">Parent</a>
                  <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-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-navbar-dropdown uk-navbar-dropdown-width-2">
                    <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
                      <div>
                        <ul class="uk-nav uk-navbar-dropdown-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-nav uk-navbar-dropdown-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>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>

  <div class="uk-section">
    <div class="uk-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum.
      </p>

      <p>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
        officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum.
      </p>
    </div>
  </div>
</div>

Color navbar parts separately

To color navbar parts separately, just add the target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right option to the uk-inverse attribute.

<div class="uk-position-relative">
  <div class="uk-position-top">
    <div
      uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"
    >
      <nav
        class="uk-navbar-container uk-navbar-transparent"
        uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right"
        uk-navbar
      >
        …
      </nav>
    </div>
  </div>

  <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
    <div>
      <div class="uk-tile uk-tile-default">…</div>
    </div>
    <div>
      <div class="uk-tile uk-tile-primary">…</div>
    </div>
    <div>
      <div class="uk-tile uk-tile-secondary">…</div>
    </div>
  </div>
</div>
Copy to clipboard

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="uk-position-relative">
  <div class="uk-position-top">
    <div
      uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80"
    >
      <nav
        class="uk-navbar-container uk-navbar-transparent"
        uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right"
      >
        <div class="uk-container">
          <div uk-navbar>
            <div class="uk-navbar-left">
              <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
              </ul>
            </div>
            <div class="uk-navbar-center">
              <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="">Active</a></li>
                <li><a href="#">Item</a></li>
              </ul>
            </div>
            <div class="uk-navbar-right">
              <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="">Active</a></li>
                <li><a href="#">Item</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>

  <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
    <div>
      <div class="uk-tile uk-tile-default">
        <div
          uk-height-placeholder="!.uk-position-relative .uk-position-top"
          class="uk-margin-remove-adjacent"
        ></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div>
      <div class="uk-tile uk-tile-primary">
        <div
          uk-height-placeholder="!.uk-position-relative .uk-position-top"
          class="uk-margin-remove-adjacent"
        ></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div>
      <div class="uk-tile uk-tile-secondary">
        <div
          uk-height-placeholder="!.uk-position-relative .uk-position-top"
          class="uk-margin-remove-adjacent"
        ></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>

  <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
    <div>
      <div class="uk-tile uk-tile-primary">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div>
      <div class="uk-tile uk-tile-muted">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div>
      <div class="uk-tile uk-tile-default">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>

  <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
    <div>
      <div class="uk-tile uk-tile-default">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div>
      <div class="uk-tile uk-tile-secondary">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div>
      <div class="uk-tile uk-tile-muted">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
</div>

For more detailed information on coloring the navbar depending on the page background, take a look at the Inverse component.

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.
dropbar-transparent-modeBoolean, StringfalseThe dropbar transparent mode (behind, remove).
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 dropdown.
bg-scrollBooleantrueAllow background scrolling while dropdown is opened.
close-on-scrollBooleanfalseClose the dropdown 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.navbar(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 been 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 Navbar 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 Navbar component can be accessed through the keyboard using the following keys.

  • The tab or shift+tab keys place focus inside or outside the navbar.
  • The left/right arrow keys navigate through the navbar 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 navbar 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 the 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.
Customize