import type {ReactElement} from "react"

import {Command, File, FileText, FolderOpen, ImageDown} from "lucide-react"

import {Portal} from "@qualcomm-ui/react-core/portal"
import {Icon} from "@qualcomm-ui/react/icon"
import {Menu} from "@qualcomm-ui/react/menu"

export function MenuItemCustomizationDemo(): ReactElement {
  return (
    <Menu.Root>
      <Menu.Trigger>
        <Menu.Button emphasis="primary">Show Menu</Menu.Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-text-file">
              <Menu.ItemStartIcon icon={FileText} />
              New Text File
              <Menu.ItemCommand>
                <Icon icon={Command} size="xs" />E
              </Menu.ItemCommand>
            </Menu.Item>
            <Menu.Item value="new-file">
              <Menu.ItemStartIcon icon={File} />
              New File...
              <Menu.ItemCommand>
                <Icon icon={Command} size="xs" />N
              </Menu.ItemCommand>
            </Menu.Item>
            <Menu.Item value="open-file">
              <Menu.ItemStartIcon icon={FolderOpen} />
              Open File...
              <Menu.ItemCommand>
                <Icon icon={Command} size="xs" />O
              </Menu.ItemCommand>
              <Menu.ItemDescription>Optional Description</Menu.ItemDescription>
            </Menu.Item>
            <Menu.Item value="export">
              <Menu.ItemStartIcon icon={ImageDown} />
              Export
              <Menu.ItemCommand>
                <Icon icon={Command} size="xs" />S
              </Menu.ItemCommand>
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Use <Menu.Button> for a labeled trigger and <Menu.IconButton> for an icon-only trigger. Both automatically render a chevron indicator. Always provide an aria-label on <Menu.IconButton> to give assistive technologies an accessible name. Control the menu position with positioning.placement.

import type {ReactElement} from "react"

import {
  Copy,
  Ellipsis,
  File,
  FileText,
  FolderOpen,
  Pencil,
  Trash2,
} from "lucide-react"

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

export function MenuButtonDemo(): ReactElement {
  return (
    <div className="flex gap-2.5">
      <Menu.Root positioning={{placement: "bottom-end"}}>
        <Menu.Trigger>
          <Menu.Button emphasis="primary" startIcon={File}>
            File
          </Menu.Button>
        </Menu.Trigger>
        <Portal>
          <Menu.Positioner>
            <Menu.Content>
              <Menu.Item value="new-text-file">
                <Menu.ItemStartIcon icon={FileText} />
                New Text File
              </Menu.Item>
              <Menu.Item value="new-file">
                <Menu.ItemStartIcon icon={File} />
                New File...
              </Menu.Item>
              <Menu.Item value="open-file">
                <Menu.ItemStartIcon icon={FolderOpen} />
                Open File...
              </Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Portal>
      </Menu.Root>

      <Menu.Root size="sm">
        <Menu.Trigger>
          <Menu.IconButton
            aria-label="More actions"
            emphasis="primary"
            icon={Ellipsis}
          />
        </Menu.Trigger>
        <Portal>
          <Menu.Positioner>
            <Menu.Content>
              <Menu.Item value="rename">
                <Menu.ItemStartIcon icon={Pencil} />
                Rename
              </Menu.Item>
              <Menu.Item value="duplicate">
                <Menu.ItemStartIcon icon={Copy} />
                Duplicate
              </Menu.Item>
              <Menu.Item value="delete">
                <Menu.ItemStartIcon icon={Trash2} />
                Delete
              </Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Portal>
      </Menu.Root>
    </div>
  )
}

Split Button

Use <Menu.SplitButton> for a split button trigger. The icon-only trigger provides a default "More options" aria-label; use triggerProps to override it. Optionally add an aria-label on the group when both halves share an accessible name. Control the menu position with positioning.placement on the parent <Menu.Root>.

import type {ReactElement} from "react"

import {Download, FileArchive, FileJson, FileText} from "lucide-react"

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

export function MenuSplitButtonDemo(): ReactElement {
  return (
    <Menu.Root positioning={{placement: "bottom-end"}}>
      <Menu.SplitButton
        aria-label="Download"
        emphasis="primary"
        onClick={() => console.log("Download")}
        startIcon={Download}
        triggerProps={{"aria-label": "More download options"}}
      >
        Download
      </Menu.SplitButton>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="pdf">
              <Menu.ItemStartIcon icon={FileText} />
              Download as PDF
            </Menu.Item>
            <Menu.Item value="json">
              <Menu.ItemStartIcon icon={FileJson} />
              Download as JSON
            </Menu.Item>
            <Menu.Item value="zip">
              <Menu.ItemStartIcon icon={FileArchive} />
              Download as ZIP
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

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

import type {ReactElement} from "react"

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

export function MenuContextMenuDemo(): ReactElement {
  return (
    <Menu.Root>
      <Menu.ContextTrigger className="flex h-48 w-full items-center justify-center border border-dashed">
        Right click here
      </Menu.ContextTrigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.ItemGroup>
              <Menu.Item value="new-txt">New Text File</Menu.Item>
              <Menu.Item value="new-file">New File...</Menu.Item>
              <Menu.Item value="open-file">Open File...</Menu.Item>
              <Menu.Item value="export">Export</Menu.Item>
            </Menu.ItemGroup>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Nested Menus

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

<Menu.Root>
  <Menu.Trigger>
    <Menu.Button emphasis="primary">Show Menu</Menu.Button>
  </Menu.Trigger>
  <Portal>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="new-txt">New Text File</Menu.Item>
        <Menu.Item value="new-file">New File...</Menu.Item>
        <Menu.Root positioning={{gutter: 2, placement: "right-start"}}>
          <Menu.TriggerItem value="open-recent">
            Open Recent
          </Menu.TriggerItem>
          <Portal>
            <Menu.Positioner>
              <Menu.Content>
                <Menu.Item value="file-1">File 1</Menu.Item>
                <Menu.Item value="file-2">File 2</Menu.Item>
                <Menu.Item value="file-3">File 3</Menu.Item>
              </Menu.Content>
            </Menu.Positioner>
          </Portal>
        </Menu.Root>
      </Menu.Content>
    </Menu.Positioner>
  </Portal>
</Menu.Root>

Links

Menu items can be links using polymorphic composition. Use the render prop on the <Menu.Item> to specify the element type.

<Menu.Content>
  <Menu.Item
    render={
      <a href="https://react.dev" rel="noreferrer" target="_blank" />
    }
    value="react"
  >
    <Menu.ItemStartIcon icon={ExternalLink} />
    React
  </Menu.Item>
  <Menu.Item
    render={
      <a
        href="https://angular.dev"
        rel="noreferrer"
        target="_blank"
      />
    }
    value="angular"
  >
    <Menu.ItemStartIcon icon={ExternalLink} />
    Angular
  </Menu.Item>
</Menu.Content>

Groups

Use the <Menu.ItemGroup> 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:

<Menu.Item> — menuitem
<Menu.RadioItem> — menuitemradio
<Menu.CheckboxItem> — menuitemcheckbox

Checkbox Items

There are two appearance options:

For a checkbox appearance, render the <Menu.CheckboxItemControl> element as a child of the item.
Render the <Menu.ItemIndicator /> element for a simple selection indicator.

<Menu.ItemGroup>
  <Menu.ItemGroupLabel>Choose an option</Menu.ItemGroupLabel>
  <Menu.CheckboxItem value="item-1-1">
    <Menu.CheckboxItemControl />
    <Menu.ItemLabel>Option 1</Menu.ItemLabel>
  </Menu.CheckboxItem>
  <Menu.CheckboxItem value="item-1-2">
    <Menu.CheckboxItemControl />
    <Menu.ItemLabel>Option 2</Menu.ItemLabel>
  </Menu.CheckboxItem>
</Menu.ItemGroup>

<Menu.ItemGroup>
  <Menu.ItemGroupLabel>Choose an option</Menu.ItemGroupLabel>
  <Menu.CheckboxItem value="item-2-1">
    <Menu.ItemLabel>Option 1</Menu.ItemLabel>
    <Menu.ItemIndicator />
  </Menu.CheckboxItem>
  <Menu.CheckboxItem value="item-2-2">
    <Menu.ItemLabel>Option 2</Menu.ItemLabel>
    <Menu.ItemIndicator />
  </Menu.CheckboxItem>
</Menu.ItemGroup>

Checkbox Selection State

Illustrates how to manage and reflect the checked state of checkbox menu items.

<Menu.ItemGroup>
  <Menu.ItemGroupLabel>Choose an option</Menu.ItemGroupLabel>
  {items.map(({label, value}) => (
    <Menu.CheckboxItem
      key={value}
      checked={checkboxState[value] || false}
      onCheckedChange={(checked) => onChange(value, checked)}
      value={value}
    >
      <Menu.ItemLabel>{label}</Menu.ItemLabel>
      <Menu.ItemIndicator />
    </Menu.CheckboxItem>
  ))}
</Menu.ItemGroup>

Radio Group

Demonstrates how to group radio menu items so only one can be selected at a time.

import type {ReactElement} from "react"

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

export function MenuRadioGroupDemo(): ReactElement {
  return (
    <Menu.Root>
      <Menu.Trigger>
        <Menu.Button emphasis="primary">Show Menu</Menu.Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.RadioItemGroup>
              <Menu.ItemGroupLabel>Choose an option</Menu.ItemGroupLabel>
              <Menu.RadioItem value="one">
                <Menu.RadioItemControl />
                <Menu.ItemLabel>Option 1</Menu.ItemLabel>
              </Menu.RadioItem>
              <Menu.RadioItem value="two">
                <Menu.RadioItemControl />
                <Menu.ItemLabel>Option 2</Menu.ItemLabel>
              </Menu.RadioItem>
              <Menu.RadioItem value="three">
                <Menu.RadioItemControl />
                <Menu.ItemLabel>Option 3</Menu.ItemLabel>
              </Menu.RadioItem>
            </Menu.RadioItemGroup>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Controlled State

The menu's visibility can be controlled via the open, onOpenChange, and defaultOpen props.

Use open to explicitly set whether the menu is open (controlled mode).
Use onOpenChange 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 onOpenChange events to reflect the desired visibility.

import {type ReactElement, useState} from "react"

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

export function MenuControlledStateDemo(): ReactElement {
  const [open, setOpen] = useState<boolean>(false)

  return (
    <Menu.Root onOpenChange={(nextState) => setOpen(nextState)} open={open}>
      <Menu.Trigger>
        <Menu.Button emphasis="primary">Show Menu</Menu.Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Item value="new-win">New Window</Menu.Item>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Placement

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

import type {ReactElement} from "react"

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

export function MenuPlacementDemo(): ReactElement {
  return (
    <Menu.Root positioning={{placement: "right-start"}}>
      <Menu.Trigger>
        <Menu.Button emphasis="primary">Show Menu</Menu.Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Item value="new-win">New Window</Menu.Item>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Sizes

Use the size prop on <Menu.Root> to control the size of the menu. The default size is md. The demo features the small (sm) size.

The <Menu.Button> and <Menu.IconButton> triggers inherit the menu's size, so the trigger and menu match by default. Such a trigger can run larger than its menu: set size on it to override the inherited value. An md menu pairs with an md or lg trigger. A compact trigger should always pair with an sm menu. When a trigger uses density="compact", set size="sm" on <Menu.Root>.

Other trigger content does not inherit the menu size. A link, an avatar, or a custom element placed in the trigger must be sized directly.

import type {ReactElement} from "react"

import {LogOut, Settings, User} from "lucide-react"

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

export function MenuSizesDemo(): ReactElement {
  return (
    <Menu.Root size="sm">
      <Menu.Trigger>
        <Menu.Button emphasis="primary">Show Menu</Menu.Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="account">
              <Menu.ItemStartIcon icon={User} />
              Account
            </Menu.Item>
            <Menu.Item value="settings">
              <Menu.ItemStartIcon icon={Settings} />
              Settings
            </Menu.Item>
            <Menu.Item value="logout">
              <Menu.ItemStartIcon icon={LogOut} />
              Logout
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Anchor Point

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

Anchor

import {type ReactElement, useRef} from "react"

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

export function MenuAnchorPointDemo(): ReactElement {
  const ref = useRef<HTMLDivElement | null>(null)
  const getAnchorRect = () => ref.current!.getBoundingClientRect()

  return (
    <Menu.Root positioning={{getAnchorRect}}>
      <div className="flex flex-col gap-4">
        <Menu.Trigger>
          <Menu.Button emphasis="primary">Show Menu</Menu.Button>
        </Menu.Trigger>
        <div
          ref={ref}
          className="font-body-lg text-neutral-primary bg-neutral-04 border-neutral-01 rounded-md border p-4"
        >
          Anchor
        </div>
      </div>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Item value="new-win">New Window</Menu.Item>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Avatar

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

import type {ReactElement} from "react"

import {LogOut, Settings, User} from "lucide-react"

import {Portal} from "@qualcomm-ui/react-core/portal"
import {Avatar} from "@qualcomm-ui/react/avatar"
import {Menu} from "@qualcomm-ui/react/menu"

export function MenuAvatarDemo(): ReactElement {
  return (
    <Menu.Root positioning={{placement: "right-start"}}>
      <Menu.Trigger>
        <Avatar.Root render={<button />} status="active">
          <Avatar.Image alt="John Doe" src="/images/avatar-man.png" />
          <Avatar.Content>JD</Avatar.Content>
          <Avatar.Status />
        </Avatar.Root>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="account">
              <Menu.ItemStartIcon icon={User} />
              Account
            </Menu.Item>
            <Menu.Item value="settings">
              <Menu.ItemStartIcon icon={Settings} />
              Settings
            </Menu.Item>
            <Menu.Item value="logout">
              <Menu.ItemStartIcon icon={LogOut} />
              Logout
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Within Dialog

When using the Menu inside a Dialog, don't render the <Menu.Positioner> within a <Portal> element.

import type {ReactElement} from "react"

import {Portal} from "@qualcomm-ui/react-core/portal"
import {Button} from "@qualcomm-ui/react/button"
import {Dialog} from "@qualcomm-ui/react/dialog"
import {Menu} from "@qualcomm-ui/react/menu"

export function MenuWithinDialogDemo(): ReactElement {
  return (
    <Dialog.Root>
      <Dialog.Trigger>
        <Button emphasis="primary" variant="fill">
          Show Dialog
        </Button>
      </Dialog.Trigger>

      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content className="w-72">
            <Dialog.Body>
              <Dialog.Heading>Dialog Title</Dialog.Heading>
              <Dialog.CloseButton />

              <Menu.Root>
                <Menu.Trigger>
                  <Menu.Button className="place-self-start" emphasis="primary">
                    Show Menu
                  </Menu.Button>
                </Menu.Trigger>
                <Menu.Positioner>
                  <Menu.Content>
                    <Menu.Item value="new-txt">New Text File</Menu.Item>
                    <Menu.Item value="new-file">New File...</Menu.Item>
                    <Menu.Item value="new-win">New Window</Menu.Item>
                    <Menu.Item value="open-file">Open File...</Menu.Item>
                    <Menu.Item value="export">Export</Menu.Item>
                  </Menu.Content>
                </Menu.Positioner>
              </Menu.Root>
            </Dialog.Body>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
}

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

import type {ReactElement} from "react"

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

export function MenuHideWhenDetachedDemo(): ReactElement {
  return (
    <Menu.Root open positioning={{hideWhenDetached: true}}>
      <div className="border-neutral-03 box-border flex max-w-72 gap-2 overflow-x-scroll rounded-md border p-4">
        {[...Array(6).keys()].map((x) => (
          <div
            key={x}
            className="font-body-md text-neutral-primary border-neutral-01 bg-neutral-04 rounded-md border p-3 whitespace-nowrap"
          >
            Item {x}
          </div>
        ))}
        <Menu.Trigger>
          <Menu.Button className="whitespace-nowrap" emphasis="primary">
            Show Menu
          </Menu.Button>
        </Menu.Trigger>
      </div>

      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Item value="new-win">New Window</Menu.Item>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Explorer

Component Anatomy

Hover to highlight, click to view API

trigger content item-group item-group-label item start-icon item-text description item-control item-indicator separator

API

Prop	Type	Default
children ^* React children prop.	ReactNode
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 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 automatically generated for accessibility.	string
immediate Whether to synchronize the present change immediately or defer it to the next frame	boolean
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
navigate Function to navigate to the selected item if it's an anchor element	(details: { href: string node: HTMLAnchorElement value: string }) => void
onEscapeKeyDown Function called when the escape key is pressed	( event: KeyboardEvent, ) => void
onExitComplete Function called when the animation ends in the closed state	VoidFunction
onFocusOutside Function called when the focus is moved outside the component	( event: FocusOutsideEvent, ) => void
onHighlightChange Function called when the highlighted menu item changes.	( value: string, ) => void
onInteractOutside Function called when an interaction happens outside the component	( event: InteractOutsideEvent, ) => void
onOpenChange Function called when the menu opens or closes	( open: boolean, ) => void
onPointerDownOutside Function called when the pointer is pressed down outside the component	( event: PointerDownOutsideEvent, ) => void
onRequestDismiss Function called when this layer is closed due to a parent layer being closed	( event: CustomEvent<{ originalIndex: number originalLayer: HTMLElement targetIndex: number targetLayer: HTMLElement }>, ) => void
onSelect Function called when a menu item is selected.	( value: string, ) => void
open The controlled open state of the menu	boolean
positioning The options used to dynamically position the menu	PositioningOptions
present Whether the node is present (controlled by the user)	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

children

Type

ReactNode

Description

React children prop.

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

navigate

Type

(details: {
  href: string
  node: HTMLAnchorElement
  value: string
}) => void

Description

Function to navigate to the selected item if it's an anchor element

onEscapeKeyDown

Type

(
  event: KeyboardEvent,
) => void

Description

Function called when the escape key is pressed

onExitComplete

Type

VoidFunction

Description

Function called when the animation ends in the closed state

onFocusOutside

Type

(
  event: FocusOutsideEvent,
) => void

Description

Function called when the focus is moved outside the component

onHighlightChange

Type

(
  value: string,
) => void

Description

Function called when the highlighted menu item changes.

onInteractOutside

Type

(
  event: InteractOutsideEvent,
) => void

Description

Function called when an interaction happens outside the component

onOpenChange

Type

(
  open: boolean,
) => void

Description

Function called when the menu opens or closes

onPointerDownOutside

Type

(
  event: PointerDownOutsideEvent,
) => void

Description

Function called when the pointer is pressed down outside the component

onRequestDismiss

Type

(
  event: CustomEvent<{
    originalIndex: number
    originalLayer: HTMLElement
    targetIndex: number
    targetLayer: HTMLElement
  }>,
) => void

Description

Function called when this layer is closed due to a parent layer being closed

onSelect

Type

(
  value: string,
) => void

Description

Function called when a menu item is selected.

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

Whether the node is present (controlled by the user)

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.

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
arrowSelector CSS selector used to locate the arrow element within the floating element. Components override this with their own anatomy-namespaced selector (e.g. `[data-menu-part=arrow]`).	string
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.

arrowSelector

Type

string

Description

CSS selector used to locate the arrow element within the floating element. Components override this with their own anatomy-namespaced selector (e.g. [data-menu-part=arrow]).

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.

Element API

The following describes the individual subcomponents of the Menu component.

Prop	Type	Default
children React children prop.	ReactNode
density The density of the button. Governs padding and height.	\| 'default' \| 'compact'	'default'
disabled Controls whether the component is interactive. When `true`, pointer/focus events are blocked, and the component is visually dimmed.	boolean	false
emphasis The style variant of the button. Governs colors.	\| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent' \| 'inverse'	'neutral'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the component and its icons.	\| 'sm' \| 'md' \| 'lg'	'md'
startIcon Icon positioned before the text content. If supplied as a `LucideIcon`, the size will automatically match the size prop. Supply as a `ReactElement` for additional customization.	\| LucideIcon \| ReactNode
variant The style variant of the button. Governs colors.	\| 'fill' \| 'ghost' \| 'outline'	'fill'

children

Type

ReactNode

Description

React children prop.

density

Type

| 'default'
| 'compact'

Description

The density of the button. Governs padding and height.

disabled

Type

boolean

Description

Controls whether the component is interactive. When true, pointer/focus events are blocked, and the component is visually dimmed.

emphasis

Type

| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'
| 'inverse'

Description

The style variant of the button. Governs colors.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the component and its icons.

startIcon

Type

| LucideIcon
| ReactNode

Description

Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

variant

Type

| 'fill'
| 'ghost'
| 'outline'

Description

The style variant of the button. Governs colors.

Attribute / Property	Value
`className`	'qui-menu__button'

Prop	Type	Default
density The density of the button. Governs padding and height.	\| 'default' \| 'compact'	'default'
disabled Controls whether the component is interactive. When `true`, pointer/focus events are blocked, and the component is visually dimmed.	boolean	false
emphasis The style variant of the button. Governs colors.	\| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent' \| 'inverse'	'neutral'
icon Optional lucide-react icon displayed alongside the chevron indicator. When omitted, only the chevron is rendered.	LucideIcon
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
shape Governs the shape of the icon button.	\| 'square' \| 'rounded'	'square'
size The size of the component and its icons.	\| 'sm' \| 'md' \| 'lg'	'md'
variant The style variant of the button. Governs colors.	\| 'fill' \| 'ghost' \| 'outline'	'fill'

density

Type

| 'default'
| 'compact'

Description

The density of the button. Governs padding and height.

disabled

Type

boolean

Description

Controls whether the component is interactive. When true, pointer/focus events are blocked, and the component is visually dimmed.

emphasis

Type

| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'
| 'inverse'

Description

The style variant of the button. Governs colors.

icon

Type

LucideIcon

Description

Optional lucide-react icon displayed alongside the chevron indicator. When omitted, only the chevron is rendered.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

shape

Type

| 'square'
| 'rounded'

Description

Governs the shape of the icon button.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the component and its icons.

variant

Type

| 'fill'
| 'ghost'
| 'outline'

Description

The style variant of the button. Governs colors.

Prop	Type	Default
actionProps Props applied to the primary action button.	Omit< ButtonProps, \| keyof { density?: \| 'default' \| 'compact' disabled?: boolean emphasis?: \| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent' \| 'inverse' size?: \| 'sm' \| 'md' \| 'lg' variant?: \| 'fill' \| 'ghost' \| 'outline' } \| 'children' >
children Content rendered inside the primary action button.	ReactNode
density The density of the buttons. Governs padding and height.	\| 'default' \| 'compact'	'default'
disabled Disables every button in the group.	boolean	false
emphasis The emphasis of the buttons in the group.	\| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent' \| 'inverse'
endIcon Icon positioned after the primary action label.	\| LucideIcon \| ReactNode
onClick Called when the primary action button is clicked.	MouseEventHandler
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the buttons in the group.	\| 'sm' \| 'md' \| 'lg'	'md'
startIcon Icon positioned before the primary action label.	\| LucideIcon \| ReactNode
triggerProps Props applied to the chevron trigger button.	Omit< MenuIconButtonProps, keyof { density?: \| 'default' \| 'compact' disabled?: boolean emphasis?: \| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent' \| 'inverse' size?: 'sm' \| 'md' \| 'lg' variant?: \| 'fill' \| 'ghost' \| 'outline' } >
variant The variant of the buttons in the group.	\| 'fill' \| 'ghost' \| 'outline'

actionProps

Type

Omit<
  ButtonProps,
  | keyof {
      density?:
        | 'default'
        | 'compact'
      disabled?: boolean
      emphasis?:
        | 'neutral'
        | 'primary'
        | 'danger'
        | 'white-persistent'
        | 'black-persistent'
        | 'inverse'
      size?:
        | 'sm'
        | 'md'
        | 'lg'
      variant?:
        | 'fill'
        | 'ghost'
        | 'outline'
    }
  | 'children'
>

Description

Props applied to the primary action button.

children

Type

ReactNode

Description

Content rendered inside the primary action button.

density

Type

| 'default'
| 'compact'

Description

The density of the buttons. Governs padding and height.

disabled

Type

boolean

Description

Disables every button in the group.

emphasis

Type

| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'
| 'inverse'

Description

The emphasis of the buttons in the group.

endIcon

Type

| LucideIcon
| ReactNode

Description

Icon positioned after the primary action label.

onClick

Type

MouseEventHandler

Description

Called when the primary action button is clicked.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the buttons in the group.

startIcon

Type

| LucideIcon
| ReactNode

Description

Icon positioned before the primary action label.

triggerProps

Type

Omit<
  MenuIconButtonProps,
  keyof {
    density?:
      | 'default'
      | 'compact'
    disabled?: boolean
    emphasis?:
      | 'neutral'
      | 'primary'
      | 'danger'
      | 'white-persistent'
      | 'black-persistent'
      | 'inverse'
    size?: 'sm' | 'md' | 'lg'
    variant?:
      | 'fill'
      | 'ghost'
      | 'outline'
  }
>

Description

Props applied to the chevron trigger button.

variant

Type

| 'fill'
| 'ghost'
| 'outline'

Description

The variant of the buttons in the group.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu__content'
`data-from`	\| 'trigger' \| 'context-trigger'
`data-menu-part`	'content'
`data-placement`	\| 'bottom' \| 'bottom-end' \| 'bottom-start' \| 'left' \| 'left-end' \| 'left-start' \| 'right' \| 'right-end' \| 'right-start' \| 'top' \| 'top-end' \| 'top-start'
`data-size`	'sm' \| 'md'
`data-state`	\| 'open' \| 'closed'
`hidden`	boolean
`tabIndex`	0

className

Value

'qui-menu__content'

data-from

Value

| 'trigger'
| 'context-trigger'

data-menu-part

Value

'content'

data-placement

Value

| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'

data-size

Value

'sm' | 'md'

data-state

Value

| 'open'
| 'closed'

hidden

Value

boolean

tabIndex

Value

Enhances a child element to open the menu when clicked. Requires a single child element.

Prop	Type
children ^* React children Render Prop	BindingRenderProp<MenuTriggerBindings>
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string

children

Type

BindingRenderProp<MenuTriggerBindings>

Description

React children Render Prop

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

Attribute / Property	Value
`data-menu-part`	'trigger'
`data-placement`	\| 'bottom' \| 'bottom-end' \| 'bottom-start' \| 'left' \| 'left-end' \| 'left-start' \| 'right' \| 'right-end' \| 'right-start' \| 'top' \| 'top-end' \| 'top-start'
`data-state`	\| 'open' \| 'closed'
`data-uid`	string

data-menu-part

Value

'trigger'

data-placement

Value

| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'

data-state

Value

| 'open'
| 'closed'

data-uid

Value

string

Prop	Type
value ^* The unique value of the menu item option.	string
children React children prop.	ReactNode
closeOnSelect Whether the menu should be closed when the option is selected.	boolean
disabled Whether the menu item is disabled	boolean
onSelect The function to call when the item is selected	() => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
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

value

Type

string

Description

The unique value of the menu item option.

children

Type

ReactNode

Description

React children prop.

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

onSelect

Type

() => void

Description

The function to call when the item is selected

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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.

Attribute / Property	Value
`className`	'qui-menu-item__root'
`data-disabled`
`data-focus-visible`
`data-highlighted`
`data-menu-part`	'item'
`data-ownedby`	string
`data-size`	'sm' \| 'md'
`data-value`	string
`data-valuetext`	string
`tabIndex`	-1

className

Value

'qui-menu-item__root'

data-disabled

Value

data-focus-visible

Value

data-highlighted

Value

data-menu-part

Value

'item'

data-ownedby

Value

string

data-size

Value

'sm' | 'md'

data-value

Value

string

data-valuetext

Value

string

tabIndex

Value

-1

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu-item__accessory'

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu-item__command'
`data-size`	'sm' \| 'md'

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu-item__label'
`data-disabled`
`data-highlighted`
`data-menu-part`	'item-text'
`data-size`	'sm' \| 'md'
`data-state`	\| 'checked' \| 'unchecked'

className

Value

'qui-menu-item__label'

data-disabled

Value

data-highlighted

Value

data-menu-part

Value

'item-text'

data-size

Value

'sm' | 'md'

data-state

Value

| 'checked'
| 'unchecked'

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu-item__description'
`data-menu-part`	'description'
`data-size`	'sm' \| 'md'

className

Value

'qui-menu-item__description'

data-menu-part

Value

'description'

data-size

Value

'sm' | 'md'

Prop	Type
children React children prop.	ReactNode
id id for this item group.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id for this item group.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu-item__group'
`data-menu-part`	'item-group'

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu-item__group-label'
`data-menu-part`	'item-group-label'
`data-size`	'sm' \| 'md'

className

Value

'qui-menu-item__group-label'

data-menu-part

Value

'item-group-label'

data-size

Value

'sm' | 'md'

Prop	Type
icon ^* lucide-react icon or JSX Element.	\| LucideIcon \| ReactNode
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

icon

Type

| LucideIcon
| ReactNode

Description

lucide-react icon or JSX Element.

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu-item__start-icon'
`data-menu-part`	'start-icon'
`data-size`	'sm' \| 'md'

className

Value

'qui-menu-item__start-icon'

data-menu-part

Value

'start-icon'

data-size

Value

'sm' | 'md'

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu-item__indicator'
`data-disabled`
`data-highlighted`
`data-menu-part`	'item-indicator'
`data-size`	'sm' \| 'md'
`data-state`	\| 'checked' \| 'unchecked'
`hidden`	boolean

className

Value

'qui-menu-item__indicator'

data-disabled

Value

data-highlighted

Value

data-menu-part

Value

'item-indicator'

data-size

Value

'sm' | 'md'

data-state

Value

| 'checked'
| 'unchecked'

hidden

Value

boolean

Prop	Type
value ^* The value of the option	string
checked Whether the option is checked	boolean
children React children prop.	ReactNode
closeOnSelect Whether the menu should be closed when the option is selected.	boolean
disabled Whether the menu item is disabled	boolean
onCheckedChange Function called when the option state is changed	( checked: boolean, ) => void
onSelect The function to call when the item is selected	() => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
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

value

Type

string

Description

The value of the option

checked

Type

boolean

Description

Whether the option is checked

children

Type

ReactNode

Description

React children prop.

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

onCheckedChange

Type

(
  checked: boolean,
) => void

Description

Function called when the option state is changed

onSelect

Type

() => void

Description

The function to call when the item is selected

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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.

Prop	Type	Default
children React children prop.	ReactNode	<Checkbox.IndicatorIcon />
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-checkbox__control'

Prop	Type
value ^* The unique value of the menu item option.	string
children React children prop.	ReactNode
closeOnSelect Whether the menu should be closed when the option is selected.	boolean
disabled Whether the menu item is disabled	boolean
onSelect The function to call when the item is selected	() => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
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

value

Type

string

Description

The unique value of the menu item option.

children

Type

ReactNode

Description

React children prop.

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

onSelect

Type

() => void

Description

The function to call when the item is selected

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-radio__control'

Prop	Type
children React children prop.	ReactNode
id	string
onValueChange	( value: string, ) => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
value	string

children

Type

ReactNode

Description

React children prop.

Type

string

onValueChange

Type

(
  value: string,
) => void

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

value

Type

string

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-menu__separator'
`data-menu-part`	'separator'

A menu item that triggers a submenu on hover or click. Renders a <button> element by default.

Prop	Type	Default
value ^* The unique value of the menu item option.	string
children React children prop.	ReactNode
closeOnSelect Whether the menu should be closed when the option is selected.	boolean
disabled Whether the menu item is disabled	boolean
icon Icon to display next to the label, which indicates that this menu item is a trigger for a submenu.	\| LucideIcon \| ReactNode	ChevronRight
onSelect The function to call when the item is selected	() => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
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

value

Type

string

Description

The unique value of the menu item option.

children

Type

ReactNode

Description

React children prop.

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

icon

Type

| LucideIcon
| ReactNode

Description

Icon to display next to the label, which indicates that this menu item is a trigger for a submenu.

onSelect

Type

() => void

Description

The function to call when the item is selected

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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.

Attribute / Property	Value
`data-disabled`
`data-focus-visible`
`data-highlighted`
`data-menu-part`	'trigger'
`data-ownedby`	string
`data-placement`	\| 'bottom' \| 'bottom-end' \| 'bottom-start' \| 'left' \| 'left-end' \| 'left-start' \| 'right' \| 'right-end' \| 'right-start' \| 'top' \| 'top-end' \| 'top-start'
`data-state`	\| 'open' \| 'closed'
`data-uid`	string
`data-value`	string
`data-valuetext`	string
`tabIndex`	-1

data-disabled

Value

data-focus-visible

Value

data-highlighted

Value

data-menu-part

Value

'trigger'

data-ownedby

Value

string

data-placement

Value

| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'

data-state

Value

| 'open'
| 'closed'

data-uid

Value

string

data-value

Value

string

data-valuetext

Value

string

tabIndex

Value

-1

Last updated on Jun 3, 2026 by Olaf Kappes

Link

Number Input