Dropdown

Design guidelines

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.

Code

Framework

HTML

React

Angular

Default

Dropdown Item Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Drop Down">
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<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>

With sections

Add Edit Copy Delete Import Export

Toggle dark mode

<certara-dropdown button-label="Drop Down">
  <certara-dropdown-group headline="Category">
    <certara-dropdown-item>Add</certara-dropdown-item>
    <certara-dropdown-item>Edit</certara-dropdown-item>
    <certara-dropdown-item>Copy</certara-dropdown-item>
    <certara-dropdown-item>Delete</certara-dropdown-item>
  </certara-dropdown-group>
  <certara-dropdown-divider></certara-dropdown-divider>
  <certara-dropdown-item>Import</certara-dropdown-item>
  <certara-dropdown-item>Export</certara-dropdown-item>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownDivider, CertaraDropdownGroup, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Drop Down">
  <CertaraDropdownGroup headline="Category">
    <CertaraDropdownItem>Add</CertaraDropdownItem>
    <CertaraDropdownItem>Edit</CertaraDropdownItem>
    <CertaraDropdownItem>Copy</CertaraDropdownItem>
    <CertaraDropdownItem>Delete</CertaraDropdownItem>
  </CertaraDropdownGroup>
  <CertaraDropdownDivider />
  <CertaraDropdownItem>Import</CertaraDropdownItem>
  <CertaraDropdownItem>Export</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="Drop Down">
  <certara-dropdown-group headline="Category">
    <certara-dropdown-item>Add</certara-dropdown-item>
    <certara-dropdown-item>Edit</certara-dropdown-item>
    <certara-dropdown-item>Copy</certara-dropdown-item>
    <certara-dropdown-item>Delete</certara-dropdown-item>
  </certara-dropdown-group>
  <certara-dropdown-divider></certara-dropdown-divider>
  <certara-dropdown-item>Import</certara-dropdown-item>
  <certara-dropdown-item>Export</certara-dropdown-item>
</certara-dropdown>

Custom button options

Framework

HTML

React

Angular

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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Color" buttonColor="brand">
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Variant" buttonVariant="outline">
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Variant" buttonSize="sm">
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<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 icon="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>

import { CertaraDropdown, CertaraDropdownItem, CertaraIcon } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="With icon">
  <div slot="button-label">
    <CertaraIcon icon="paper-plane" role="presentation" />
  </div>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="With icon">
  <div slot="button-label">
    <certara-icon icon="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>

Without caret

Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown button-label="Without caret" show-opener-caret="false">
  <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
  <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Without caret" showOpenerCaret={false}>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="Without caret" show-opener-caret="false">
  <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
  <certara-dropdown-item>Dropdown Item</certara-dropdown-item>
</certara-dropdown>

Menu positions/options

Framework

HTML

React

Angular

Bottom start

Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

<certara-dropdown placement="bottom-start" button-label="Actions" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown placement="bottom-start" buttonLabel="Actions" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown placement="bottom-start" button-label="Actions" open>
  <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

Toggle dark mode

<certara-dropdown placement="bottom-end" button-label="Actions" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown placement="bottom-end" buttonLabel="Actions" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown placement="bottom-end" button-label="Actions" open>
  <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

Toggle dark mode

<certara-dropdown placement="top-start" button-label="Actions" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown placement="top-start" buttonLabel="Actions" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown placement="top-start" button-label="Actions" open>
  <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

Toggle dark mode

<certara-dropdown placement="top-end" button-label="Actions" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown placement="top-end" buttonLabel="Actions" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown placement="top-end" button-label="Actions" open>
  <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

Toggle dark mode

<certara-dropdown placement="left-start" button-label="Actions" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown placement="left-start" buttonLabel="Actions" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown placement="left-start" button-label="Actions" open>
  <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

Toggle dark mode

<certara-dropdown placement="left-end" button-label="Actions" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown placement="left-end" buttonLabel="Actions" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown placement="left-end" button-label="Actions" open>
  <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

