Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Usage

Import

import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownItemIcon,
  DropdownTrigger,
} from "@govtechmy/myds-react/dropdown";

Anatomy

export default () => (
  <Dropdown>
    <DropdownTrigger />
    <DropdownContent>
      <DropdownItem>
        <DropdownItemIcon />
      </DropdownItem>
    </DropdownContent>
  </Dropdown>
);

Examples

Trigger

Use the DropdownTrigger to wrap the trigger element that opens the dropdown menu.

Uncontrolled vs Controlled State

To use the dropdown menu in an uncontrolled state, set the defaultOpen prop to the initial state of the dropdown menu.

To use the dropdown menu in the controlled state, utilize the open and onOpenChange prop to handle the state programmatically.

Uncontrolled

Controlled

With Icon

You can add an icon to DropdownItem to provide visual cues for the user by using the DropdownItemIcon component.

Variant

You can set the variant prop to danger on DropdownItem to indicate that the action is destructive.

Disabled

DropdownItem can be disabled by setting the disabled prop to true. When disabled, the dropdown item will not be interactive.

You can set align on DialogContent to align where the content viewport should begin with respect to the trigger element. By default, the alignment is set to end. You can also set the alignment to start or center.

Start

Center

End

Side

You can set side on DialogContent to position where the content viewport should display with respect to the trigger element. By default, the side is set to bottom. You can also set the side to left, right & top.

Bottom

Top

Left

Right

Props

Prop	Type	Default
`open`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	-

DropdownTrigger

Prop	Type	Default
`asChild`	`boolean`	`false`

DropdownContent

Prop	Type	Default
`align`	`enum`	`end`
`side`	`enum`	`bottom`

DropdownItem

Prop	Type	Default
`disabled`	`boolean`	`false`
`variant`	`default \| danger`	`default`
`onSelect`	`(event: Event) => void`	-

MYDS