Getting Started
Installation
Theming, Patterns, and Pitfalls
Components
Buttons
ButtonButton GroupIcon ButtonInline Icon Button
Form Controls
CheckboxComboboxNumber InputPassword InputRadioSelectSwitchText Input
Data Display
AvatarData Grid / TableDividerIconLinkSegmented ControlTag
Overlays
DialogDrawerMenuPopoverTooltip
Disclosure
AccordionBreadcrumbsCollapsiblePaginationTabs
Feedback
Inline NotificationProgressProgress RingToast Notification

Menu

import {Menu} from "@qualcomm-ui/react/menu"

Examples

Item Customization

Compose the menu to include icons and commands.

Context Menu

Demonstrates how to trigger a menu on right-click or other context events.

Nested Menus

Compose nested menus by nesting <Menu.Root> components inside each other.

<q-menu>
  <button emphasis="primary" q-menu-button variant="fill">Show Menu</button>
  <q-portal>
    <div q-menu-positioner>
      <div q-menu-content>
        <button q-menu-item value="new-text-file">New Text File</button>
        <button q-menu-item value="new-file">New File...</button>
        <q-menu>
          <button q-menu-trigger-item value="open-recent">
            Open Recents
          </button>

          <q-portal>
            <div q-menu-positioner>
              <div q-menu-content>
                <button q-menu-item value="file-1">File 1</button>
                <button q-menu-item value="file-2">File 2</button>
                <button q-menu-item value="file-3">File 3</button>
              </div>
            </div>
          </q-portal>
        </q-menu>
      </div>
    </div>
  </q-portal>
</q-menu>

Menu items can be links.

<div q-menu-content>
  <a
    href="https://angular.dev"
    q-menu-item
    target="_blank"
    value="angular-dev"
  >
    <div icon="ExternalLink" q-menu-item-start-icon></div>
    angular.dev
  </a>
  <a
    fragment="links"
    q-menu-item
    routerLink="/components/menu"
    value="menu-links-demo"
  >
    Menu Links Demo
  </a>
</div>

Groups

Use the q-menu-item-group component to group menu items.

Item Types

There are three item types, each corresponding to one of the three types of aria menu item roles:

  • q-menu-item — menuitem
  • q-menu-radio-item — menuitemradio
  • q-menu-checkbox-item — menuitemcheckbox

Checkbox Items

Use checkbox items when you need options that are individually selectable.

Checkbox Group State

Checkbox item state is controlled individually on each item. Use the useCheckboxGroup hook to manage the state of a group of checkbox items.

<div q-menu-item-group>
  <label q-menu-item-group-label>Choose an option</label>
  @for (item of items; track item.value) {
    <button
      q-menu-checkbox-item
      [checked]="checkboxGroup.isChecked(item.value)"
      [value]="item.value"
      (checkedChanged)="checkboxGroup.toggleValue(item.value)"
    >
      {{ item.label }}
      <div q-menu-item-indicator></div>
    </button>
  }
</div>

Radio Group

Radio items are grouped such that only one can be selected at a time.

<div q-menu-radio-item-group>
  <label q-menu-item-group-label>Choose an option</label>
  <div q-menu-radio-item-group>
    <button q-menu-radio-item value="option-1">
      Option 1
      <div q-menu-item-indicator></div>
    </button>
    <button q-menu-radio-item value="option-2">
      Option 2
      <div q-menu-item-indicator></div>
    </button>
    <button q-menu-radio-item value="option-3">
      Option 3
      <div q-menu-item-indicator></div>
    </button>
  </div>
</div>

Radio Group State

Radio item state can be controlled via the value property on the parent menu-radio-item-group element.

<div q-menu-radio-item-group>
  <label q-menu-item-group-label>Choose an option</label>
  <div q-menu-radio-item-group [(value)]="value">
    <button q-menu-radio-item value="option-1">
      Option 1
      <div q-menu-item-indicator></div>
    </button>
    <button q-menu-radio-item value="option-2">
      Option 2
      <div q-menu-item-indicator></div>
    </button>
    <button q-menu-radio-item value="option-3">
      Option 3
      <div q-menu-item-indicator></div>
    </button>
  </div>
</div>

Controlled State

The menu's visibility can be controlled via the open, openChange, and defaultOpen properties.

  • Use open to explicitly set whether the menu is open (controlled mode).
  • Use openChanged to be notified when the menu requests to open or close.
  • Use defaultOpen to set the initial open state when you don't need to control it yourself (uncontrolled mode).

