Dropdown menu

The dropdown menu displays a list of selectable choices and options.

import * as React from 'react';
import {
  Text,
  MenuExtraContent,
  MenuDivider,
  MenuItem,
  DropdownMenu,
  IconButton,
} from '@itwin/itwinui-react';
import { SvgMore } from '@itwin/itwinui-icons-react';

export default () => {
  const dropdownMenuItems = (close) => [
    <MenuExtraContent key={0}>
      <>
        <Text variant='leading'>Terry Rivers</Text>
        <Text isMuted>terry.rivers@email.com</Text>
      </>
    </MenuExtraContent>,
    <MenuDivider key={1} />,
    <MenuItem key={2} onClick={() => close()}>
      View profile
    </MenuItem>,
    <MenuItem key={3} onClick={() => close()}>
      Sign out
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};

A dropdown menu is a control element meant to allow the user to select an option from a list. This is a list of options contained within a collapsible container and are mostly found in forms and dialogs. When it is clicked, it expands into a full list of items. This list can be scrollable if there are a lot of options, to avoid covering up too much of the interface. It collapses back into a single line when the user either selects an option in the list, or clicks outside of it.

Variants

Basic

The basic dropdown menu displays a list of clickable options when expanded. Additionally, each option can be disabled to disallow clicking.

import * as React from 'react';
import { MenuItem, DropdownMenu, IconButton } from '@itwin/itwinui-react';
import { SvgMore } from '@itwin/itwinui-icons-react';

export default () => {
  const dropdownMenuItems = (close) => [
    <MenuItem key={1} onClick={() => close()}>
      Item #1
    </MenuItem>,
    <MenuItem key={2} onClick={() => close()}>
      Item #2
    </MenuItem>,
    <MenuItem key={3} onClick={() => close()} disabled>
      Item #3
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};

Start icon

An icon may be display on the left side of option for better visualization of common menu items.

import * as React from 'react';
import { MenuItem, DropdownMenu, IconButton } from '@itwin/itwinui-react';
import {
  SvgMore,
  SvgCrop,
  SvgClipboard,
  SvgMove,
} from '@itwin/itwinui-icons-react';

export default () => {
  const dropdownMenuItems = (close) => [
    <MenuItem key={1} onClick={() => close()} startIcon={<SvgCrop />}>
      Crop
    </MenuItem>,
    <MenuItem key={2} onClick={() => close()} startIcon={<SvgClipboard />}>
      Paste
    </MenuItem>,
    <MenuItem key={3} onClick={() => close()} startIcon={<SvgMove />}>
      Move
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};

End icon

End icon goes on the right side of option.

import * as React from 'react';
import { MenuItem, DropdownMenu, IconButton } from '@itwin/itwinui-react';
import {
  SvgMore,
  SvgCrop,
  SvgClipboard,
  SvgMove,
} from '@itwin/itwinui-icons-react';

export default () => {
  const dropdownMenuItems = (close) => [
    <MenuItem key={1} onClick={() => close()} endIcon={<SvgCrop />}>
      Crop
    </MenuItem>,
    <MenuItem key={2} onClick={() => close()} endIcon={<SvgClipboard />}>
      Paste
    </MenuItem>,
    <MenuItem key={3} onClick={() => close()} endIcon={<SvgMove />}>
      Move
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};

Sublabel

The dropdown menu items can also be displayed on two lines, with a label and a sublabel for improved clarity.

import * as React from 'react';
import { MenuItem, DropdownMenu, IconButton } from '@itwin/itwinui-react';
import { SvgMore, SvgPlaceholder } from '@itwin/itwinui-icons-react';

export default () => {
  const dropdownMenuItems = (close) => [
    <MenuItem
      key={1}
      onClick={() => close()}
      startIcon={<SvgPlaceholder />}
      sublabel='Sublabel #1'
    >
      Item #1
    </MenuItem>,
    <MenuItem
      key={2}
      onClick={() => close()}
      startIcon={<SvgPlaceholder />}
      sublabel='Sublabel #2'
    >
      Item #2
    </MenuItem>,
    <MenuItem
      key={3}
      onClick={() => close()}
      startIcon={<SvgPlaceholder />}
      sublabel='Sublabel #3'
    >
      Item #3
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};

Submenu

The menu can contain one or more sub-menus. To show that an option within the list has another menu with more options associated to it, there is usually a caret icon pointing outward. Hovering on that option will expand the sub-menu outside the parent menu. Ideally, the list of child items should appear to the right of the parent item.

import * as React from 'react';
import { MenuItem, DropdownMenu, IconButton } from '@itwin/itwinui-react';
import { SvgMore } from '@itwin/itwinui-icons-react';

export default () => {
  const dropdownMenuItems = (close) => [
    <MenuItem key={1} onClick={() => close()}>
      Item #1
    </MenuItem>,
    <MenuItem key={2} onClick={() => close()}>
      Item #2
    </MenuItem>,
    <MenuItem
      key={3}
      subMenuItems={[
        <MenuItem
          key={4}
          subMenuItems={[
            <MenuItem key={7} onClick={() => close()}>
              Item #7
            </MenuItem>,
            <MenuItem key={8} onClick={() => close()}>
              Item #8
            </MenuItem>,
          ]}
        >
          Item #4
        </MenuItem>,
        <MenuItem key={5} onClick={() => close()}>
          Item #5
        </MenuItem>,
        <MenuItem
          key={6}
          subMenuItems={[
            <MenuItem key={9} onClick={() => close()}>
              Item #9
            </MenuItem>,
            <MenuItem key={10} onClick={() => close()}>
              Item #10
            </MenuItem>,
          ]}
        >
          Item #6
        </MenuItem>,
      ]}
    >
      Item #3
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};

Separator

The separator line helps to visually organize the options into distinct categories, making it easier for the user to locate and select the desired option.

import * as React from 'react';
import {
  MenuItem,
  DropdownMenu,
  IconButton,
  MenuDivider,
} from '@itwin/itwinui-react';
import { SvgMore } from '@itwin/itwinui-icons-react';

export default () => {
  const dropdownMenuItems = (close) => [
    <MenuItem key={1} onClick={() => close()}>
      Item #1
    </MenuItem>,
    <MenuItem key={2} onClick={() => close()}>
      Item #2
    </MenuItem>,
    <MenuDivider key={3} />,
    <MenuItem key={4} onClick={() => close()} disabled>
      Item #3
    </MenuItem>,
    <MenuItem key={5} onClick={() => close()}>
      Item #4
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};

Content

The menu can contain extra content, including both text and additional selectable dropdown items, which allows for additional nested options to be displayed. This type of dropdown menu is commonly used in applications that have multiple levels of options or actions, such as in navigation or switching user’s context.

import * as React from 'react';
import {
  Text,
  MenuExtraContent,
  MenuDivider,
  MenuItem,
  DropdownMenu,
  IconButton,
  Select,
} from '@itwin/itwinui-react';
import { SvgMore } from '@itwin/itwinui-icons-react';

export default () => {
  const [userType, setUserType] = React.useState('User');
  const dropdownMenuItems = (close) => [
    <MenuExtraContent key={0}>
      <>
        <Text variant='leading'>Terry Rivers</Text>
        <Text isMuted>terry.rivers@email.com</Text>
        <Select
          options={[
            { value: 'User', label: 'User' },
            { value: 'Moderator', label: 'Moderator' },
            { value: 'Administrator', label: 'Administrator' },
          ]}
          value={userType}
          onChange={(type) => setUserType(type)}
        />
      </>
    </MenuExtraContent>,
    <MenuDivider key={1} />,
    <MenuItem key={2} onClick={() => close()}>
      View profile
    </MenuItem>,
    <MenuItem key={3} onClick={() => close()}>
      Sign out
    </MenuItem>,
  ];

  return (
    <>
      <DropdownMenu menuItems={dropdownMenuItems}>
        <IconButton aria-label='More options'>
          <SvgMore />
        </IconButton>
      </DropdownMenu>
    </>
  );
};

Props

Prop	Description	Default
menuItems	List of menu items. Recommended to use MenuItem component. You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems. ((close: () => void) => Element[]) \| Element \| Element[]
role	ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'. string	'menu'
children	Child element to wrap dropdown with. ReactNode
visible	Controlled flag for whether the popover is visible. boolean
onVisibleChange	Callback invoked every time the popover visibility changes as a result of internal logic. Should be used alongside `visible` prop. (visible: boolean) => void
placement	Placement of the popover content. Placement	'bottom-start'
matchWidth	Whether the popover should match the width of the trigger. boolean
slot	string
style	CSSProperties
title	string
key	Key
defaultChecked	boolean
defaultValue	string \| number \| readonly string[]
suppressContentEditableWarning	boolean
suppressHydrationWarning	boolean
accessKey	string
autoFocus	boolean
className	string
contentEditable	Booleanish \| "inherit"
contextMenu	string
dir	string
draggable	Booleanish
hidden	boolean
id	string
lang	string
nonce	string
placeholder	string
spellCheck	Booleanish
tabIndex	number
translate	"yes" \| "no"
radioGroup	string
about	string
content	string
datatype	string
inlist	any
prefix	string
property	string
rel	string
resource	string
rev	string
typeof	string
vocab	string
autoCapitalize	string
autoCorrect	string
autoSave	string
color	string
itemProp	string
itemScope	boolean
itemType	string
itemID	string
itemRef	string
results	number
security	string
unselectable	"on" \| "off"
inputMode	Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute "search" \| "text" \| "none" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"
is	Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is string
aria-activedescendant	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. string
aria-atomic	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. Booleanish
aria-autocomplete	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. "list" \| "none" \| "inline" \| "both"
aria-braillelabel	Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label. string
aria-brailleroledescription	Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription. string
aria-busy	Booleanish
aria-checked	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected. boolean \| "true" \| "false" \| "mixed"
aria-colcount	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex. number
aria-colindex	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan. number
aria-colindextext	Defines a human readable text alternative of aria-colindex. @see aria-rowindextext. string
aria-colspan	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan. number
aria-controls	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns. string
aria-current	Indicates the element that represents the current item within a container or set of related elements. boolean \| "time" \| "step" \| "true" \| "false" \| "page" \| "location" \| "date"
aria-describedby	Identifies the element (or elements) that describes the object. @see aria-labelledby string
aria-description	Defines a string value that describes or annotates the current element. @see related aria-describedby. string
aria-details	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby. string
aria-disabled	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly. Booleanish
aria-dropeffect	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1 "link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"
aria-errormessage	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby. string
aria-expanded	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. Booleanish
aria-flowto	Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. string
aria-grabbed	Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1 Booleanish
aria-haspopup	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. boolean \| "dialog" \| "menu" \| "grid" \| "listbox" \| "tree" \| "true" \| "false"
aria-hidden	Indicates whether the element is exposed to an accessibility API. @see aria-disabled. Booleanish
aria-invalid	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage. boolean \| "true" \| "false" \| "grammar" \| "spelling"
aria-keyshortcuts	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. string
aria-label	Defines a string value that labels the current element. @see aria-labelledby. string
aria-labelledby	Identifies the element (or elements) that labels the current element. @see aria-describedby. string
aria-level	Defines the hierarchical level of an element within a structure. number
aria-live	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. "off" \| "assertive" \| "polite"
aria-modal	Indicates whether an element is modal when displayed. Booleanish
aria-multiline	Indicates whether a text box accepts multiple lines of input or only a single line. Booleanish
aria-multiselectable	Indicates that the user may select more than one item from the current selectable descendants. Booleanish
aria-orientation	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. "horizontal" \| "vertical"
aria-owns	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls. string
aria-placeholder	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. string
aria-posinset	Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize. number
aria-pressed	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected. boolean \| "true" \| "false" \| "mixed"
aria-readonly	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled. Booleanish
aria-relevant	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic. "text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"
aria-required	Indicates that user input is required on the element before a form may be submitted. Booleanish
aria-roledescription	Defines a human-readable, author-localized description for the role of an element. string
aria-rowcount	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex. number
aria-rowindex	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan. number
aria-rowindextext	Defines a human readable text alternative of aria-rowindex. @see aria-colindextext. string
aria-rowspan	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan. number
aria-selected	Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed. Booleanish
aria-setsize	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset. number
aria-sort	Indicates if items in a table or grid are sorted in ascending or descending order. "none" \| "ascending" \| "descending" \| "other"
aria-valuemax	Defines the maximum allowed value for a range widget. number
aria-valuemin	Defines the minimum allowed value for a range widget. number
aria-valuenow	Defines the current value for a range widget. @see aria-valuetext. number
aria-valuetext	Defines the human readable text alternative of aria-valuenow for a range widget. string
dangerouslySetInnerHTML	{ __html: string \| TrustedHTML; }
onCopy	ClipboardEventHandler<HTMLUListElement>
onCopyCapture	ClipboardEventHandler<HTMLUListElement>
onCut	ClipboardEventHandler<HTMLUListElement>
onCutCapture	ClipboardEventHandler<HTMLUListElement>
onPaste	ClipboardEventHandler<HTMLUListElement>
onPasteCapture	ClipboardEventHandler<HTMLUListElement>
onCompositionEnd	CompositionEventHandler<HTMLUListElement>
onCompositionEndCapture	CompositionEventHandler<HTMLUListElement>
onCompositionStart	CompositionEventHandler<HTMLUListElement>
onCompositionStartCapture	CompositionEventHandler<HTMLUListElement>
onCompositionUpdate	CompositionEventHandler<HTMLUListElement>
onCompositionUpdateCapture	CompositionEventHandler<HTMLUListElement>
onFocus	FocusEventHandler<HTMLUListElement>
onFocusCapture	FocusEventHandler<HTMLUListElement>
onBlur	FocusEventHandler<HTMLUListElement>
onBlurCapture	FocusEventHandler<HTMLUListElement>
onChange	FormEventHandler<HTMLUListElement>
onChangeCapture	FormEventHandler<HTMLUListElement>
onBeforeInput	FormEventHandler<HTMLUListElement>
onBeforeInputCapture	FormEventHandler<HTMLUListElement>
onInput	FormEventHandler<HTMLUListElement>
onInputCapture	FormEventHandler<HTMLUListElement>
onReset	FormEventHandler<HTMLUListElement>
onResetCapture	FormEventHandler<HTMLUListElement>
onSubmit	FormEventHandler<HTMLUListElement>
onSubmitCapture	FormEventHandler<HTMLUListElement>
onInvalid	FormEventHandler<HTMLUListElement>
onInvalidCapture	FormEventHandler<HTMLUListElement>
onLoad	ReactEventHandler<HTMLUListElement>
onLoadCapture	ReactEventHandler<HTMLUListElement>
onError	ReactEventHandler<HTMLUListElement>
onErrorCapture	ReactEventHandler<HTMLUListElement>
onKeyDown	KeyboardEventHandler<HTMLUListElement>
onKeyDownCapture	KeyboardEventHandler<HTMLUListElement>
onKeyPress	@deprecated KeyboardEventHandler<HTMLUListElement>
onKeyPressCapture	@deprecated KeyboardEventHandler<HTMLUListElement>
onKeyUp	KeyboardEventHandler<HTMLUListElement>
onKeyUpCapture	KeyboardEventHandler<HTMLUListElement>
onAbort	ReactEventHandler<HTMLUListElement>
onAbortCapture	ReactEventHandler<HTMLUListElement>
onCanPlay	ReactEventHandler<HTMLUListElement>
onCanPlayCapture	ReactEventHandler<HTMLUListElement>
onCanPlayThrough	ReactEventHandler<HTMLUListElement>
onCanPlayThroughCapture	ReactEventHandler<HTMLUListElement>
onDurationChange	ReactEventHandler<HTMLUListElement>
onDurationChangeCapture	ReactEventHandler<HTMLUListElement>
onEmptied	ReactEventHandler<HTMLUListElement>
onEmptiedCapture	ReactEventHandler<HTMLUListElement>
onEncrypted	ReactEventHandler<HTMLUListElement>
onEncryptedCapture	ReactEventHandler<HTMLUListElement>
onEnded	ReactEventHandler<HTMLUListElement>
onEndedCapture	ReactEventHandler<HTMLUListElement>
onLoadedData	ReactEventHandler<HTMLUListElement>
onLoadedDataCapture	ReactEventHandler<HTMLUListElement>
onLoadedMetadata	ReactEventHandler<HTMLUListElement>
onLoadedMetadataCapture	ReactEventHandler<HTMLUListElement>
onLoadStart	ReactEventHandler<HTMLUListElement>
onLoadStartCapture	ReactEventHandler<HTMLUListElement>
onPause	ReactEventHandler<HTMLUListElement>
onPauseCapture	ReactEventHandler<HTMLUListElement>
onPlay	ReactEventHandler<HTMLUListElement>
onPlayCapture	ReactEventHandler<HTMLUListElement>
onPlaying	ReactEventHandler<HTMLUListElement>
onPlayingCapture	ReactEventHandler<HTMLUListElement>
onProgress	ReactEventHandler<HTMLUListElement>
onProgressCapture	ReactEventHandler<HTMLUListElement>
onRateChange	ReactEventHandler<HTMLUListElement>
onRateChangeCapture	ReactEventHandler<HTMLUListElement>
onResize	ReactEventHandler<HTMLUListElement>
onResizeCapture	ReactEventHandler<HTMLUListElement>
onSeeked	ReactEventHandler<HTMLUListElement>
onSeekedCapture	ReactEventHandler<HTMLUListElement>
onSeeking	ReactEventHandler<HTMLUListElement>
onSeekingCapture	ReactEventHandler<HTMLUListElement>
onStalled	ReactEventHandler<HTMLUListElement>
onStalledCapture	ReactEventHandler<HTMLUListElement>
onSuspend	ReactEventHandler<HTMLUListElement>
onSuspendCapture	ReactEventHandler<HTMLUListElement>
onTimeUpdate	ReactEventHandler<HTMLUListElement>
onTimeUpdateCapture	ReactEventHandler<HTMLUListElement>
onVolumeChange	ReactEventHandler<HTMLUListElement>
onVolumeChangeCapture	ReactEventHandler<HTMLUListElement>
onWaiting	ReactEventHandler<HTMLUListElement>
onWaitingCapture	ReactEventHandler<HTMLUListElement>
onAuxClick	MouseEventHandler<HTMLUListElement>
onAuxClickCapture	MouseEventHandler<HTMLUListElement>
onClick	MouseEventHandler<HTMLUListElement>
onClickCapture	MouseEventHandler<HTMLUListElement>
onContextMenu	MouseEventHandler<HTMLUListElement>
onContextMenuCapture	MouseEventHandler<HTMLUListElement>
onDoubleClick	MouseEventHandler<HTMLUListElement>
onDoubleClickCapture	MouseEventHandler<HTMLUListElement>
onDrag	DragEventHandler<HTMLUListElement>
onDragCapture	DragEventHandler<HTMLUListElement>
onDragEnd	DragEventHandler<HTMLUListElement>
onDragEndCapture	DragEventHandler<HTMLUListElement>
onDragEnter	DragEventHandler<HTMLUListElement>
onDragEnterCapture	DragEventHandler<HTMLUListElement>
onDragExit	DragEventHandler<HTMLUListElement>
onDragExitCapture	DragEventHandler<HTMLUListElement>
onDragLeave	DragEventHandler<HTMLUListElement>
onDragLeaveCapture	DragEventHandler<HTMLUListElement>
onDragOver	DragEventHandler<HTMLUListElement>
onDragOverCapture	DragEventHandler<HTMLUListElement>
onDragStart	DragEventHandler<HTMLUListElement>
onDragStartCapture	DragEventHandler<HTMLUListElement>
onDrop	DragEventHandler<HTMLUListElement>
onDropCapture	DragEventHandler<HTMLUListElement>
onMouseDown	MouseEventHandler<HTMLUListElement>
onMouseDownCapture	MouseEventHandler<HTMLUListElement>
onMouseEnter	MouseEventHandler<HTMLUListElement>
onMouseLeave	MouseEventHandler<HTMLUListElement>
onMouseMove	MouseEventHandler<HTMLUListElement>
onMouseMoveCapture	MouseEventHandler<HTMLUListElement>
onMouseOut	MouseEventHandler<HTMLUListElement>
onMouseOutCapture	MouseEventHandler<HTMLUListElement>
onMouseOver	MouseEventHandler<HTMLUListElement>
onMouseOverCapture	MouseEventHandler<HTMLUListElement>
onMouseUp	MouseEventHandler<HTMLUListElement>
onMouseUpCapture	MouseEventHandler<HTMLUListElement>
onSelect	ReactEventHandler<HTMLUListElement>
onSelectCapture	ReactEventHandler<HTMLUListElement>
onTouchCancel	TouchEventHandler<HTMLUListElement>
onTouchCancelCapture	TouchEventHandler<HTMLUListElement>
onTouchEnd	TouchEventHandler<HTMLUListElement>
onTouchEndCapture	TouchEventHandler<HTMLUListElement>
onTouchMove	TouchEventHandler<HTMLUListElement>
onTouchMoveCapture	TouchEventHandler<HTMLUListElement>
onTouchStart	TouchEventHandler<HTMLUListElement>
onTouchStartCapture	TouchEventHandler<HTMLUListElement>
onPointerDown	PointerEventHandler<HTMLUListElement>
onPointerDownCapture	PointerEventHandler<HTMLUListElement>
onPointerMove	PointerEventHandler<HTMLUListElement>
onPointerMoveCapture	PointerEventHandler<HTMLUListElement>
onPointerUp	PointerEventHandler<HTMLUListElement>
onPointerUpCapture	PointerEventHandler<HTMLUListElement>
onPointerCancel	PointerEventHandler<HTMLUListElement>
onPointerCancelCapture	PointerEventHandler<HTMLUListElement>
onPointerEnter	PointerEventHandler<HTMLUListElement>
onPointerEnterCapture	PointerEventHandler<HTMLUListElement>
onPointerLeave	PointerEventHandler<HTMLUListElement>
onPointerLeaveCapture	PointerEventHandler<HTMLUListElement>
onPointerOver	PointerEventHandler<HTMLUListElement>
onPointerOverCapture	PointerEventHandler<HTMLUListElement>
onPointerOut	PointerEventHandler<HTMLUListElement>
onPointerOutCapture	PointerEventHandler<HTMLUListElement>
onGotPointerCapture	PointerEventHandler<HTMLUListElement>
onGotPointerCaptureCapture	PointerEventHandler<HTMLUListElement>
onLostPointerCapture	PointerEventHandler<HTMLUListElement>
onLostPointerCaptureCapture	PointerEventHandler<HTMLUListElement>
onScroll	UIEventHandler<HTMLUListElement>
onScrollCapture	UIEventHandler<HTMLUListElement>
onWheel	WheelEventHandler<HTMLUListElement>
onWheelCapture	WheelEventHandler<HTMLUListElement>
onAnimationStart	AnimationEventHandler<HTMLUListElement>
onAnimationStartCapture	AnimationEventHandler<HTMLUListElement>
onAnimationEnd	AnimationEventHandler<HTMLUListElement>
onAnimationEndCapture	AnimationEventHandler<HTMLUListElement>
onAnimationIteration	AnimationEventHandler<HTMLUListElement>
onAnimationIterationCapture	AnimationEventHandler<HTMLUListElement>
onTransitionEnd	TransitionEventHandler<HTMLUListElement>
onTransitionEndCapture	TransitionEventHandler<HTMLUListElement>
portal	Where should the element be portaled to? If true, it will portal into nearest ThemeContext.portalContainer. If false, it will not be portaled. Otherwise, it will portal to the element passed to `to`. If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed). boolean \| { to: HTMLElement \| (() => HTMLElement); }	true
as	"symbol" \| "object" \| "div" \| "ul" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| ... 158 more ... \| FunctionComponent<...>

Related components