Menu

An arrow-key navigable Menu which consists of MenuItems. A Menu can be employed to produce its common variants, including dropdown menus, select menus, and others. Menus are keyboard navigable with both tab and arrow keys.

A MenuItem is its own distinct component that is used by any kind of menu overlays i.e. dropdown menu and navigation menu.

A Menu can include things like forms.

A Menu can be implemented to appear inside a modalpopup for a wide variety of use cases. 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.

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.

Menu Props API
  • className
    string

    Specifies class name to append to the base element

  • arrowKeyNavigationSelector
    string

    Specifies the CSS selector string that indicates to which elements the user can navigate using the arrow keys

    Default'a:not(:disabled),button:not(:disabled),input:not(:disabled)'
  • as
    elementType

    Specifies the base element

    Default'div'
  • children
    node

    Specifies the content of the menu

    Defaultnull
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

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