Dropdown Menu

Show design guidelines

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

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

<CertaraDropdown buttonLabel="With icon">
  <div slot="button-label">
    <CertaraIcon name="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 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

Framework HTML React Angular

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>

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

<CertaraDropdown placement="bottom-start" buttonLabel="Actions">
  <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 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>

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

<CertaraDropdown placement="bottom-end" buttonLabel="Actions">
  <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 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>

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

<CertaraDropdown placement="top-start" buttonLabel="Actions">
  <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 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>

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

<CertaraDropdown placement="top-end" buttonLabel="Actions">
  <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 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>

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

<CertaraDropdown placement="left-start" buttonLabel="Actions">
  <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 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>

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

<CertaraDropdown placement="left-end" buttonLabel="Actions">
  <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 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>

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

<CertaraDropdown placement="right-start" buttonLabel="Actions">
  <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 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>

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

<CertaraDropdown placement="right-end" buttonLabel="Actions">
  <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 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>

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

Properties

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

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

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

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

Framework HTML React Angular

Item

Dropdown item

Toggle dark mode

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

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

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

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

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

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

// 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">
  <certara-dropdown-item>Dropdown item</certara-dropdown-item>
</certara-dropdown>

Header

Toggle dark mode

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

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

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

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

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

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

// 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">
  <certara-dropdown-group headline="Dropdown Header"></certara-dropdown-group>
</certara-dropdown>

Divider

Toggle dark mode

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

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

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

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

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

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

// 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">
  <certara-dropdown-divider></certara-dropdown-divider>
</certara-dropdown>

Description

Label

Toggle dark mode

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

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

<CertaraDropdown 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 button-label="Dropdown">
  <certara-dropdown-item description="Description">Label</certara-dropdown-item>
</certara-dropdown>

Right content

Dropdown item

New

Toggle dark mode

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

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

<CertaraDropdown buttonLabel="Dropdown">
  <CertaraDropdownItem>
    Dropdown item
    <div slot="right-content">
      <CertaraBadge variant="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 button-label="Dropdown">
  <certara-dropdown-item>
    Dropdown item
    <div slot="right-content">
      <certara-badge variant="magenta">New</certara-badge>
    </div>
  </certara-dropdown-item>
</certara-dropdown>

certara-dropdown-item

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

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

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

Properties

checked

Attribute	checked
Type	boolean
Default	false
Required	false
Description

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

indeterminate

Attribute	indeterminate
Type	boolean
Default	false
Required	false
Description

name

Attribute	name
Type	string
Default	this.inputId
Required	false
Description

size

Attribute	size
Type	"md" | "sm"
Default	'md'
Required	false
Description

value

Attribute	value
Type	any
Default	'on'
Required	false
Description

Events

Name	Description	Bubbles
certaraBlur		true
certaraChange		true
certaraFocus		true

Slots

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