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.

Code

Default

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

With sections

Add Edit Copy Delete Import Export

Toggle dark mode

Certara UI

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

packages/certara-ui/src/components/dropdown/dropdown.tsx

<certara-dropdown button-label="Drop Down">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

certara-dropdown

Properties

Property	Attribute	Description	Type	Default
buttonColor	button-color	Supports any color available in <certara-button>	"brand" | "danger" | "inverse" | "neutral" | "secondary" | "success" | "warning"	'secondary'
buttonLabel	button-label		string	undefined
buttonSize	button-size	Supports any size available in <certara-button>	"lg" | "md" | "sm"	'md'
buttonVariant	button-variant	Supports any variant available in <certara-button>	"default" | "icon" | "link" | "outline"	'default'
menuOffset	menu-offset		number	10
nested	nested	Specify that a nested dropdown can act as a submenu item of a containing dropdown	boolean	false
placement	placement	These options will suggest a starting point for the menu position, but <certara-dropdown> will automatically position itself within the viewport to avoid appearing offscreen	"bottom-end" | "bottom-start" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start"	'bottom-start'
position	position	This can be set to fixed if the dropdown menu is clipped by a bounding parent element	"absolute" | "fixed"	'absolute'
showOpenerCaret	show-opener-caret	If set to false, the dropdown opener will not show a caret icon	boolean	true

Events

Event	Description	Type
certaraDropdownClose		CustomEvent<void>
certaraDropdownOpen		CustomEvent<void>

Slots

Slot	Description
	Main slot is reserved for <certara-dropdown-*> elements, but it does accept all children
"button-label"	Can be used for custom label content, including icons

Dependencies

Depends on

• certara-icon
• certara-button

Graph

graph TD;
  certara-dropdown --> certara-icon
  certara-dropdown --> certara-button
  certara-button --> certara-icon
  style certara-dropdown fill:#f9f,stroke:#333,stroke-width:4px

---

HTML

Drop Down

• Dropdown Item
• Dropdown Item
• Dropdown Item
• Dropdown Item

Toggle dark mode

<div class="dropdown">
  <button id="{{button-id}}" type="button" class="btn btn--secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Drop Down
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="{{match button-id}}">
    <li><button class="dropdown-item">Dropdown Item</button></li>
    <li><button class="dropdown-item">Dropdown Item</button></li>
    <li><button class="dropdown-item">Dropdown Item</button></li>
    <li><button class="dropdown-item">Dropdown Item</button></li>
  </ul>
</div>

NameDescriptionCopy

1. Dropdown header
   Creates a header
   <li class="dropdown-header">…</li>Copy to Clipboard
2. Dropdown divider
   Creates a line/separator
   <li class="dropdown-divider"></li>Copy to Clipboard

Twirl

app/views/components/standardDropdown.scala.html

@standardDropdown(icon = "", label = "") {
    @standardDropdownItem(…)
}

PropTypeDefaultDescriptionCopy

1. label
   string
   blank
   creates a label for the dropdown toggle button
   label=""Copy to Clipboard
2. icon
   string
   blank
   name of Font Awesome SVG icon (without the fa- prefix). Creates an optional icon next to the label on the dropdown toggle button.
   icon=""Copy to Clipboard

Custom button options

Color

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown button-label="Color" button-color="brand">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Variant

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown button-label="Variant" button-variant="outline">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Size

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown button-label="Variant" button-size="sm">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

With icon

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown button-label="With icon">
    <div slot="button-label">
        <certara-icon name="paper-plane" role="presentation"></certara-icon>
    </div>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Menu positions/options

Certara UI

<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

<certara-dropdown placement="bottom-start" button-label="Actions">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Bottom end

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown placement="bottom-end" button-label="Actions">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Top start

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown placement="top-start" button-label="Actions">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Top end

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown placement="top-end" button-label="Actions">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Left start

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown placement="left-start" button-label="Actions">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Left end

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown placement="left-end" button-label="Actions">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Right start

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown placement="right-start" button-label="Actions">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Right end

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown placement="right-end" button-label="Actions">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

HTML

Top left

Actions

• Category
• Add
• Edit
• Copy
• Delete
• Import
• Export

Toggle dark mode

<ul class="dropdown-menu" role="menu" aria-labelledby="{{match button-id}}">
  ...
</ul>

Top right

Actions

• Category
• Add
• Edit
• Copy
• Delete
• Import
• Export

Toggle dark mode

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="{{match button-id}}">
  ...
</ul>

Bottom right

Actions

• Category
• Add
• Edit
• Copy
• Delete
• Import
• Export

Toggle dark mode

<div class="dropup">
  <button id="dropdown" type="button" class="btn btn--secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
  <ul class="dropdown-menu" role="menu" aria-labelledby="{{match button-id}}">...</ul>
</div>

Animated

Actions

• Category
• Add
• Edit
• Copy
• Delete
• Import
• Export

Toggle dark mode

<ul class="dropdown-menu dropdown-menu--animate" role="menu" aria-labelledby="{{match button-id}}">
  ...
</ul>

Nested dropdowns

<certara-dropdown> can be nested within itself using the nested attribute.

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

Toggle dark mode

<certara-dropdown button-label="With nested options">
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
    <certara-dropdown button-label="Nested options" nested>
        <certara-dropdown-item>Nested Item</certara-dropdown-item>
        <certara-dropdown-item>Nested Item</certara-dropdown-item>
    </certara-dropdown>
</certara-dropdown>

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