Dropdown
Demonstration
Dropdown Content
Code
The Dropdown Component is a container for a region of content that can be expanded 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 intended 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 dialog 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.
Global Script
The Dropdown Component uses JavaScript for toggling and accessibility.
<script src="@nycopportunity/standard/dist/js/default.js"></script> <script> var Standard = new Default(); Standard.dropdown(); </script>
Module Import
For module imports, import the Dropdown module from the source.
import Dropdown from '@nycopportunity/standard/src/components/dropdown/dropdown'; new Dropdown();