In controlled mode, the open prop should be updated in response to openChanged events to reflect the desired visibility.

Placement

Configure the menu's placement using the positioning.placement prop.

Anchor Point

Use the positioning.anchorPoint prop to control the anchor point of the menu.

Anchor

Avatar

Here's an example that composes the Menu with the Avatar component to display a user account menu.

TODO: add

Within Dialog

When using the Menu inside a Dialog, don't render the q-menu-positioner within a <q-portal> element.

Hide When Detached

Use the positioning.hideWhenDetached prop to hide the menu when it's detached from the trigger.

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5

API

<q-menu>

PropTypeDefault
anchorPoint
The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
{
  x: number
  y: number
}
closeOnSelect
Whether to close the menu when an option is selected
boolean
true
composite
Whether the menu is composed with other composite widgets like a combobox or tabs
boolean
true
defaultHighlightedValue
The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
string
defaultOpen
The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.
boolean
dir
The document's text/writing direction.
'ltr' | 'rtl'
"ltr"
getRootNode
A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.
() =>
| Node
| ShadowRoot
| Document
highlightedValue
The controlled highlighted value of the menu item.
string
id
id attribute. If omitted, a unique identifier will be generated for accessibility.)
string
immediate
Whether to synchronize the present change immediately or defer it to the next frame.
boolean
false
lazyMount
When true, the component will not be rendered in the DOM until it becomes visible or active.
boolean
false
loopFocus
Whether to loop the keyboard navigation.
boolean
false
open
The controlled open state of the menu
boolean
positioning
The options used to dynamically position the menu
PositioningOptions
present
The controlled presence of the node.
boolean
size
'sm' | 'md'
skipAnimationOnMount
Whether to allow the initial presence animation.
boolean
false
typeahead
Whether the pressing printable characters should trigger typeahead navigation
boolean
true
unmountOnExit
When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.
boolean
false
(escapeKeyDown)
Function called when the escape key is pressed
KeyboardEvent
(exitCompleted)
Function called when the animation ends in the closed state
void
(focusOutside)
Function called when the focus is moved outside the component
CustomEvent<{
  event?: E
}>
(highlightChanged)
Function called when the highlighted menu item changes.
string
(interactOutside)
Function called when an interaction happens outside the component
| CustomEvent<{event?: E}>
| CustomEvent<{event?: E}>
(navigate)
Function to navigate to the selected item if it's an anchor element
{
  href: string
  node: HTMLAnchorElement
  value: string
}
(openChanged)
Function called when the open state changes
boolean
(pointerDownOutside)
Function called when the pointer is pressed down outside the component
CustomEvent<{
  event?: E
}>
(requestDismissed)
Function called when this layer is closed due to a parent layer being closed
CustomEvent<{
  originalIndex: number
  originalLayer: HTMLElement
  targetIndex: number
  targetLayer: HTMLElement
}>
(selected)
Function called when a menu item is selected.
string
anchorPoint
Type
{
  x: number
  y: number
}
Description
The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
closeOnSelect
Type
boolean
Description
Whether to close the menu when an option is selected
composite
Type
boolean
Description
Whether the menu is composed with other composite widgets like a combobox or tabs
defaultHighlightedValue
Type
string
Description
The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
defaultOpen
Type
boolean
Description
The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.
dir
Type
'ltr' | 'rtl'
Description
The document's text/writing direction.
getRootNode
Type
() =>
| Node
| ShadowRoot
| Document
Description
A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.
highlightedValue
Type
string
Description
The controlled highlighted value of the menu item.
id
Type
string
Description
id attribute. If omitted, a unique identifier will be generated for accessibility.)
immediate
Type
boolean
Description
Whether to synchronize the present change immediately or defer it to the next frame.
lazyMount
Type
boolean
Description
When true, the component will not be rendered in the DOM until it becomes visible or active.
loopFocus
Type
boolean
Description
Whether to loop the keyboard navigation.
open
Type
boolean
Description
The controlled open state of the menu
positioning
Type
PositioningOptions
Description
The options used to dynamically position the menu
present
Type
boolean
Description
The controlled presence of the node.
size
Type
'sm' | 'md'
skipAnimationOnMount
Type
boolean
Description
Whether to allow the initial presence animation.
typeahead
Type
boolean
Description
Whether the pressing printable characters should trigger typeahead navigation
unmountOnExit
Type
boolean
Description
When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.
(escapeKeyDown)
Type
KeyboardEvent
Description
Function called when the escape key is pressed
(exitCompleted)
Type
void
Description
Function called when the animation ends in the closed state
(focusOutside)
Type
CustomEvent<{
  event?: E
}>
Description
Function called when the focus is moved outside the component
(highlightChanged)
Type
string
Description
Function called when the highlighted menu item changes.
(interactOutside)
Type
| CustomEvent<{event?: E}>
| CustomEvent<{event?: E}>
Description
Function called when an interaction happens outside the component
(navigate)
Type
{
  href: string
  node: HTMLAnchorElement
  value: string
}
Description
Function to navigate to the selected item if it's an anchor element
(openChanged)
Type
boolean
Description
Function called when the open state changes
(pointerDownOutside)
Type
CustomEvent<{
  event?: E
}>
Description
Function called when the pointer is pressed down outside the component
(requestDismissed)
Type
CustomEvent<{
  originalIndex: number
  originalLayer: HTMLElement
  targetIndex: number
  targetLayer: HTMLElement
}>
Description
Function called when this layer is closed due to a parent layer being closed
(selected)
Type
string
Description
Function called when a menu item is selected.

