# Menu Dropdown (Component) The Menu Dropdown component controls how individual dropdowns behave within the menu system. It supports multiple modes that adapt to screen size and menu configuration so your navigation remains usable and consistent across devices. The component is class driven. As the dropdown changes state or mode, it applies and removes specific classes that you can target in your CSS. ## Core Behavior ### 1. Open State When a dropdown is opened, the component toggles an ‎`.is-open` class on the dropdown root element. This class is used to: * Show or hide the dropdown content * Trigger open / close transitions * Apply visual states such as active indicators or icon rotations ### 2. Nested Dropdowns The component supports nested dropdowns, such as multi-level navigation structures. Each nested dropdown includes collision detection logic that: * Monitors the size of the browser window * Checks the position and dimensions of each dropdown * Repositions dropdowns automatically to prevent them from rendering off-screen If a nested dropdown would overflow the viewport, it is re-aligned (for example, flipping its position to the opposite side) so content remains fully visible. ### 3. Modes The dropdown can operate in different modes depending on the breakpoint configuration of the parent Menu Wrapper component. These modes are applied via classes on the dropdown and change both behavior and styling expectations. Each mode is mutually exclusive at a given breakpoint. #### Dropdown Mode (Desktop only) In Dropdown Mode, the component behaves like a standard desktop dropdown. * Dropdowns open below their triggers * Interaction is defined by the prop `Activation Method` and can either inherit from the parent Menu Wrapper component or act independently. * The dropdown root receives a ‎`.dropdown-mode` class for styling and layout {% hint style="info" %} This component can be used outside of the menu wrapper or the menu system. When outside of the Menu Wrapper Compontent it will be restricted to the Dropdown Mode. {% endhint %} #### Accordion Mode (Mobile only) In Accordion Mode, the dropdown behaves like an accordion panel. * Content expands and collapses vertically within the main menu flow * Only the location of the ‎`.is-open` dropdown changes; the menu structure remains in place * The dropdown root receives an ‎`.accordion-mode` class for mode specific styling Use Accordion Mode when you want nested items to reveal inline, without overlaying other content. #### Stacked Mode (Mobile only) In Stacked Mode, dropdowns behave like stacked cards on mobile devices. * Dropdown content is visually separated into stacked layers * Animations give a card-like transition between levels of navigation * The dropdown root receives a ‎`.stacked-mode` class for styling * Dropdown content is moved under the ‎`ul.nav__list` element at breakpoint change so stacking and animation can be handled consistently * Sets the back button `.menu-dropdown-back-button` to display allowing the user to navigate back levels. Use Stacked Mode when you want a more app-like, layered navigation experience on smaller screens. ### 4. Accessibility The Menu Dropdown component automatically manages core accessibility attributes and keyboard behavior, including: * Applying and syncing ‎`aria-expanded`, ‎`aria-controls`, and other relevant ARIA attributes * Managing focus when dropdowns open and close so keyboard users remain in context * Handling the ‎`Esc` key to close open dropdowns and return focus to the trigger ## Component Properties The Menu Dropdown exposes a set of component properties that control dropdown behavior and the mobile version of the menu. | Property | Description | Accepted Value | Required | | ----------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -------- | | Dropdown Tag | Sets the Tag of the dropdown to fit its current usage. | Select: li, div | Yes | | Dropdown Label | Changes the label text for the dropdown button | Text | Yes | | Activation Method | Changes how the user interacts with the dropdown | Select: Respect Menu (when in menu wrapper), Hover & Click, Click | Yes | | Mark As Mega Menu | Sets \[data-mega-menu] to true for styling inheritance for mega menus | Toggle | Yes | | Match Width | Sets the dropdown to inherit the width of a CSS selector within the .header-wrapper | CSS ID or CSS Class | No | | Extra Classes | Adds other classes to the dropdown for further targeting if needed. | CSS class without the '.' | No | | Hide at Menu Breakpoint | Sets the dropdown to be hidden at any particular menu breakpoint when inside the Menu Wrapper Component | Select: None, Desktop, Mobile | No | | Dropdown Content Tag | Changes the HTML Tag of the element that wraps the dropdownContent slot. | Select: ul, ol, div | Yes | ## Available CSS Variables Use the following CSS variables to control core styling of elements inside the dropdown without needing to override selector specificity. | Variable | Description | | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --dropdown-padding | Sets the padding on the dropdown content. This also dictates the offset of each subsquent nested dropdown content when in dropdown mode. | | –dropdown-border-radius | Sets the border radius of the dropdown content when in dropdown mode. | | --dropdown-border-width | Sets the border width on the dropdown content when in dropdown mode. | | --dropdown-border-color | Sets the border color on the dropdown content when in dropdown mode. | | –dropdown-bg | Sets the background on the dropdown content when in dropdown mode. | | –dropdown-box-shadow | Sets the box shadow on the dropdown content when in dropdown mode. | | –dropdown-transition-property | Sets a global transition properties for dropdown content. | | –dropdown-transition-duration | Sets the global transition duration for opening and closing dropdowns (not in stacked mode). | | –dropdown-transition-delay | Sets the global transition delay for opening and closing dropdowns. | | –dropdown-transition-timing | Sets the global transition timing function for opening and closing dropdowns. (excluding stacked mode. stacked mode will use --mobile-menu-dropdown-stacked-timing) | | –dropdown-closed-top | Sets the gap of dropdown content from its corresponding trigger when in dropdown mode and its closed. | | –dropdown-open-top | Sets the gap of dropdown content from its corresponding trigger when in dropdown mode and its open. | | --dropdown-trigger-icon-size | Sets the size of the chevron icon in the dropdown trigger. Defaults to 1em. | | --dropdown-link-min-radius | Sets the minimum radius value for links inside standard dropdowns before they abide be a concentric radius | | --dropdown-link-padding-inline | Inline padding for links inside of standard dropdowns | | --dropdown-link-padding-block | Block padding for links inside of standard dropdowns | | --dropdown-link-font-weight | Font weight for links inside of standard dropdowns | | --dropdown-link-color | Color for links inside of standard dropdowns | | --dropdown-link-color-hover | Color for links inside of standard dropdowns when they are hovered | | --dropdown-link-color-active | Color for links inside of standard dropdowns when its the current link | | --dropdown-link-bg-color | Background color for links inside of standard dropdowns | | --dropdown-link-bg-color-hover | Background color for links inside of standard dropdowns when hovered | | --dropdown-link-bg-color-active | Background color for links inside of standard dropdownswhen its the current link |