Dropdown

The Dropdown Component is a container for a region of content that can be toggled open or closed using attributes on the primary toggling element: aria-controls, aria-expanded, and aria-hidden. This is similar to the Accordion Component, however, it differs in a few ways.

Dropdowns may have more than one toggling component as the toggle will shift focus from the “open” toggle element to a designated “close” toggle element. Toggling elements are given the data attributes data-dialog="open" or data-dialog="close" respectively.
They are intented to be a maximum height of the browser minus the Navigation Object‘s height. Any content that extends beyond that will be scrollable. A dropdown can be set to use this property as the minimum height of the page by adding the .c-dropdown-min class to the main element (.c-dropdown).
They can trap the focus of the page and prevent scrolling on the body element like a modal dialogue when they occupy the full view of the page. This prevents focusing on elements that are not visible. The data attribute data-dialog-lock="true" on the opening toggling element designates this behavior.

<div class="c-dropdown bg-scale-1">
  <div class="text-center p-3">
    <!--{ @data-js        data-js="dialog" designates this element as a toggling element for the dropdown }-->
    <!--{ @aria-controls  Targets the element that will be shown and hidden by the toggle }-->
    <!--{ @aria-expanded  Indicates if the dropdown is open or not }-->
    <!--{ @data-dialog  data-dialog="open" designates this element as the primary opening toggle for the dropdown. It will be focused on when the dropdown is closed. Only one open toggle associated with this aria-controls value can exist on the page }-->
    <button aria-controls="aria-c-dropdown" aria-expanded="true" class="btn btn-primary w-full active" data-dialog="open" data-js="dialog">
      <span class="mie-1">Dropdown</span>
    </button>
  </div>
  <!--{ @id           Identifies this element as the target of the dropdown toggle }-->
  <!--{ @class        The "active" class will be toggled on the dropdown when it is open }-->
  <!--{ @aria-hidden  Indicates this area is hidden from screen readers }-->
  <div aria-hidden="false" class="active" id="aria-c-dropdown">
    <div class="text-end px-3">
      <!--{ @data-js        data-js="dialog" designates this element as a toggling element for the dropdown }-->
      <!--{ @aria-controls  Targets the element that will be shown and hidden by the toggle }-->
      <!--{ @aria-expanded  Indicates if the dropdown is open or not }-->
      <!--{ @data-dialog  data-dialog="close" designates this element as the primary close toggle for the dropdown. It will be focused on when the dropdown is opened. Only one close toggle associated with this aria-controls value can exist on the page }-->
      <!--{ @tabindex       Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
      <button aria-controls="aria-c-dropdown" aria-expanded="true" class="btn btn-primary btn-small" data-dialog="close" data-js="dialog">
        <span>Close</span>
      </button>
    </div>
    <div class="p-3">
      <p>Dropdown Content</p>
    </div>
  </div>
</div>

Usage

The Dropdown Component uses JavaScript for toggling and accessibility.

Global Script

<script src="/dist/scripts/main.js"></script>

<script>
  var patterns = new WorkingNyc();
  patterns.dropdown();
</script>

Module Import

import Dropdown from 'src/components/dropdown/dropdown';

new Dropdown();

Demonstration

Markup

Usage

Global Script

Module Import