q-menu-item

Each menu item type shares the same base properties.
PropType
value
*
The unique value of the menu item option.
string
closeOnSelect
Whether the menu should be closed when the option is selected.
boolean
disabled
Whether the menu item is disabled
boolean
valueText
The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.
string
(selected)
Emitted when the item is selected
void
value
*
Type
string
Description
The unique value of the menu item option.
closeOnSelect
Type
boolean
Description
Whether the menu should be closed when the option is selected.
disabled
Type
boolean
Description
Whether the menu item is disabled
valueText
Type
string
Description
The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.
(selected)
Type
void
Description
Emitted when the item is selected

q-menu-checkbox-item

Each menu item type shares the same base properties.
PropType
value
*
The unique value of the menu item option.
string
checked
Whether the option is checked
boolean
closeOnSelect
Whether the menu should be closed when the option is selected.
boolean
defaultChecked
boolean
disabled
Whether the menu item is disabled
boolean
valueText
The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.
string
(checkedChanged)
boolean
(selected)
Emitted when the item is selected
void
value
*
Type
string
Description
The unique value of the menu item option.
checked
Type
boolean
Description
Whether the option is checked
closeOnSelect
Type
boolean
Description
Whether the menu should be closed when the option is selected.
defaultChecked
Type
boolean
disabled
Type
boolean
Description
Whether the menu item is disabled
valueText
Type
string
Description
The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.
(checkedChanged)
Type
boolean
(selected)
Type
void
Description
Emitted when the item is selected

PositioningOptions

The positioning prop accepts an object with the following shape:

PropTypeDefault
arrowPadding
The minimum padding between the arrow and the floating element's corner.
number
4
boundary
The overflow boundary of the reference element
    () =>
    | 'clippingAncestors'
    | Element
    | Array<Element>
    | {
        height: number
        width: number
        x: number
        y: number
      }
    fitViewport
    Whether the popover should fit the viewport.
    boolean
    flip
    Whether to flip the placement when the floating element overflows the boundary.
    | boolean
    | Array<
        | 'bottom'
        | 'bottom-end'
        | 'bottom-start'
        | 'left'
        | 'left-end'
        | 'left-start'
        | 'right'
        | 'right-end'
        | 'right-start'
        | 'top'
        | 'top-end'
        | 'top-start'
      >
    true
    getAnchorRect
    Function that returns the anchor rect
      (
        element:
          | HTMLElement
          | VirtualElement,
      ) => {
        height?: number
        width?: number
        x?: number
        y?: number
      }
      gutter
      The main axis offset or gap between the reference and floating element
      number
      8
      hideWhenDetached
      Whether the popover should be hidden when the reference element is detached
      boolean
      listeners
      Options to activate auto-update listeners
      | boolean
      | {
          ancestorResize?: boolean
          ancestorScroll?: boolean
          animationFrame?: boolean
          elementResize?: boolean
          layoutShift?: boolean
        }
      true
      offset
      The offset of the floating element
      {
        crossAxis?: number
        mainAxis?: number
      }
      onComplete
      Function called when the placement is computed
        (
          data: ComputePositionReturn,
        ) => void
        onPositioned
        Function called when the floating element is positioned or not
          (data: {
            placed: boolean
          }) => void
          overflowPadding
          The virtual padding around the viewport edges to check for overflow
          number
          overlap
          Whether the floating element can overlap the reference element
          boolean
          false
          placement
          The initial placement of the floating element
          | 'bottom'
          | 'bottom-end'
          | 'bottom-start'
          | 'left'
          | 'left-end'
          | 'left-start'
          | 'right'
          | 'right-end'
          | 'right-start'
          | 'top'
          | 'top-end'
          | 'top-start'
          'bottom'
          sameWidth
          Whether to make the floating element same width as the reference element
          boolean
          shift
          The secondary axis offset or gap between the reference and floating elements
          number
          slide
          Whether the popover should slide when it overflows.
          boolean
          strategy
          The strategy to use for positioning
          | 'absolute'
          | 'fixed'
          'absolute'
          updatePosition
          A callback that will be called when the popover needs to calculate its position.
            (data: {
              updatePosition: () => Promise<void>
            }) => void | Promise<void>
            arrowPadding
            Type
            number
            Description
            The minimum padding between the arrow and the floating element's corner.
            boundary
            Type
            () =>
            | 'clippingAncestors'
            | Element
            | Array<Element>
            | {
                height: number
                width: number
                x: number
                y: number
              }
            Description
            The overflow boundary of the reference element
              fitViewport
              Type
              boolean
              Description
              Whether the popover should fit the viewport.
              flip
              Type
              | boolean
              | Array<
                  | 'bottom'
                  | 'bottom-end'
                  | 'bottom-start'
                  | 'left'
                  | 'left-end'
                  | 'left-start'
                  | 'right'
                  | 'right-end'
                  | 'right-start'
                  | 'top'
                  | 'top-end'
                  | 'top-start'
                >
              Description
              Whether to flip the placement when the floating element overflows the boundary.
              getAnchorRect
              Type
              (
                element:
                  | HTMLElement
                  | VirtualElement,
              ) => {
                height?: number
                width?: number
                x?: number
                y?: number
              }
              Description
              Function that returns the anchor rect
                gutter
                Type
                number
                Description
                The main axis offset or gap between the reference and floating element
                hideWhenDetached
                Type
                boolean
                Description
                Whether the popover should be hidden when the reference element is detached
                listeners
                Type
                | boolean
                | {
                    ancestorResize?: boolean
                    ancestorScroll?: boolean
                    animationFrame?: boolean
                    elementResize?: boolean
                    layoutShift?: boolean
                  }
                Description
                Options to activate auto-update listeners
                offset
                Type
                {
                  crossAxis?: number
                  mainAxis?: number
                }
                Description
                The offset of the floating element
                onComplete
                Type
                (
                  data: ComputePositionReturn,
                ) => void
                Description
                Function called when the placement is computed
                  onPositioned
                  Type
                  (data: {
                    placed: boolean
                  }) => void
                  Description
                  Function called when the floating element is positioned or not
                    overflowPadding
                    Type
                    number
                    Description
                    The virtual padding around the viewport edges to check for overflow
                    overlap
                    Type
                    boolean
                    Description
                    Whether the floating element can overlap the reference element
                    placement
                    Type
                    | 'bottom'
                    | 'bottom-end'
                    | 'bottom-start'
                    | 'left'
                    | 'left-end'
                    | 'left-start'
                    | 'right'
                    | 'right-end'
                    | 'right-start'
                    | 'top'
                    | 'top-end'
                    | 'top-start'
                    Description
                    The initial placement of the floating element
                    sameWidth
                    Type
                    boolean
                    Description
                    Whether to make the floating element same width as the reference element
                    shift
                    Type
                    number
                    Description
                    The secondary axis offset or gap between the reference and floating elements
                    slide
                    Type
                    boolean
                    Description
                    Whether the popover should slide when it overflows.
                    strategy
                    Type
                    | 'absolute'
                    | 'fixed'
                    Description
                    The strategy to use for positioning
                    updatePosition
                    Type
                    (data: {
                      updatePosition: () => Promise<void>
                    }) => void | Promise<void>
                    Description
                    A callback that will be called when the popover needs to calculate its position.
                      Drawer
                      Popover
                      Examples
                      Item Customization
                      Context Menu
                      Nested Menus
                      Links
                      Groups
                      Item Types
                      Checkbox Items
                      Checkbox Group State
                      Radio Group
                      Radio Group State
                      Controlled State
                      Placement
                      Anchor Point
                      Avatar
                      Within Dialog
                      Hide When Detached
                      API
                      <q-menu>
                      q-menu-item
                      q-menu-checkbox-item
                      PositioningOptions
                      Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.