Agriculture Design System
Beta
Design System for the Export Service

Dropdown menu

A dropdown menu displays a list of actions when a trigger is pressed.

View in StorybookView in Github
import { ... } from '@ag.ds-next/react/dropdown-menu';

Usage

Dropdown menu components can be imported via the dropdown-menu entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/dropdown-menu';

Props

DropdownMenu Props
PropTypeDescription
childrenReactNode | ((menuState: { isMenuOpen: boolean; }) => ReactNode)
popoverMaxHeight?number
The max height of the dropdown panel popover.
popoverOffset?number
Used to control the vertical distance between the reference element and popover element. Value is in pixels.
popoverPlacement?DropdownMenuPopoverPlacementDefault: "bottom-start"
The placement of the dropdown panel popover in relation to the dropdown menu button.
DropdownMenuButton Props
PropTypeDescription
alignSelf?ResponsiveProp<"center" | "flex-start" | "flex-end" | "stretch" | "start" | "end" | "baseline">
Sets the CSS align-self property.https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
aria-describedby?string
Identifies the element (or elements) that describes the object.
aria-label?string
Describes the button element to assistive technologies.
block?boolean
If true, the button will stretch to the fill the width of its container.
children?ReactNode
disabled?boolean
When true, prevents onClick from firing.
focusRingFor?"all" | "keyboard"
Display a focus indicator when the button receives focus. By default, this is set to 'keyboard'. 'all' shows for all users, includes programmatic focus, and 'keyboard' is for keyboard-only focus.
form?string
The id of the form to attach the button to. Use in conjunction with type="submit".
iconAfter?ComponentType<IconProps>
The icon to display after the buttons children.
iconBefore?ComponentType<IconProps>
The icon to display before the buttons children.
loading?boolean
When true, the button will display a loading indicator.
loadingLabel?string
Text to read out to assistive technologies when button is loading.
onBlur?FocusEventHandler<HTMLButtonElement>
Function to be fired following a blur event of the button.
onFocus?FocusEventHandler<HTMLButtonElement>
Function to be fired following a focus event of the button.
onKeyDown?KeyboardEventHandler<HTMLButtonElement>
Function to be fired following a keydown event of the button.
role?AriaRole
WAI-ARIA role.
size?"md" | "sm"
The size of the button.
tabIndex?number
The `tabIndex` attribute of the button.
type?"button" | "reset" | "submit"
The `type` attribute of the button.
variant?"text" | "primary" | "secondary" | "tertiary"Default: "text"
The variant of the button.
DropdownMenuPanel Props
PropTypeDescription
children?ReactNode
palette?ResponsiveProp<"dark" | "light">
DropdownMenuItem Props
PropTypeDescription
as?ElementType<any>
children?ReactNode
endElement?ReactNode
Used to add decorative elements to the end of the item such as Indicator dot or Notification badge.
icon?ComponentType<IconProps>
Used to add an icon to the start of the item.
id?string
Defines an identifier (ID) which must be unique.
onClick?(() => void)
Function to be fired following a click event of the item.
ref?Ref<Comp extends "symbol" | "pattern" | "text" | "image" | "switch" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | ... 47 more ... | keyof HTMLElementTagNameMap ? ElementTagNameMap[Comp] : Comp extends new (...args: any) => any ? InstanceType<...> : undefined>
DropdownMenuItemLink Props
PropTypeDescription
aria-label?string
Describes the anchor element to assistive technologies.
children?ReactNode
download?any
Causes the browser to treat the linked URL as a download.
endElement?ReactNode
Used to add decorative elements to the end of the item such as Indicator dot or Notification badge.
href?string
The URL that the hyperlink points to.
icon?ComponentType<IconProps>
Used to add an icon to the start of the item.
id?string
The ID of the hyperlink.
referrerPolicy?HTMLAttributeReferrerPolicy
How much of the referrer to send when following the link.
rel?string
The relationship of the linked URL as space-separated link types.
role?AriaRole
WAI-ARIA role.
target?HTMLAttributeAnchorTarget
Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
DropdownMenuItemRadio Props
PropTypeDescription
checkedboolean
Exposes the radio buttons state to assistive technology.
children?ReactNode
endElement?ReactNode
Used to add decorative elements to the end of the item such as Indicator dot or Notification badge.
id?string
Defines an identifier (ID) which must be unique.
onClick?(() => void)
Function to be fired following a click event of the item.
secondaryText?string
Supporting text for the item.

DropdownMenuDivider Props

DropdownMenuDivider does not have any props.

DropdownMenuGroup Props
PropTypeDescription
labelstring
The label of the group.
children?ReactNode
DropdownMenuGroupLink Props
PropTypeDescription
aria-label?string
Describes the anchor element to assistive technologies.
children?ReactNode
download?any
Causes the browser to treat the linked URL as a download.
href?string
The URL that the hyperlink points to.
id?string
The ID of the hyperlink.
referrerPolicy?HTMLAttributeReferrerPolicy
How much of the referrer to send when following the link.
rel?string
The relationship of the linked URL as space-separated link types.
role?AriaRole
WAI-ARIA role.
target?HTMLAttributeAnchorTarget
Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).

Source

You can view the full source code for this package on Github.