QUI VSCode0.7.0

Menu

import {Menu} from "@qui/react-vscode"

Examples

Dark Modern
import {ReactNode} from "react"


import {Button, Menu, MenuItem} from "@qui/react-vscode"


export default function Showcase(): ReactNode {
  return (
    <Menu anchor={<Button>Command</Button>}>
      <MenuItem>Preferences: Open User Settings (JSON)</MenuItem>
      <MenuItem disabled>Redo</MenuItem>
      <MenuItem>Cut</MenuItem>
      <Menu anchor={<MenuItem endIcon="chevron-right">Copy as</MenuItem>}>
        <MenuItem>Text</MenuItem>
        <MenuItem>Video</MenuItem>
        <Menu anchor={<MenuItem endIcon="chevron-right">Image</MenuItem>}>
          <MenuItem>.png</MenuItem>
          <MenuItem>.jpg</MenuItem>
          <MenuItem>.svg</MenuItem>
          <MenuItem>.gif</MenuItem>
        </Menu>
        <MenuItem>Audio</MenuItem>
      </Menu>
      <Menu anchor={<MenuItem endIcon="chevron-right">Share</MenuItem>}>
        <MenuItem>Mail</MenuItem>
        <MenuItem>Instagram</MenuItem>
      </Menu>
    </Menu>
  )
}

API

Name & DescriptionOption(s)Default
anchor
*
The interactive element that will be used to compute the position of the floating panel. If supplied as an element, event handlers will be applied for triggering the open/close state of the menu on interaction. This can also be supplied as a function that returns an element, or a reference to a ReactElement.
| Element
| ((
    props: Props,
  ) => Element)
| RefObject<
    HTMLElement | object
  >
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'div'
children
React children prop.
ReactNode
defaultValue
Optional default value in uncontrolled mode.
| string
| number
enableValueToggle
If true, the selected value will be reset if it is selected from the dropdown.
boolean
focusItemOnOpen
If true, the menu's first item will automatically gain focus when the component is opened. This is recommended for optimal accessibility.
boolean
true
id
id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
string
loop
Determines whether focus should loop around when navigating past the first or last item. This creates a continuous cycle through the menu items using arrow keys.
boolean
true
onValueChange
Event handler called when the selected item of the menu changes.
  • valuethe updated value.
  • reasonthe cause of the change event.
  • eventthe event associated with the change. Can be null.
(
  value: string | number,
  reason:
    | 'item-selected'
    | 'reset',
  event?:
    | MouseEvent
    | KeyboardEvent
    | TouchEvent
    | PointerEvent,
) => void
openOnArrowKeyDown
Whether pressing an arrow key on the navigation’s main axis opens the floating element.
boolean
true
openOnFocus
If true, the component will show when the anchor element is focused. This property is ignored if open is supplied.
boolean
false
openOnHover
If true, the component will show when the anchor element is hovered. This property is ignored if open is supplied.
boolean
false
restoreFocus
If true, focus will be restored to the component's anchor element on close.
boolean
true
value
Optional controlled state of the selected menu item.
| string
| number
Type
| Element
| ((
    props: Props,
  ) => Element)
| RefObject<
    HTMLElement | object
  >
Description
The interactive element that will be used to compute the position of the floating panel. If supplied as an element, event handlers will be applied for triggering the open/close state of the menu on interaction. This can also be supplied as a function that returns an element, or a reference to a ReactElement.
Type
| ElementType
| ComponentType
Default
'div'
Description
The component used for the root node. It can be a React component or element.
Type
ReactNode
Description
React children prop.
Type
| string
| number
Description
Optional default value in uncontrolled mode.
Type
boolean
Description
If true, the selected value will be reset if it is selected from the dropdown.
Type
boolean
Default
true
Description
If true, the menu's first item will automatically gain focus when the component is opened. This is recommended for optimal accessibility.
Type
string
Description
id attribute. If omitted, a unique identifier will be automatically generated for accessibility.
Type
boolean
Default
true
Description
Determines whether focus should loop around when navigating past the first or last item. This creates a continuous cycle through the menu items using arrow keys.
Type
(
  value: string | number,
  reason:
    | 'item-selected'
    | 'reset',
  event?:
    | MouseEvent
    | KeyboardEvent
    | TouchEvent
    | PointerEvent,
) => void
Description
Event handler called when the selected item of the menu changes.
  • valuethe updated value.
  • reasonthe cause of the change event.
  • eventthe event associated with the change. Can be null.
Type
boolean
Default
true
Description
Whether pressing an arrow key on the navigation’s main axis opens the floating element.
Type
boolean
Default
false
Description
If true, the component will show when the anchor element is focused. This property is ignored if open is supplied.
Type
boolean
Default
false
Description
If true, the component will show when the anchor element is hovered. This property is ignored if open is supplied.
Type
boolean
Default
true
Description
If true, focus will be restored to the component's anchor element on close.
Type
| string
| number
Description
Optional controlled state of the selected menu item.
Name & DescriptionOption(s)Default
children
*
React children prop. Mandatory.
ReactNode
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'button'
disabled
Controls the component's interactivity. If true, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.
boolean
endIcon
Icon positioned after the children. If supplied as a string, the vscode codicon will be applied. Supply as a ReactElement for additional customization.
| string
| ReactElement
startIcon
Icon; positioned after the children. If supplied as a string, the vscode codicon will be applied. Supply as a ReactElement for additional customization.
| string
| ReactElement
Type
ReactNode
Description
React children prop. Mandatory.
Type
| ElementType
| ComponentType
Default
'button'
Description
The component used for the root node. It can be a React component or element.
Type
boolean
Description
Controls the component's interactivity. If true, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.
Type
| string
| ReactElement
Description
Icon positioned after the children. If supplied as a string, the vscode codicon will be applied. Supply as a ReactElement for additional customization.
Type
| string
| ReactElement
Description
Icon; positioned after the children. If supplied as a string, the vscode codicon will be applied. Supply as a ReactElement for additional customization.
Previous
List
Next
Overlay Panel
Examples
Menu
API
MenuProps
MenuItemProps
Copyright © 2025 QUALCOMM incorporated. All rights reserved.