Dropdown menu
A dropdown menu displays a list of actions when a trigger is pressed.
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
Prop | Type | Description |
---|---|---|
children | ReactNode | ((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. |
Prop | Type | Description |
---|---|---|
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. |
Prop | Type | Description |
---|---|---|
children? | ReactNode | |
palette? | ResponsiveProp<"dark" | "light"> |
Prop | Type | Description |
---|---|---|
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> |
Prop | Type | Description |
---|---|---|
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>). |
Prop | Type | Description |
---|---|---|
checked | boolean | 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.
Prop | Type | Description |
---|---|---|
label | string | The label of the group. |
children? | ReactNode |
Prop | Type | Description |
---|---|---|
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.