SelectMenu

The SelectMenu component is triggered on the click of a button or your choice of a standalone link using the isLink prop, and expands from the center if not close to the edge of the page. The Menu contains a list of MenuItems, with a white background, and level 2 elevation. The Menu also remembers the user’s selection and displays it as the label for the button/link trigger.

The Modal brings focus to the first menu element upon the click of the trigger, and can be escaped on click away or key press. Set a default message with the defaultMessage prop string. Use the defaultSelected prop to signify that a menuItem is the default to open to.

Basic usage

Linked variant

SelectMenu Props API
  • defaultMessage string

    String that is displayed for default value of the SelectMenu

    Default'Select...'
  • isLink bool

    Displays chosen value of the SelectMenu as a link

    Defaultfalse
  • children node Required

    Specifies the content of the SelectMenu

  • className string

    Specifies class name to append to the base element

MenuItem Props API
  • defaultSelected bool

    Specifies that this MenuItem is selected inside the SelectMenu

    Defaultfalse
  • className string

    Specifies class name to append to the base element

  • children node

    Specifies the content of the MenuItem

    Defaultnull
  • as elementType

    Specifies the base element

    Default'button'
  • iconBefore node

    Specifies the jsx before the content of the MenuItem

  • iconAfter node

    Specifies the jsx after the content of the MenuItem