Dropdown menu | Qasa Design System

Examples

There are multiple placement and alignment options available for the dropdown menu, use the side and align props of the Content component to change the menu position. The default position for the menu is on the bottom center of the trigger.

Do also notice that the menu placement will automatically be affected by the available space around the trigger - the menu will always try to open up on a position where it's fully visible and not covering other components.

API Reference

DropdownMenu

Parent component that wraps the trigger and content. Manages the dropdown state.

Prop	Default	Description
`isOpen?`	-	`boolean` If `true` the dropdown menu will be open
`children`	-	`ReactNode`
`defaultOpen?`	-	`boolean` The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
`onOpenChange?`	-	`((isOpen: boolean) => void)` Callback invoked open state changes

DropdownMenu.Trigger

Component that opens and closes the dropdown menu.

Prop	Default	Description
`as?`	-	`"button"`
`children?`	-	`ReactNode`

DropdownMenu.Content

Wraps the menu items that will be displayed when the dropdown is open.

Prop	Default	Description
`children?`	-	`ReactNode`
`side?`	`"bottom"`	`"top" \| "right" \| "bottom" \| "left"` The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoidCollisions` is enabled.
`align?`	`"center"`	`"center" \| "start" \| "end"` The preferred alignment against the trigger. May change when collisions occur.

DropdownMenu.Item

An menu item that can be selected.

Prop	Default	Description
`onSelect?`	-	`((event: Event) => void)` Event handler called when the user selects an item (via mouse or keyboard). Calling `event.preventDefault` in this handler will prevent the dropdown from closing when selecting that item.
`isDisabled?`	-	`boolean` If `true`, the item will be disabled

DropdownMenu.Divider

Divider used to separate menu items.

Inherits props from the HTML div element.