DropdownMenu

A menu of actions that opens from a button, like the actions of an entry in the dashboard.

DropdownMenu.tsx

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger
} from 'alinea/components'
import {
  IcBaselineContentCopy,
  IcRoundArchive,
  IcRoundDelete,
  IcRoundEdit,
  IcRoundMoreHoriz
} from 'alinea/dashboard/icons'

export function DropdownMenuExample() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        variant="outline"
        size="icon"
        icon={IcRoundMoreHoriz}
        aria-label="Entry actions"
      />
      <DropdownMenuContent align="start" aria-label="Entry actions">
        <DropdownMenuItem icon={IcRoundEdit} onSelect={() => {}}>
          Rename
          <DropdownMenuShortcut>⌘R</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem icon={IcBaselineContentCopy}>
          Duplicate
        </DropdownMenuItem>
        <DropdownMenuItem icon={IcRoundArchive} disabled>
          Archive
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem icon={IcRoundDelete} variant="destructive">
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Checkbox and radio items

A menu can hold options as well: a checkbox item toggles one, a radio group picks one of several. Unlike actions they keep the menu open when selected.

DropdownMenuSelection.tsx

import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from 'alinea/components'
import {IcRoundFilterList} from 'alinea/dashboard/icons'
import {useState} from 'react'

export function DropdownMenuSelectionExample() {
  const [drafts, setDrafts] = useState(true)
  const [archived, setArchived] = useState(false)
  const [sort, setSort] = useState('updated')
  return (
    <DropdownMenu>
      <DropdownMenuTrigger variant="outline" icon={IcRoundFilterList}>
        View
      </DropdownMenuTrigger>
      <DropdownMenuContent aria-label="View options">
        <DropdownMenuGroup aria-label="Show">
          <DropdownMenuLabel>Show</DropdownMenuLabel>
          <DropdownMenuCheckboxItem
            checked={drafts}
            onCheckedChange={setDrafts}
          >
            Drafts
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={archived}
            onCheckedChange={setArchived}
          >
            Archived entries
          </DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>Sort by</DropdownMenuLabel>
        <DropdownMenuRadioGroup
          value={sort}
          onValueChange={setSort}
          aria-label="Sort by"
        >
          <DropdownMenuRadioItem value="updated">
            Last updated
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="title">Title</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Props

`<DropdownMenu>`

PropTypeDefaultDescription

openbooleanDefault –

defaultOpenbooleanDefault –

onOpenChange(open: boolean) => voidDefault –

`<DropdownMenuTrigger>`

Accepts every prop of Button.

`<DropdownMenuContent>`

PropTypeDefaultDescription

sideSideDefault –

alignAlignDefault –

sideOffsetnumberDefault –

alignOffsetnumberDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<DropdownMenuItem>`

PropTypeDefaultDescription

variant'default' | 'destructive'Default 'default'

hrefstringDefault –

targetstringDefault –

closeOnSelectbooleanDefault –Defaults to true

onSelect() => voidDefault –

iconIconType | ReactElementDefault –

disabledbooleanDefault –

insetbooleanDefault –Adds leading space so the item lines up with items that have an icon

textValuestringDefault –Text used for typeahead, defaults to the children if they are a string

Also accepts className and style and data-* attributes.

`<DropdownMenuCheckboxItem>`

PropTypeDefaultDescription

checked*booleanDefault –

onCheckedChange*(checked: boolean) => voidDefault –

closeOnSelectbooleanDefault falseDefaults to false

iconIconType | ReactElementDefault –

disabledbooleanDefault –

insetbooleanDefault –Adds leading space so the item lines up with items that have an icon

textValuestringDefault –Text used for typeahead, defaults to the children if they are a string

Also accepts className and style and data-* attributes.

`<DropdownMenuRadioGroup>`

PropTypeDefaultDescription

value*string | nullDefault –

onValueChange*(value: string) => voidDefault –

closeOnSelectbooleanDefault –Defaults to true

Also accepts id and aria-* labelling attributes.

`<DropdownMenuRadioItem>`

PropTypeDefaultDescription

value*stringDefault –

iconIconType | ReactElementDefault –

disabledbooleanDefault –

insetbooleanDefault –Adds leading space so the item lines up with items that have an icon

textValuestringDefault –Text used for typeahead, defaults to the children if they are a string

Also accepts className and style and data-* attributes.

`<DropdownMenuGroup>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts id and aria-* labelling attributes.

`<DropdownMenuLabel>`

PropTypeDefaultDescription

insetbooleanDefault –

Also accepts className and style.

`<DropdownMenuSeparator>`

`<DropdownMenuShortcut>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style.

`<DropdownMenuSub>`

PropTypeDefaultDescription

children*[ReactElement, ReactElement]Default –A DropdownMenuSubTrigger followed by a DropdownMenuSubContent

`<DropdownMenuSubTrigger>`

PropTypeDefaultDescription

iconIconType | ReactElementDefault –

disabledbooleanDefault –

insetbooleanDefault –Adds leading space so the item lines up with items that have an icon

textValuestringDefault –Text used for typeahead, defaults to the children if they are a string

Also accepts className and style and data-* attributes.

`<DropdownMenuSubContent>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

Accessibility

The menu opens with Enter, Space or the arrow keys, the arrow keys move through its items and typing jumps to a matching item. Escape closes it and returns focus to the trigger.