Dropdown

A toggleable menu component for displaying a list of options, actions, or links.

Import

import { 
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem 
} from '@akitectio/aki-ui'

// TypeScript types
import type { 
  DropdownProps,
  DropdownToggleProps,
  DropdownMenuProps,
  DropdownItemProps 
} from '@akitectio/aki-ui'

Basic Usage

Basic Dropdown

import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@akitectio/aki-ui'

function BasicDropdown() {
  return (
    <Dropdown>
      <DropdownToggle>
        Options
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem>Action 1</DropdownItem>
        <DropdownItem>Action 2</DropdownItem>
        <DropdownItem>Action 3</DropdownItem>
        <DropdownItem divider />
        <DropdownItem variant="danger">Delete</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  )
}

Positioning

Different Positions

// Different alignment options
<Dropdown placement="bottom-start">
  <DropdownToggle>Left Aligned</DropdownToggle>
  <DropdownMenu>
    <DropdownItem>Option 1</DropdownItem>
  </DropdownMenu>
</Dropdown>

<Dropdown placement="bottom-end">
  <DropdownToggle>Right Aligned</DropdownToggle>
  <DropdownMenu>
    <DropdownItem>Option 1</DropdownItem>
  </DropdownMenu>
</Dropdown>

<Dropdown placement="top">
  <DropdownToggle>Drop Up</DropdownToggle>
  <DropdownMenu>
    <DropdownItem>Option 1</DropdownItem>
  </DropdownMenu>
</Dropdown>

With Icons and Descriptions

Rich Content

John Doe

john@example.com

import { UserIcon, CogIcon, LogoutIcon } from '@heroicons/react/24/outline'

<Dropdown>
  <DropdownToggle>User Menu</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>
      <div>
        <div className="font-medium">John Doe</div>
        <div className="text-sm text-gray-500">john@example.com</div>
      </div>
    </DropdownItem>
    <DropdownItem icon={<UserIcon />}>Profile</DropdownItem>
    <DropdownItem icon={<CogIcon />}>Settings</DropdownItem>
    <DropdownItem divider />
    <DropdownItem icon={<LogoutIcon />} variant="danger">
      Sign out
    </DropdownItem>
  </DropdownMenu>
</Dropdown>

API Reference

Dropdown Props

PropTypeDefaultDescription
placementstring'bottom-end'Dropdown menu placement
trigger'click' | 'hover''click'How to trigger the dropdown
disabledbooleanfalseDisable the dropdown
closeOnSelectbooleantrueClose dropdown when item is selected

DropdownItem Props

PropTypeDefaultDescription
variant'default' | 'danger''default'Visual variant of the item
disabledbooleanfalseDisable the item
dividerbooleanfalseRender as a divider
headerbooleanfalseRender as a header
iconReactNode-Icon to display
onClickfunction-Click handler

Accessibility

  • Supports keyboard navigation (Tab, Enter, Escape, Arrow keys)
  • ARIA attributes for screen readers (aria-expanded, aria-haspopup)
  • Focus management when opening/closing
  • Proper role attributes for menu items
  • Closes on Escape key press
  • Supports disabled state with proper ARIA attributes