SelectMenu

Leave feedback

The SelectMenu component is triggered on the click of a button, 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

Show editable code example

Any Paragon component or export may be added to the code example.

<SelectMenu>
  <MenuItem>A Menu Item</MenuItem>
  <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
  <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
  <MenuItem disabled>A Disabled Menu Item</MenuItem>
  <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
</SelectMenu>

<SelectMenu>
  <MenuItem>A Menu Item</MenuItem>
  <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
  <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
  <MenuItem disabled>A Disabled Menu Item</MenuItem>
  <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
</SelectMenu>

Inverse variant

Show editable code example

Any Paragon component or export may be added to the code example.

  <Stack className="bg-dark-700 p-4">
    <SelectMenu variant="inverse-brand">
      <MenuItem>A Menu Item</MenuItem>
      <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
      <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
      <MenuItem disabled>A Disabled Menu Item</MenuItem>
      <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
    </SelectMenu>
</Stack>

  <Stack className="bg-dark-700 p-4">
    <SelectMenu variant="inverse-brand">
      <MenuItem>A Menu Item</MenuItem>
      <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
      <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
      <MenuItem disabled>A Disabled Menu Item</MenuItem>
      <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
    </SelectMenu>
</Stack>

Linked variant

Show editable code example

Any Paragon component or export may be added to the code example.

<SelectMenu variant="link" defaultMessage="Choose Your New Best Friend">
  <MenuItem>Falstaff</MenuItem>
  <MenuItem>Scipio</MenuItem>
  <MenuItem defaultSelected>Faustus</MenuItem>
  <MenuItem>Cordelia</MenuItem>
  <MenuItem>Renfrancine</MenuItem>
  <MenuItem>Stovern</MenuItem>
  <MenuItem>Kainian</MenuItem>
  <MenuItem>M. Hortens</MenuItem>
</SelectMenu>

<SelectMenu variant="link" defaultMessage="Choose Your New Best Friend">
  <MenuItem>Falstaff</MenuItem>
  <MenuItem>Scipio</MenuItem>
  <MenuItem defaultSelected>Faustus</MenuItem>
  <MenuItem>Cordelia</MenuItem>
  <MenuItem>Renfrancine</MenuItem>
  <MenuItem>Stovern</MenuItem>
  <MenuItem>Kainian</MenuItem>
  <MenuItem>M. Hortens</MenuItem>
</SelectMenu>

Theme Variables (SCSS)#

$menu-box-shadow:                                 $box-shadow !default;
$menu-border-radius:                              .25em !default;
$menu-bg:                                         $white !default;
$menu-max-height:                                 16.813rem !default;
$menu-item-height:                                3rem !default;
$menu-item-width:                                 19rem !default;
$menu-item-width-xs:                              13.438rem !default;
$menu-item-color:                                 $body-color !default;
$menu-item-bg:                                    transparent !default;
$menu-item-border-color:                          $menu-item-bg !default;
$menu-item-border-width:                          $btn-border-width !default;
$menu-item-hover-border:                          $menu-item-bg !default;
$menu-item-padding-x:                             $btn-padding-x !default;
$menu-item-padding-y:                             $btn-padding-y !default;
$menu-item-hover-color:                           $btn-tertiary-color !default;
$menu-item-hover-border-color:                    $menu-item-bg !default;
$menu-item-hover-bg:                              $btn-tertiary-hover-bg !default;
$menu-item-icon-margin-left:                      .25em !default;
$menu-item-icon-margin-right:                     $menu-item-icon-margin-left !default;
$menu-item-focus-bg:                              $btn-tertiary-active-bg !default;
$menu-item-border:                                $menu-item-border-width solid $menu-item-border-color !default;
$menu-select-btn-link-color:                      $primary-500 !default;
$menu-select-btn-link-text-decoration-line:       underline !default;
$menu-select-btn-link-text-decoration-thickness:  .125rem !default;

Props API#

SelectMenu Props API

defaultMessage string
String that is displayed for default value of the SelectMenu
Default'Select...'
children node Required
Specifies the content of the SelectMenu
className string
Specifies class name to append to the base element
variant string
Specifies variant to use.
Default'outline-primary'

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 element | func
Specifies the jsx before the content of the MenuItem
iconAfter element | func
Specifies the jsx after the content of the MenuItem

Usage Insights#

MenuItem

	Project Name	Paragon Version	Instance Count
	prospectus	20.45.2	2

Leave feedback

Paragon Design System

Theme

SelectMenu

Basic usage

Inverse variant

Linked variant

Theme Variables (SCSS)#

Props API#

Usage Insights#

MenuItem

All components (A-Z)

Theme

SelectMenu

Basic usage#

Inverse variant#

Linked variant#

Theme Variables (SCSS)#

Props API#

Usage Insights#

MenuItem

All components (A-Z)

Basic usage

Inverse variant

Linked variant