Toggle dark mode

<certara-dropdown placement="right-start" button-label="Actions" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown placement="right-start" buttonLabel="Actions" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown placement="right-start" button-label="Actions" open>
  <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

Toggle dark mode

<certara-dropdown placement="right-end" button-label="Actions" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown placement="right-end" buttonLabel="Actions" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown placement="right-end" button-label="Actions" open>
  <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>

Nested dropdowns

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

Framework

HTML

React

Angular

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

Toggle dark mode

<certara-dropdown button-label="With nested options" open>
  <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>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="With nested options" open>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdownItem>Dropdown Item</CertaraDropdownItem>
  <CertaraDropdown buttonLabel="Nested options" nested>
    <CertaraDropdownItem>Nested Item</CertaraDropdownItem>
    <CertaraDropdownItem>Nested Item</CertaraDropdownItem>
  </CertaraDropdown>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="With nested options" open>
  <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>

certara-dropdown

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.

Properties

animated

Attribute	animated
Type	boolean
Default	false
Required	false
Description	Apply animation when menu opens and closes

buttonColor

Attribute	button-color
Type	"brand" | "danger" | "inverse" | "neutral" | "secondary" | "success"
Default	'secondary'
Required	false
Description	Supports any color available in <certara-button>

buttonLabel

Attribute	button-label
Type	string
Default	undefined
Required	false
Description	Display text on dropdown opener button

buttonSize

Attribute	button-size
Type	"lg" | "md" | "sm"
Default	'md'
Required	false
Description	Supports any size available in <certara-button>

buttonTabindex

Attribute	button-tabindex
Type	number
Default	undefined
Required	false
Description	Set custom tabindex for the dropdown opener button

buttonVariant

Attribute	button-variant
Type	"default" | "icon" | "icon-rounded" | "link" | "outline" | "reset"
Default	'default'
Required	false
Description	Supports any variant available in <certara-button>

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Will disable the dropdown opener button

menuOffset

Attribute	menu-offset
Type	number
Default	4
Required	false
Description	Separation from the opener to the menu (depends on orientation)

nested

Attribute	nested
Type	boolean
Default	false
Required	false
Description	Specify that a nested dropdown can act as a submenu item of a containing dropdown

open

Attribute	open
Type	boolean
Default	false
Required	false
Description	Renders the dropdown with its menu already open, and stays in sync with user interaction: opening or closing the menu updates this value. Intended for documentation examples and tests. For programmatic control at runtime, prefer show() / hide() / toggle(). A menu opened this way is not dismissed by clicking elsewhere on the page — close it via hide() or the opener button.

placement

Attribute	placement
Type	"bottom-end" | "bottom-start" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start"
Default	'bottom-start'
Required	false
Description	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

position

Attribute	position
Type	"absolute" | "fixed"
Default	'absolute'
Required	false
Description	This can be set to fixed if the dropdown menu is clipped by a bounding parent element

showOpenerCaret

Attribute	show-opener-caret
Type	boolean
Default	true
Required	false
Description	If set to false, the dropdown opener will not show a caret icon

Events

Name	Description	Bubbles
certaraDropdownClose		true
certaraDropdownOpen		true

Methods

Name	Signature	Description
hide	() => Promise<void>	Closes the dropdown menu.
show	() => Promise<void>	Opens the dropdown menu. It stays open until hide() is called or the user closes it.
toggle	() => Promise<void>	Toggles the dropdown menu open or closed.

Slots

Name	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

certara-dropdown-item

Dropdown items can contain interactive button actions, hyperlinks, and checkboxes

Item

Dropdown item

Toggle dark mode

<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item>Dropdown item</certara-dropdown-item>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown open buttonLabel="Dropdown">
  <CertaraDropdownItem>Dropdown item</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item>Dropdown item</certara-dropdown-item>
</certara-dropdown>

Disabled item

Dropdown item disabled

Toggle dark mode

