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

Menu

Menus appear when users interact with a button, action, or other control. They can be opened from a variety of elements, most commonly icon buttons, buttons, and text fields.

#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
A string represents the value selected outside the component
#label
string
#onChange
((index?: number) => void) & ((value: string) => void)
Handler that is called when the selection changes.
#loop
boolean
#children
ReactElement<any, string | JSXElementConstructor<any>> & ReactNode
The reference element for the menu (Button), which triggers the dropdown
#isOpen
boolean
#referenceTag
"symbol" | "object" | "cite" | "data" | "form" | "label" | "pattern" | "span" | "summary" | "slot" | "style" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 160 more ... | FunctionComponent<...>
#floatingTag
"symbol" | "object" | "cite" | "data" | "form" | "label" | "pattern" | "span" | "summary" | "slot" | "style" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 160 more ... | FunctionComponent<...>
#referenceProps
Record<string, unknown>
#floatingProps
Record<string, unknown>
#onVisibilityChange
(isVisible: boolean) => void
#optionsMaxHeight
number
The floating element will have a maxHeight property with the given number in px. If left empty, it will fill the available height.
#trigger
ToggleEvent | ToggleEvent[]
#isListNavigationAllowed
boolean
#isTypeAheadAllowed
boolean
#placement
Placement
Decides the placement of the dropdown
#isWidthAdjusted
boolean
Adjust the width of the items to the parent width
true
#virtualFocus
boolean
#openOnArrowKeyDown
boolean
#isPortalDisabled
boolean
By default the floating element is rendered into a React portal to avoid stacking context issues. You can disable this behaviour and render the element next to the reference
#isDisabled
boolean
Sets the disabled state of the select input and prevents opening it
#options
Required
OptionOrGroupElements
The menu options for the menu

#Types

  • MenuInterface: props of the Menu component processed by stratus extended by Omit<HTMLProps<HTMLSelectElement>, 'value' | 'onChange'>
  • OptionGroupProps: props of the Menu.OptionGroup component

Read more about types here