Skip to main content
⌘K
Last modified: 24/Jun/2024

Menu Option

The options of the Menu component

#Usage

import { Button, Menu } from '@kinsta/stratus'

const MyComponent = () => (
  <Menu
    options={[
      <Menu.OptionGroup label="Group Label 1">
        <Menu.Option value="option-1">Option 1</Menu.Option>
      </Menu.OptionGroup>,
      <Menu.OptionGroup label="Group Label 2">
        <Menu.Option value="option-2">Option 2</Menu.Option>
        <Menu.Option>Option 3</Menu.Option>
      </Menu.OptionGroup>,
    ]}
  >
    <Button>Reference Element</Button>
  </Menu>
)

#Props

#value
string
This string will be provided to onSelect props callback
#index
number
0
#isInGroup
boolean
If true, the item will be rendered as a group header
#isDisabled
boolean
Disables the item
#hasSeparatorBefore
boolean
Adds a Separator element before the item
#hasSeparatorAfter
boolean
Adds a Separator element after the item
#onSelect
(value?: string) => unknown
Handler to call when the menu item is selected

#Types

  • MenuOptionProps: props of the Menu.Option component
  • MenuOptionOrGroupElements: the type that includes the Menu.Option, Menu.OptionGroup and arrays of them.

Read more about types here