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
Any Paragon component or export may be added to the code example.
Linked variant
Any Paragon component or export may be added to the code example.
Props API#
- defaultMessage
stringDefault'Select...'String that is displayed for default value of the
SelectMenu - isLink
boolDefaultfalseDisplays chosen value of the
SelectMenuas a link - children
nodeRequiredSpecifies the content of the
SelectMenu - className
stringSpecifies class name to append to the base element
- defaultSelected
boolDefaultfalseSpecifies that this
MenuItemis selected inside theSelectMenu - className
stringSpecifies class name to append to the base element
- children
nodeDefaultnullSpecifies the content of the
MenuItem - as
elementTypeDefault'button'Specifies the base element
- iconBefore
element|funcSpecifies the jsx before the content of the
MenuItem - iconAfter
element|funcSpecifies 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.28.3 | 1 |
SelectMenu
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-learning | 20.28.4 | 1 |