Dropdown

Dropdown menus are hidden by default and can contain action lists with only a few items or more complicated filter or menu systems. Typically a button will show and hide them, though other components may also be used as a trigger.

Use them anywhere a set of links or controls do not need to be available on screen by default, when you need to show overflow controls, or when you have a complicated menu that does not rise to the level of a modal or drawer.

Basic dropdown

To create a dropdown, simply place both .hc-dropdown-toggle and .hc-dropdown-content elements inside of a parent .hc-dropdown. The button or triggering element must also have the class .hc-dropdown-toggle-button.

HTML

Expand Edit in Playground Copy


<div class="hc-dropdown">
  <div class="hc-dropdown-toggle">
    <button type="button" class="hc-button hc-button--primary hc-dropdown-toggle-button">
      Dropdown toggle
    </button>
  </div>
  <div class="hc-dropdown-content">
    <menu class="flex flex-col px-3 py-3 whitespace-nowrap">
      <a href="/" class="px-2 py-1 rounded hover:bg-gray-100">This is an item</a>
      <a href="/" class="px-2 py-1 rounded hover:bg-gray-100">This is another item</a>
      <a href="/" class="px-2 py-1 rounded hover:bg-gray-100">This is a third item</a>
    </menu>
  </div>
</div>

Interactions and states

Dropdowns have a subtle default fade-in and slide-up animation on reveal, with the reverse on hide. They have a default drop shadow as well. All of this is handled natively.

No javascript is required! As of v0.2.5 all dropdown interactions are now handled by CSS only. The parent .hc-dropdown element uses the :focus-within pseudo-class: when the triggering button gets focus, visibility and opacity styles are applied to the .hc-dropdown-content. Because it uses :focus-within, user actions inside of the dropdown itself do not cause it to close.

It’s important that the .hc-dropdown-toggle-button element is inside of an .hc-dropdown-toggle element. The later is used to maintain cursor: pointer; on the button when the dropdown is open.

The dropdown will close when the user clicks outside of it.

Dropdown button with caret

There is a special button variation specifically for dropdowns! This variation is used in the header for both the primary dropdown menus as well as the account menu dropdown.

Apply .hc-button--dropdown to get the basic effect. There are specific child elements and classes for content and the caret as well; content inside should have .hc-button--dropdown--content and the caret must be a <sub> element with class .hc-button--dropdown--caret.

HTML

Expand Edit in Playground Copy


<div class="hc-dropdown">
  <div class="hc-dropdown-toggle">
    <button class="hc-button hc-button--primary hc-button--dropdown hc-dropdown-toggle-button">
      Manage account
      <sub class="hc-button--dropdown--caret">toggle</sub>
    </button>
  </div>
  <menu class="hc-dropdown-content">
    <div class="hc-dropdown-list hc-dropdown-section--divider">
      <a href="/" class="hc-dropdown-list-link">
        <i class="hc-icon hc-icon--lock hc-icon--20"></i>
        Change password
      </a>
      <a href="/" class="hc-dropdown-list-link">
        <i class="hc-icon hc-icon--settings hc-icon--20"></i>
        Preferences
      </a>
      <a href="/" class="hc-dropdown-list-link">
        <i class="hc-icon hc-icon--language hc-icon--20"></i>
        Preferred language
      </a>
    </div>
  </menu>
</div>

Toggle direction

Dropdowns open centered to the toggle button by default. You can control this direction with utility classes; currently right-justified and left-justified are supported.

HTML

Expand Edit in Playground Copy


<div class="hc-dropdown">
  <div class="hc-dropdown-toggle">
    <button class="hc-button hc-button--primary hc-button--dropdown hc-dropdown-toggle-button">
      Left aligned
      <sub class="hc-button--dropdown--caret">toggle</sub>
    </button>
  </div>
  <menu class="hc-dropdown-content hc-dropdown-content--left w-48 p-4">
    This should be fixed to the left of the button.
  </menu>
</div>
<div class="hc-dropdown">
  <div class="hc-dropdown-toggle">
    <button class="hc-button hc-button--primary hc-button--dropdown hc-dropdown-toggle-button">
      Right aligned
      <sub class="hc-button--dropdown--caret">toggle</sub>
    </button>
  </div>
  <menu class="hc-dropdown-content hc-dropdown-content--right w-48 p-4">
    This should be fixed to the right of the button.
  </menu>
</div>