Dropdown

The dropdown is used to show a list of options, such as links in a sub-menu or options in a data table, for example. It uses a balloon to display a navigation element and has to be attached to a target since it's position is relative to it. The target is the element that, when interacted with, toggles the appearance of the dropdown.

Honeycomb offers a plugin that will handle all of the necessary attributes to show / gide dropdowns and also set up all the required accessibility features so you won't have to worry about keeping them in sync. We strongly advise that you use the plugin since it makes things a lot easier!

Including the Plugin

• Include the plugin from our CDN at the end of your page:

  <script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/dropdown.js"></script>

• Initialize the plugin:

  document.addEventListener("DOMContentLoaded", function() {
  dropdown.init();
  });

Building the Dropdown

The dropdown component requires a specific HTML structure in order to work correctly.

• Wrap the target element and the list of items with a flix-dropdown container;
• Ideally the target should be a button;
• If the button doesn't have any text content (just an icon), add a meaningful aria-label to the button;
• Add an unique id and the class flix-dropdown__items to the list of items that should be displayed;
• Add the hidden attribute to the list of items if you wish to initialize it hidden by default;
• Finally, connect the dropdown target to the list by passing the list id as value to the target's data-dropdown attribute;
• If you wish to change the default event trigger to hover, just add data-event="hover" to the target;

Voila! The plugin will automatically add the aria attributes and setup all te event handlers according to the event you chose.

<div class="flix-dropdown">
  <button class="flix-btn flix-btn--has-icon flix-btn--link" type="button" data-dropdown="dropdown-example">
    <span class="flix-btn__text">I have a dropdown</span>
    <i class="flix-btn__icon flix-icon flix-icon-arrow-down"></i>
  </button>
  <ul id="dropdown-example" class="flix-dropdown__items" hidden="">
    <li class="flix-dropdown-item">
      <a class="flix-dropdown-item__link" href="#">I&#x27;m visible</a>
    </li>
    <li class="flix-dropdown-item">
      <a class="flix-dropdown-item__link" href="#">And prominent</a>
    </li>
  </ul>
</div>

Modifiers

By default the dropdown positions itself in the center of the target element. Some modifiers are available to control the position of the dropdown:

flix-dropdown--top

positions the dropdown on top of the target

flix-dropdown--left

aligns the dropdown to the left of the target

flix-dropdown--right

aligns the dropdown to the right of the target

<div class="flix-box">
  <div class="flix-grid">
    <div class="flix-col">
      <h3 class="flix-h3">Idea initiative</h3>
    </div>
    <div class="flix-col">
      <section class="flix-has-text-right">
        <div class="flix-dropdown flix-dropdown--top flix-dropdown--left flix-dropdown--active">
          <button type="button" aria-label="Options" class="flix-btn flix-btn--has-icon flix-btn--square flix-btn--link" data-dropdown="dropdown-idea-example">
            <i class="flix-btn__icon flix-icon flix-icon--size-4 flix-icon-kebab" aria-hidden="true"></i>
          </button>
          <ul id="dropdown-idea-example" class="flix-dropdown__items">
            <li class="flix-dropdown-item">
              <a class="flix-dropdown-item__link" href="#">Edit</a>
            </li>
            <li class="flix-dropdown-item">
              <a class="flix-dropdown-item__link" href="#">Share</a>
            </li>
            <li class="flix-dropdown-item">
              <a class="flix-dropdown-item__link" href="#">Delete</a>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</div>

You can combine modifiers for different position options. If you want the dropdown on top-left of the target, then add both flix-dropdown--top and flix-dropdown--left modifiers.

<div class="flix-dropdown flix-dropdown--top flix-dropdown--right">
  <button class="flix-btn flix-btn--has-icon flix-btn--link" type="button" data-dropdown="top-dropdown-menu">
    <span class="flix-btn__text">I have a top dropdown</span>
    <i class="flix-btn__icon flix-icon flix-icon-arrow-up" aria-hidden="true"></i>
  </button>
  <ul id="top-dropdown-menu" class="flix-dropdown__items" hidden="">
    <li class="flix-dropdown-item">
      <a class="flix-dropdown-item__link" href="#">I&#x27;m still visible</a>
    </li>
    <li class="flix-dropdown-item">
      <a class="flix-dropdown-item__link" href="#">And still prominent</a>
    </li>
  </ul>
</div>

Making it work without the plugin

Before you continue we would really like to emphasize that you should use the plugin!

There are several steps you need to pay attention to make an accessible dropdown component:

• Wrap the target element and the list of items with a flix-dropdown container;

• Add the flix-dropdown__items to the list of items that should be rendered in the dropdown balloon:

  • Add an id to the list of items to connect it to the target;
  • Add the hidden attribute to the list to hide it from assistive technologies;

• Add a button to be the target of the dropdown:

  • Connect the target to the list by using aria-controls="{list_id}>";
  • Add aria-haspopup="menu" to the target to inform assistive technologies that this is a dropdown component;
  • Add aria-expanded="true" or "false" attribute to inform assistive technologies of the status of the target;
  • If the button doesn't have any text content, add a meaningful aria-label for accessibility;

When the user interacts with the target you must toggle and keep in sync:

• flix-dropdown--active modifier class;
• The aria-expanded to be "true" or "false" on the target accordingly;
• The hidden attribute on the dropdown list.

You must also allow closing the dropdown by pressing ESC on the keyboard.