import {Component} from "@angular/core"
import {Command, File, FileText, FolderOpen, ImageDown} from "lucide-angular"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {IconDirective} from "@qualcomm-ui/angular/icon"
import {MenuModule} from "@qualcomm-ui/angular/menu"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"

@Component({
  imports: [MenuModule, ButtonModule, PortalComponent, IconDirective],
  providers: [provideIcons({Command, File, FileText, FolderOpen, ImageDown})],
  selector: "menu-item-customization-demo",
  template: `
    <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">
              <div icon="FileText" q-menu-item-start-icon></div>
              New Text File
              <div q-menu-item-command>
                <svg qIcon="Command" size="xs"></svg>
                E
              </div>
            </button>
            <button q-menu-item value="new-file">
              <div icon="File" q-menu-item-start-icon></div>
              New File...
              <div q-menu-item-command>
                <svg qIcon="Command" size="xs"></svg>
                N
              </div>
            </button>
            <button q-menu-item value="open-file">
              <div icon="FolderOpen" q-menu-item-start-icon></div>
              Open File...
              <div q-menu-item-command>
                <svg qIcon="Command" size="xs"></svg>
                O
              </div>
            </button>
            <button q-menu-item value="export">
              <div icon="ImageDown" q-menu-item-start-icon></div>
              Export
              <div q-menu-item-command>
                <svg qIcon="Command" size="xs"></svg>
                S
              </div>
            </button>
          </div>
        </div>
      </q-portal>
    </q-menu>
  `,
})
export class MenuItemCustomizationDemo {}

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

Brand

import {Component} from "@angular/core"

import {MenuModule} from "@qualcomm-ui/angular/menu"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"

@Component({
  imports: [MenuModule, PortalComponent],
  selector: "menu-context-menu-demo",
  template: `
    <q-menu class="w-full">
      <button
        class="flex h-48 w-full flex-1 items-center justify-center border border-dashed"
        q-menu-context-trigger
      >
        Right click here
      </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>
            <button q-menu-item value="open-file">Open File...</button>
            <button q-menu-item value="export">Export</button>
          </div>
        </div>
      </q-portal>
    </q-menu>
  `,
})
export class MenuContextMenuDemo {}

Nested Menus

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

Brand

<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>

Links

Menu items can be links.

Brand

<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.

Brand

import {Component} from "@angular/core"

import {MenuModule} from "@qualcomm-ui/angular/menu"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"

@Component({
  imports: [MenuModule, PortalComponent],
  selector: "menu-checkbox-items-demo",
  template: `
    <q-menu>
      <button emphasis="primary" q-menu-button variant="fill">Show Menu</button>
      <q-portal>
        <div q-menu-positioner>
          <div q-menu-content>
            <div q-menu-item-group>
              <label q-menu-item-group-label>Choose an option</label>
              <button q-menu-checkbox-item value="option-1">
                Option 1
                <div q-menu-item-indicator></div>
              </button>
              <button q-menu-checkbox-item value="option-2">
                Option 2
                <div q-menu-item-indicator></div>
              </button>
              <button q-menu-checkbox-item value="option-3">
                Option 3
                <div q-menu-item-indicator></div>
              </button>
            </div>
          </div>
        </div>
      </q-portal>
    </q-menu>
  `,
})
export class MenuCheckboxItemsDemo {}

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.

Brand

<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.

Brand

<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.

Brand

<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.

Brand

import {Component, signal} from "@angular/core"

import {MenuModule} from "@qualcomm-ui/angular/menu"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"

@Component({
  imports: [MenuModule, PortalComponent],
  selector: "menu-controlled-state-demo",
  template: `
    <q-menu [open]="open()" (openChanged)="open.set($event)">
      <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>
            <button q-menu-item value="open-file">Open File...</button>
            <button q-menu-item value="export">Export</button>
          </div>
        </div>
      </q-portal>
    </q-menu>
  `,
})
export class MenuControlledStateDemo {
  protected readonly open = signal(false)
}

Placement

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

Brand

import {Component} from "@angular/core"

import {MenuModule} from "@qualcomm-ui/angular/menu"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"

@Component({
  imports: [MenuModule, PortalComponent],
  selector: "menu-placement-demo",
  template: `
    <q-menu [positioning]="{placement: 'right-start'}">
      <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>
            <button q-menu-item value="open-file">Open File...</button>
            <button q-menu-item value="export">Export</button>
          </div>
        </div>
      </q-portal>
    </q-menu>
  `,
})
export class MenuPlacementDemo {}

Anchor Point

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

Brand

Anchor

import {Component, computed, type ElementRef, viewChild} from "@angular/core"

import {MenuModule} from "@qualcomm-ui/angular/menu"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"
import type {PositioningOptions} from "@qualcomm-ui/dom/floating-ui"

@Component({
  imports: [MenuModule, PortalComponent],
  selector: "menu-anchor-point-demo",
  template: `
    <div class="flex flex-col gap-4">
      <q-menu [positioning]="positioning()">
        <button emphasis="primary" q-menu-button variant="fill">
          Show Menu
        </button>
        <div
          #anchorRef
          class="font-body-lg text-neutral-primary bg-neutral-04 border-neutral-01 rounded-md border p-4"
        >
          Anchor
        </div>
        <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>
              <button q-menu-item value="open-file">Open File...</button>
              <button q-menu-item value="export">Export</button>
            </div>
          </div>
        </q-portal>
      </q-menu>
    </div>
  `,
})
export class MenuAnchorPointDemo {
  protected readonly anchorRef =
    viewChild.required<ElementRef<HTMLDivElement>>("anchorRef")

