Theme

npm_versionnpm Paragon package page

An arrow-key navigable Menu which consists of MenuItems. A Menu can be employed to produce its common variants, including dropdown menus, select menus, and others. Menus are keyboard navigable with both tab and arrow keys.

A MenuItem is its own distinct component that is used by any kind of menu overlays i.e. dropdown menu and navigation menu.

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

With Form

A Menu can include things like forms.

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

With Modal

A Menu can be implemented to appear inside a modalpopup for a wide variety of use cases. 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.

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

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#

Menu Props API
  • className string

    Specifies class name to append to the base element

  • arrowKeyNavigationSelector string

    Specifies the CSS selector string that indicates to which elements the user can navigate using the arrow keys

    Default'a:not(:disabled),button:not(:disabled),input:not(:disabled)'
  • as elementType

    Specifies the base element

    Default'div'
  • children node

    Specifies the content of the menu

    Defaultnull
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#

Menu

Project NameParagon VersionInstance Count
frontend-app-course-authoring22.4.05
frontend-app-learning22.3.01
prospectus20.46.21

MenuItem

Project NameParagon VersionInstance Count
frontend-app-course-authoring22.4.023
frontend-lib-content-components22.0.01
prospectus20.46.21