Quaff

QMenu

Menus show contextual actions or popup content beside a trigger. Adjust their position and choose whether selecting an item closes the menu.

info QMenu API Source
interface QMenuProps extends HTMLAttributes<HTMLDivElement>
anchor
?: QMenuAnchor = "bottom start"
Anchor point on the target. Start/end follow the menu direction; left/right stay physical.
autoClose
?: boolean = true
Closes the menu when its content is clicked.
expressive
?: boolean = undefined
Uses the Material 3 Expressive menu shapes and colors. When omitted, inherits the `Quaff.init()` setting (false by default). Set true or false to override it.
fit
?: boolean = false
Sets the menu width to the target width.
flip
?: boolean = false
Flips a top/bottom anchored menu when the opposite side has more room.
offset
?: { x?: number, y?: number } = {}
Offset in pixels. Positive values move the menu right/down, negative values left/up. The vertical offset reverses when the menu flips.
persistent
?: boolean = false
Prevents outside click dismissal.
self
?: QMenuAnchor = "top start"
Anchor point on the menu. Start/end follow the menu direction; left/right stay physical.
target
?: HTMLElement = undefined
Element to anchor the menu to. When omitted, QMenu anchors to the nearest parent Quaff component.
value
?: boolean = $bindable(false)
The bound value of the component.

Usage

Basic Menu
QMenu anchors popup content to a target. When placed inside a Quaff component, it uses the parent component as its target by default.
Expressive Menu
Enable expressive for one menu, or pass { expressive: true } to Quaff.init() to use Material 3 Expressive components globally, including menus. Use expressive={false} to keep an individual menu standard. Lists inside a menu follow its row styling by default; they do not add the shapes and spacing of standalone expressive lists.
Custom Target
Use target when the trigger and anchor are not the same element.
Anchored surface
Anchoring and Fit
Use anchor, self, and fit to control alignment and width relative to the target. Start/end follow the menu direction; left/right stay physical. Menus inherit direction and language from their target. Use dir or lang to override them.
Interactive Menu
Use persistent to ignore outside clicks, and set autoClose to false when the menu contains controls or multiple actions.
Inside Dialog
QMenu uses Quaff's generic overlay root when it is opened from a native QDialog, so it is not clipped by the dialog surface and remains interactive.
Privacy Policy