  protected readonly positioning = computed<PositioningOptions>(() => ({
    getAnchorRect: () => this.anchorRef().nativeElement.getBoundingClientRect(),
  }))
}

Avatar

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

Brand

import {Component} from "@angular/core"
import {LogOut, Settings, User} from "lucide-angular"

import {AvatarModule} from "@qualcomm-ui/angular/avatar"
import {MenuModule} from "@qualcomm-ui/angular/menu"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"

@Component({
  imports: [AvatarModule, MenuModule, PortalComponent],
  providers: [provideIcons({LogOut, Settings, User})],
  selector: "menu-avatar-demo",
  template: `
    <q-menu [positioning]="{placement: 'right-start'}">
      <button q-avatar q-menu-trigger status="active">
        <img alt="John Doe" q-avatar-image src="/images/avatar-man.png" />
        <div q-avatar-content>JD</div>
        <div q-avatar-status></div>
      </button>
      <q-portal>
        <div q-menu-positioner>
          <div q-menu-content>
            <button q-menu-item value="account">
              <div icon="User" q-menu-item-start-icon></div>
              Account
            </button>
            <button q-menu-item value="settings">
              <div icon="Settings" q-menu-item-start-icon></div>
              Settings
            </button>
            <button q-menu-item value="logout">
              <div icon="LogOut" q-menu-item-start-icon></div>
              Logout
            </button>
          </div>
        </div>
      </q-portal>
    </q-menu>
  `,
})
export class MenuAvatarDemo {}

Within Dialog

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

Brand

import {Component} from "@angular/core"
import {X} from "lucide-angular"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {DialogModule} from "@qualcomm-ui/angular/dialog"
import {IconDirective} from "@qualcomm-ui/angular/icon"
import {MenuModule} from "@qualcomm-ui/angular/menu"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"

@Component({
  imports: [
    MenuModule,
    ButtonModule,
    DialogModule,
    IconDirective,
    PortalComponent,
  ],
  providers: [provideIcons({X})],
  selector: "menu-within-dialog-demo",
  template: `
    <div q-dialog-root>
      <button emphasis="primary" q-button q-dialog-trigger variant="fill">
        Show Dialog
      </button>

      <q-portal>
        <div q-dialog-backdrop></div>
        <div q-dialog-positioner>
          <section class="w-72" q-dialog-content>
            <h3 q-dialog-heading>Dialog Title</h3>
            <q-menu>
              <button
                class="place-self-start"
                emphasis="primary"
                q-menu-button
                variant="fill"
              >
                Show Menu
              </button>

              <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>
                  <button q-menu-item value="open-file">Open File...</button>
                  <button q-menu-item value="export">Export</button>
                </div>
              </div>
            </q-menu>
            <button q-dialog-close-trigger>
              <svg qIcon="X"></svg>
            </button>
          </section>
        </div>
      </q-portal>
    </div>
  `,
})
export class MenuWithinDialogDemo {}

Hide When Detached

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

Brand

Item 0

Item 1

Item 2

Item 3

Item 4

Item 5

import {Component, signal} from "@angular/core"

import {MenuModule} from "@qualcomm-ui/angular/menu"
import {IntersectionObserverDirective} from "@qualcomm-ui/angular-core/observers"
import {PortalComponent} from "@qualcomm-ui/angular-core/portal"

@Component({
  imports: [MenuModule, PortalComponent, IntersectionObserverDirective],
  selector: "menu-hide-when-detached-demo",
  template: `
    <q-menu [open]="open()" [positioning]="{hideWhenDetached: true}">
      <div
        class="border-neutral-03 flex max-w-72 gap-2 overflow-x-scroll rounded-md border p-4"
      >
        @for (item of items; track item) {
          <div
            class="font-body-md text-neutral-primary border-neutral-01 bg-neutral-04 rounded-md border p-3 whitespace-nowrap"
          >
            Item {{ item }}
          </div>
        }
        <button
          class="whitespace-nowrap"
          emphasis="primary"
          q-menu-button
          variant="fill"
          (qIntersectionObserver)="handleIntersection($event)"
        >
          Show Menu
        </button>
      </div>

      <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>
            <button q-menu-item value="open-file">Open File...</button>
            <button q-menu-item value="export">Export</button>
          </div>
        </div>
      </q-portal>
    </q-menu>
  `,
})
export class MenuHideWhenDetachedDemo {
  items = [...Array(6).keys()]

  readonly open = signal(false)

  handleIntersection(entries: IntersectionObserverEntry[]) {
    if (entries[0]?.isIntersecting) {
      // only open the menu when the button is in view,
      // but keep it open after to demonstrate the use case.
      this.open.set(true)
    }
  }
}

API

Prop	Type	Default
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.

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.

Each menu item type shares the same base properties.

Prop	Type
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

Each menu item type shares the same base properties.

Prop	Type
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:

Prop	Type	Default
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

Menu

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