ContextMenu – Once UI

A component for providing users with contextual options / information on right click.

ContextMenu

Right click me

<ContextMenu
  placement="bottom-start"
  dropdown={
    <Column gap="2" padding="4" minWidth={10}>
      <Option
        prefix={<Icon size="xs" name="edit" onBackground="neutral-weak" />}
        label="Edit"
        value="edit"
      />
      <Option
        prefix={<Icon size="xs" name="document" onBackground="neutral-weak" />}
        label="Duplicate"
        value="duplicate"
      />
      <Option
        prefix={<Icon size="xs" name="copy" onBackground="neutral-weak" />}
        label="Copy"
        value="copy"
      />
      <Option
        prefix={<Icon size="xs" name="eyeOff" onBackground="neutral-weak" />}
        label="Hide"
        value="hide"
      />
      <Line marginY="2" />
      <Option
        prefix={<Icon size="xs" name="delete" onBackground="danger-medium" />}
        danger
        label="Delete"
        value="delete"
      />
    </Column>
  }
>
  <Row fillWidth align="center" horizontal="center" padding="40" radius="l" background="surface" border="neutral-alpha-medium" textVariant="label-default-m">Right click me</Row>
</ContextMenu>

API reference

Prop	Type	Default
children	React.ReactNode	—
dropdownrequired The menu itself.	ReactNode	—
placement Where the menu opens relative to the pointer.	toprightbottomlefttop-starttop-endright-startright-endbottom-startbottom-endleft-startleft-end	bottom-end
fillWidth Match the trigger's width.	boolean	false
minWidth Lower bound on the menu's width, in rem.	number	12
maxWidth Upper bound on the menu's width, in rem.	number	—
minHeight Lower bound on the menu's height, in rem.	number	—
style	React.CSSProperties	—
className	string	—
onSelect Called with the value of the Option that was picked.	(value: string) => void	—
closeAfterClick Close on selection.	boolean	true
open Controlled open state.	boolean	—
onOpenChange Called whenever it opens or closes.	(open: boolean) => void	—
selectedOption Value of the Option to mark as current.	string	—
disabled Stop the menu opening at all.	boolean	false
…and every FlexProps prop	inherited	—