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

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.

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	Sets the border 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.

Additional Helper Variables

There are a few additional helper variables that are included inside the CSS for the Menu Wrapper Component.

Variable	Description
--link-color	Sets the color of top level links and links inside of none mega menu links.
--link-color-hover	Sets the hover color of top level links and links inside of none mega menu links.
--link-bg-color	Sets the background color of top level links and links inside of none mega menu links.
--link-bg-color-hover	Sets the hover background color of top level links and links inside of none mega menu links.
--link-font-weight	Sets the font weight of top level links and links inside of none mega menu links.
--link-transition	Sets the transition of top level links and links inside of none mega menu links.