<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item disabled>Dropdown item disabled</certara-dropdown-item>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown open buttonLabel="Dropdown">
  <CertaraDropdownItem disabled>Dropdown item disabled</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item disabled>Dropdown item disabled</certara-dropdown-item>
</certara-dropdown>

Href

Dropdown item with href

Toggle dark mode

<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item href="#">Dropdown item with href</certara-dropdown-item>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown open buttonLabel="Dropdown">
  <CertaraDropdownItem href="#">Dropdown item with href</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item href="#">Dropdown item with href</certara-dropdown-item>
</certara-dropdown>

Target

Dropdown item with target blank

Toggle dark mode

<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item href="#" target="_blank">
    Dropdown item with target blank
  </certara-dropdown-item>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown open buttonLabel="Dropdown">
  <CertaraDropdownItem href="#" target="_blank">
    Dropdown item with target blank
  </CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item href="#" target="_blank">
    Dropdown item with target blank
  </certara-dropdown-item>
</certara-dropdown>

Description

Label

Toggle dark mode

<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item description="Description">Label</certara-dropdown-item>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown open buttonLabel="Dropdown">
  <CertaraDropdownItem description="Description">Label</CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item description="Description">Label</certara-dropdown-item>
</certara-dropdown>

Right content

Dropdown item

New

Toggle dark mode

<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item>
    Dropdown item
    <div slot="right-content">
      <certara-badge color="magenta">New</certara-badge>
    </div>
  </certara-dropdown-item>
</certara-dropdown>

import { CertaraBadge, CertaraDropdown, CertaraDropdownItem } from '@certara/certara-ui-react';

<CertaraDropdown open buttonLabel="Dropdown">
  <CertaraDropdownItem>
    Dropdown item
    <div slot="right-content">
      <CertaraBadge color="magenta">New</CertaraBadge>
    </div>
  </CertaraDropdownItem>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown open button-label="Dropdown">
  <certara-dropdown-item>
    Dropdown item
    <div slot="right-content">
      <certara-badge color="magenta">New</certara-badge>
    </div>
  </certara-dropdown-item>
</certara-dropdown>

Properties

active

Attribute	active
Type	boolean
Default	false
Required	false
Description	Whether the dropdown item is in an active state

description

Attribute	description
Type	string
Default	undefined
Required	false
Description	Additional descriptive text that shows below the label

disabled

Attribute	disabled
Type	boolean
Default	undefined
Required	false
Description	Set disabled state of control

hideMenuOnClick

Attribute	hide-menu-on-click
Type	boolean
Default	true
Required	false
Description	The default behavior of the dropdown menu will close when this item is clicked

href

Attribute	href
Type	string
Default	undefined
Required	false
Description	certara-dropdown-item renders as a <button> element by default, unless given an href

target

Attribute	target
Type	"_blank" | "_parent" | "_self" | "_top" | "_unfencedTop"
Default	undefined
Required	false
Description	Target to be used in tandem with href if necessary

Events

Name	Description	Bubbles
certaraClick	Standard event emitted when the dropdown item is clicked	true
certaraDropdownItemClick	Internal event emitted when the dropdown item is clicked, used by certara-dropdown	true

Methods

There are no public methods available for this component

Slots

Name	Description
	Default dropdown-item content
description	Slot for descriptive text
right-content	Right-aligned content area for buttons and additional actions

certara-dropdown-checkbox

The <certara-dropdown-checkbox> uses all props from <certara-checkbox> with the exception of layout

Default

Dropdown item

Toggle dark mode

<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-checkbox>Dropdown item</certara-dropdown-checkbox>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownCheckbox } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Dropdown" open>
  <CertaraDropdownCheckbox>Dropdown item</CertaraDropdownCheckbox>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-checkbox>Dropdown item</certara-dropdown-checkbox>
</certara-dropdown>

With description

Dropdown item

Toggle dark mode

