Dropdown

Dropdown menus triggered by buttons or navbar links, with support for headers, dividers, directional variants, and active states.

Button Dropdown

Basic dropdown (open)

<div class="ug-dropdown ug-dropdown--open" style="position:relative;display:inline-block">
  <button class="ug-dropdown__trigger ug-btn">
    Options <span class="ug-dropdown__caret"></span>
  </button>
  <div class="ug-dropdown__menu">
    <a class="ug-dropdown__link" href="#">Action One</a>
    <a class="ug-dropdown__link" href="#">Action Two</a>
    <a class="ug-dropdown__link" href="#">Action Three</a>
  </div>
</div>

With Header and Divider

Dropdown with sections

<div class="ug-dropdown ug-dropdown--open" style="position:relative;display:inline-block">
  <button class="ug-dropdown__trigger ug-btn">
    Account <span class="ug-dropdown__caret"></span>
  </button>
  <div class="ug-dropdown__menu">
    <div class="ug-dropdown__header">Navigation</div>
    <a class="ug-dropdown__link" href="#">Dashboard</a>
    <a class="ug-dropdown__link" href="#">Profile</a>
    <div class="ug-dropdown__divider"></div>
    <a class="ug-dropdown__link" href="#">Sign Out</a>
  </div>
</div>

Active Item

Active dropdown item

<div class="ug-dropdown ug-dropdown--open" style="position:relative;display:inline-block">
  <button class="ug-dropdown__trigger ug-btn">
    Select <span class="ug-dropdown__caret"></span>
  </button>
  <div class="ug-dropdown__menu">
    <a class="ug-dropdown__link" href="#">Option A</a>
    <a class="ug-dropdown__link ug-dropdown__link--active" href="#">Option B (active)</a>
    <a class="ug-dropdown__link" href="#">Option C</a>
  </div>
</div>

Right-Aligned

Right-aligned menu

<div style="text-align:right">
  <div class="ug-dropdown ug-dropdown--right ug-dropdown--open" style="position:relative;display:inline-block">
    <button class="ug-dropdown__trigger ug-btn">
      Align Right <span class="ug-dropdown__caret"></span>
    </button>
    <div class="ug-dropdown__menu">
      <a class="ug-dropdown__link" href="#">Action One</a>
      <a class="ug-dropdown__link" href="#">Action Two</a>
    </div>
  </div>
</div>

Upward Dropdown

Dropup variant

<div style="padding-top:120px">
  <div class="ug-dropdown ug-dropdown--up ug-dropdown--open" style="position:relative;display:inline-block">
    <button class="ug-dropdown__trigger ug-btn">
      Drop Up <span class="ug-dropdown__caret"></span>
    </button>
    <div class="ug-dropdown__menu">
      <a class="ug-dropdown__link" href="#">Action One</a>
      <a class="ug-dropdown__link" href="#">Action Two</a>
    </div>
  </div>
</div>

Navbar Dropdown

Dropdowns integrate seamlessly into the navbar component. At desktop sizes, the dropdown menu appears below the link; on mobile, it appears inline within the menu.

Dropdown inside navbar

<nav class="ug-navbar">
  <div class="ug-navbar__inner">
    <a class="ug-navbar__brand" href="#">SiteName</a>
    <ul class="ug-navbar__menu">
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Home</a></li>
      <li class="ug-navbar__item ug-dropdown ug-dropdown--open">
        <a class="ug-navbar__link ug-dropdown__trigger" href="#">
          Explore <span class="ug-dropdown__caret"></span>
        </a>
        <div class="ug-dropdown__menu">
          <a class="ug-dropdown__link" href="#">Parks</a>
          <a class="ug-dropdown__link" href="#">Trails</a>
          <div class="ug-dropdown__divider"></div>
          <a class="ug-dropdown__link" href="#">Campgrounds</a>
        </div>
      </li>
      <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Class Reference

Class	Description
`.ug-dropdown`	Dropdown container
`.ug-dropdown__trigger`	Trigger element (button or link)
`.ug-dropdown__caret`	Caret arrow indicator
`.ug-dropdown__menu`	Dropdown menu panel
`.ug-dropdown__link`	Menu item link
`.ug-dropdown__link--active`	Active/selected menu item
`.ug-dropdown__divider`	Horizontal separator in menu
`.ug-dropdown__header`	Section header in menu
`.ug-dropdown--open`	Open state (shows menu)
`.ug-dropdown--right`	Right-align the menu
`.ug-dropdown--up`	Open upward instead of downward
`.ug-dropdown--active`	Active state for navbar integration