Dropdown Menu

Dropdown menus are typically used when you have 5-15 items to choose from. They’re used for navigation or command menus, where an action is initiated based on the selection.

Menu items can include checkboxes.

Design

Default

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

With sections

Add Edit Copy Delete Import Export

Toggle dark mode

Custom button options

Color

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Variant

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Size

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

With icon

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Menu positions/options

<certara-dropdown> will position the menu automatically to stay within the viewport, but can be set to show in a specific orientation with the placement attribute.

Bottom start

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Bottom end

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Top start

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Top end

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Left start

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Left end

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Right start

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Right end

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Nested dropdowns

Dropdown Item Dropdown Item Dropdown Item Dropdown Item Nested Item Nested Item

Toggle dark mode

Accessibility

Note that dropdowns are keyboard friendly, since pressing ESC will hide active dropdowns.

ARIA (screen reader support)

"aria-labelledby" allows a developer to associate the dropdown menu (aria-labelledby=“dropdownTrigger”) to the element that triggers it (id=“dropdownTrigger”). This allows the dropdown trigger to be not only visually associated with its corresponding dropdown menu; it is programmatically associated with it too. This means that, for example, a screen reader will read out the dropdown trigger when the user is focused on the button, making it easier for an assistive technology user to understand what menu the button/trigger is controlling.

Design resources

View component in Figma