<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-checkbox description="Descriptive label for checkbox">
    Dropdown item
  </certara-dropdown-checkbox>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownCheckbox } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Dropdown" open>
  <CertaraDropdownCheckbox description="Descriptive label for checkbox">
    Dropdown item
  </CertaraDropdownCheckbox>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-checkbox description="Descriptive label for checkbox">
    Dropdown item
  </certara-dropdown-checkbox>
</certara-dropdown>

Disabled

Dropdown item

Toggle dark mode

<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-checkbox disabled>Dropdown item</certara-dropdown-checkbox>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownCheckbox } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Dropdown" open>
  <CertaraDropdownCheckbox disabled>Dropdown item</CertaraDropdownCheckbox>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-checkbox disabled>Dropdown item</certara-dropdown-checkbox>
</certara-dropdown>

Checked

Dropdown item

Toggle dark mode

<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-checkbox checked>Dropdown item</certara-dropdown-checkbox>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownCheckbox } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Dropdown" open>
  <CertaraDropdownCheckbox checked>Dropdown item</CertaraDropdownCheckbox>
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-checkbox checked>Dropdown item</certara-dropdown-checkbox>
</certara-dropdown>

Properties

checked

Attribute	checked
Type	boolean
Default	false
Required	false
Description	The checked state of the checkbox

description

Attribute	description
Type	string
Default	undefined
Required	false
Description	Additional descriptive text that shows below the label

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	The disabled state of the checkbox

hideMenuOnClick

Attribute	hide-menu-on-click
Type	boolean
Default	false
Required	false
Description	The default behavior of the dropdown menu will close when this item is clicked

indeterminate

Attribute	indeterminate
Type	boolean
Default	false
Required	false
Description	The indeterminate state of the checkbox. Can only be set via JavaScript

name

Attribute	name
Type	string
Default	this.inputId
Required	false
Description	The name of the checkbox

value

Attribute	value
Type	any
Default	'on'
Required	false
Description	The value of the checkbox

Events

Name	Description	Bubbles
certaraBlur	Standard event emitted when checkbox is blurred	true
certaraChange	Standard event emitted when checkbox is toggled	false
certaraDropdownItemClick	Internal event emitted when the dropdown item is clicked, used by certara-dropdown	true
certaraFocus	Standard event emitted when checkbox is focused	true

Methods

There are no public methods available for this component

Slots

Name	Description
	Default dropdown-item-checkbox content
description	Slot for descriptive text

certara-dropdown-divider

Section divider within a dropdown

Toggle dark mode

<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-divider></certara-dropdown-divider>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownDivider } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Dropdown" open>
  <CertaraDropdownDivider />
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-divider></certara-dropdown-divider>
</certara-dropdown>

Properties

There are no public properties available for this component

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

There are no slots available for this component

certara-dropdown-group

Grouping container within a dropdown. This provides the appropriate semantics for a group of items with a corresponding label

Toggle dark mode

<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-group headline="Dropdown Header"></certara-dropdown-group>
</certara-dropdown>

import { CertaraDropdown, CertaraDropdownGroup } from '@certara/certara-ui-react';

<CertaraDropdown buttonLabel="Dropdown" open>
  <CertaraDropdownGroup headline="Dropdown Header" />
</CertaraDropdown>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dropdown button-label="Dropdown" open>
  <certara-dropdown-group headline="Dropdown Header"></certara-dropdown-group>
</certara-dropdown>

Properties

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	The default slot

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 guidelines

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

Toggle dark mode

Bottom end

Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Top start

Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Top end

Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Left start

Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Left end

Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Right start

Dropdown Item Dropdown Item Dropdown Item

Toggle dark mode

Right end

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

Menu items

Item

Dropdown item

Toggle dark mode

Disabled item

Dropdown item disabled

Toggle dark mode

Header

Toggle dark mode

Divider

Toggle dark mode

Description

Label

Toggle dark mode

Right content

Dropdown item

New

Toggle dark mode

Checkboxes

Checkbox

Label

Toggle dark mode

Description

Label

Toggle dark mode

Disabled

Disabled label

Toggle dark mode

Checked

Label

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 dropdown menu in FigmaView dropdown item in Figma