SelectMenu

Edit this page 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>

Disabled

Show editable code example

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

<SelectMenu disabled>
  <MenuItem>A Menu Item</MenuItem>
</SelectMenu>

<SelectMenu disabled>
  <MenuItem>A Menu Item</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'
disabled bool
Specifies if the SelectMenu is disabled.
Defaultfalse

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

Usage Insights#

MenuItem

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	1
frontend-app-course-authoring	22.8.1	17
prospectus	20.46.2	1

SelectMenu

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	22.8.1	2

Edit this page Leave feedback

Paragon Design System

Theme

SelectMenu

Basic usage

Inverse variant

Linked variant

Disabled

Theme Variables (SCSS)#

Props API#

Usage Insights#

MenuItem

SelectMenu

All components (A-Z)

Theme

SelectMenu

Basic usage#

Inverse variant#

Linked variant#

Disabled#

Theme Variables (SCSS)#

Props API#

Usage Insights#

MenuItem

SelectMenu

All components (A-Z)

Basic usage

Inverse variant

Linked variant

Disabled