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

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>

Linked variant

Show editable code example

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

<SelectMenu isLink 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 isLink 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...'
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 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
	frontend-app-learning	20.28.4	1
	prospectus	20.32.3	1

SelectMenu

	Project Name	Paragon Version	Instance Count
	frontend-app-learning	20.28.4	1

Paragon Design System

Theme

PlaygroundBeta

SelectMenu

Basic usage

Linked variant

Theme Variables (SCSS)#

Props API#

Usage Insights#

MenuItem

SelectMenu

All components (A-Z)

Theme

PlaygroundBeta

SelectMenu

Basic usage#

Linked variant#

Theme Variables (SCSS)#

Props API#

Usage Insights#

MenuItem

SelectMenu

All components (A-Z)

Basic usage

Linked variant