Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

SelectMenu

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

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>

Inverse variant

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>

Linked variant

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>

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 NameParagon VersionInstance Count
frontend-app-learning20.28.41
prospectus20.32.31

SelectMenu

Project NameParagon VersionInstance Count
frontend-app-learning20.28.41
Leave feedback

Contents

All components (A-Z)