Dropdown Menu

A button that opens a menu of actions when clicked, with support for nested submenus.

import { DropdownMenu } from '@kaynora/ui'

export default function () {
  return (
    <DropdownMenu
      label='File'
      items={[
        { label: 'New' },
        { label: 'Open' },
        { label: 'Save' },
      ]}
    />
  )
}

The arrangement prop determines the direction the menu expands relative to the trigger.

import { DropdownMenu } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      gap: '20px',
    }}>
      <DropdownMenu
        label='Vertical'
        arrangement='vertical'
        items={[
          { label: 'Edit' },
          { label: 'Delete' },
        ]}
      />
      <DropdownMenu
        label='Horizontal'
        arrangement='horizontal'
        items={[
          { label: 'Edit' },
          { label: 'Delete' },
        ]}
      />
    </div>
  )
}

The disabled prop determines whether the dropdown menu can be opened.

import { DropdownMenu } from '@kaynora/ui'

export default function () {
  return (
    <DropdownMenu
      label='File'
      disabled
      items={[
        { label: 'New' },
        { label: 'Open' },
      ]}
    />
  )
}

<DropdownMenu />

string

{
  icon: ReactElement
  label: string
  items: ItemInterface[]
  onClick: (e: MouseEvent) => void
  href: string
  disabled: boolean
}[]

'vertical' | 'horizontal'

's' | 'm' | 'l'

boolean

{
  root: HTMLDivElementProps
  menu: MenuProps
}