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-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
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 (
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.
<script src="@nycopportunity/standard/dist/js/default.js"></script> <script> var Standard = new Default(); Standard.dropdown(); </script>
For module imports, import the Dropdown module from the source.
import Dropdown from '@nycopportunity/standard/src/components/dropdown/dropdown'; new Dropdown();