DitherCharts

Dropdown menu

Updated

DropdownMenu opens a list of actions from the button it wraps, in the select's dithered popup. Arrows and Home/End move between items, Enter or a click runs one, and Escape closes it, all returning focus to the button. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Nothing yet

import "@/components/dithercharts/controls.css"
import { DropdownMenu } from "@/components/dithercharts/dropdown-menu"

// Wrap one button; it gets aria-haspopup and aria-expanded.
<DropdownMenu
  items={[
    { label: "CSV", onSelect: exportCsv },
    { label: "PNG", onSelect: exportPng },
    { label: "PDF (Pro)", onSelect: exportPdf, disabled: true },
  ]}
>
  <Button>Export</Button>
</DropdownMenu>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add dropdown-menu

Props

It renders a native element, so every other attribute that element takes passes through.

DropdownMenu props
PropTypeDefaultDescription
childrenrequiredType ReactElement<TriggerProps>Default –One button that opens the menu, e.g. a Button. It gets the menu button's ARIA; its own handlers still run first.
itemsrequiredType readonly MenuItem[]Default –
collisionPaddingType { top?: number; bottom?: number }Default 8 eachSpace in px the menu keeps clear at the window's top and bottom, e.g. a sticky header's height.
classNameType stringDefault –