@leafygreen-ui/menu
@leafygreen-ui/menu
npm i @leafygreen-ui/menu
@leafygreen-ui/menu

@leafygreen-ui/menu

LeafyGreen UI – LeafyGreen's React UI Kit

by mongodb

19.0.1 (see all)License:Apache-2.0TypeScript:Built-In
npm i @leafygreen-ui/menu
Readme

Menu

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/menu

NPM

npm install @leafygreen-ui/menu

Peer Dependencies

PackageVersion
@leafygreen-ui/leafygreen-provider^1.1.0

Example

import { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu';

// Trigger as an HTML Element
<Menu align="bottom" justify="start" trigger={<button>trigger</button>}>
  <MenuItem active>Active Menu Item</MenuItem>
  <MenuItem
    disabled={boolean('Disabled', true)}
    description="I am a description"
  >
    Disabled Menu Item
  </MenuItem>
  <MenuItem description="I am also a description">
    Menu Item With Description
  </MenuItem>
  <MenuItem href="http://mongodb.design">I am a link!</MenuItem>
</Menu>;

// Trigger as a function
<Menu
  align="bottom"
  justify="start"
  trigger={({ onClick, children }) => (
    <button onClick={onClick}>
      Example Trigger
      {children}
    </button>
  )}
>
  <MenuItem>Menu Item 1</MenuItem>
  <MenuItem>Menu Item 2</MenuItem>
  <MenuItem>Menu Item 3</MenuItem>
</Menu>;

Output HTML

<!-- Trigger as an HTML Element -->
<button>
  trigger
  <div class="leafygreen-ui-1hyfx7x"></div>
</button>
<div class="leafygreen-ui-19z0mfw">
  <ul class="leafygreen-ui-1guv7w9" role="menu">
    <li role="none">
      <button
        data-leafygreen-ui="menu-item-container"
        class="leafygreen-ui-19xfwtd"
        role="menuitem"
        aria-disabled="false"
      >
        <div class="leafygreen-ui-14a8fex">Active Menu Item</div>
      </button>
    </li>
    <li role="none">
      <button
        data-leafygreen-ui="menu-item-container"
        class="leafygreen-ui-7pgwa0"
        role="menuitem"
        aria-disabled="true"
        tabindex="-1"
      >
        <div class="leafygreen-ui-10xqyru">Disabled Menu Item</div>
        <div class="leafygreen-ui-17sf9go">I am a description</div>
      </button>
    </li>
    <li role="none">
      <button
        data-leafygreen-ui="menu-item-container"
        class="leafygreen-ui-1sk3xcx"
        role="menuitem"
        aria-disabled="false"
      >
        <div class="leafygreen-ui-r0sqyc">Menu Item With Description</div>
        <div class="leafygreen-ui-1dm36mc">I am also a description</div>
      </button>
    </li>
    <li role="none">
      <a
        data-leafygreen-ui="menu-item-container"
        target="_blank"
        rel="noopener noreferrer"
        class="leafygreen-ui-1sk3xcx"
        role="menuitem"
        aria-disabled="false"
        href="http://mongodb.design"
        ><div class="leafygreen-ui-r0sqyc">I am a link!</div></a
      >
    </li>
  </ul>
</div>

<!-- Trigger as a function -->
<button>
  Example Trigger
  <div class="leafygreen-ui-1hyfx7x"></div>
</button>
<div class="leafygreen-ui-1td4qre">
  <ul class="leafygreen-ui-1guv7w9" role="menu">
    <li role="none">
      <button
        data-leafygreen-ui="menu-item-container"
        class="leafygreen-ui-1sk3xcx"
        role="menuitem"
        aria-disabled="false"
      >
        <div class="leafygreen-ui-r0sqyc">Menu Item 1</div>
      </button>
    </li>
    <li role="none">
      <button
        data-leafygreen-ui="menu-item-container"
        class="leafygreen-ui-1sk3xcx"
        role="menuitem"
        aria-disabled="false"
      >
        <div class="leafygreen-ui-r0sqyc">Menu Item 2</div>
      </button>
    </li>
    <li role="none">
      <button
        data-leafygreen-ui="menu-item-container"
        class="leafygreen-ui-1sk3xcx"
        role="menuitem"
        aria-disabled="false"
      >
        <div class="leafygreen-ui-r0sqyc">Menu Item 3</div>
      </button>
    </li>
  </ul>
</div>

We recommend using Menu with NextJS's links components in the following pattern:

import NextLink from 'next/link';

function CustomLink({ href, children, ...props }) {
  return (
    <NextLink href={href}>
      <a {...props}>
        {children}
      </a>
    </NextLink>
  );
}

<Menu trigger={<button onClick={handleClick}>trigger</button>} open={open}>
  <MenuItem as={CustomLink} href="/test">
    Test
  </MenuItem>
  <SubMenu
    title="Submenu"
    href="http://mongodb.design"
  >
    <MenuItem>SubMenu Item 1</MenuItem>
    <MenuItem as={CustomLink} href="/test-2">
      SubMenu Item 2
    </MenuItem>
  </SubMenu>
</Menu>

This pattern is recommended given the SubMenu component expects to pass styling through the className prop, which would not apply correctly if it was passed to NextLink.

In other words, defining a MenuItem as:

<MenuItem as={CustomLink} href="/test-2">
  SubMenu Item 2
  </MenuItem>

would render, but without the correct styles.

Properties

PropTypeDescriptionDefault
openbooleanDetermines whether or not the <Menu /> will appear as open or closedfalse
setOpenfunctionWhen controlling the component, use setOpen to keep track of the <Menu /> component's state so that clicks on the document's backdrop as well as a user pressing the Escape Key will close the Menu and update the consuming application's local state accordingly.
shouldClosefunctionDetermines if the Menu should close when the backdrop or Escape keys are clicked. Defaults to true.() => true
align'top', 'bottom', 'left', 'right'Determines the alignment of the <Menu /> component relative to a reference element, or the element's nearest parent'bottom'
justify'start', 'middle', 'end'Determines the justification of the Menu component (based on the alignment) relative to a reference element or the element's nearest parent'end'
refElHTMLElementPass a reference to an element that the Menu component should be positioned against
triggerfunction, React.ReactNodeA ReactNode against which the Menu will be positioned. The trigger prop can also support being passed a function. To work as expected, the function must accept an argument of children, which should be rendered inside of the function passed to trigger.
usePortalbooleanWill position Menu's children relative to its parent without using a Portal if usePortal is set to false. NOTE: The parent element should be CSS position relative, fixed, or absolute if using this option.true
adjustOnMutationbooleanDetermines whether or not the <Menu/> should reposition itself based on changes to trigger or reference element position.false
usePortalbooleanDetermines if the Menu will be rendered within a portal.true
portalContainerHTMLElement, nullSets the container used for the popover's portal.
scrollContainerHTMLElement, nullIf the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.
portalClassNamestringPasses the given className to the popover's portal container if the default portal container is being used.
popoverZIndexnumberSets the z-index CSS property for the popover.
darkModebooleanDetermines whether or not the component will be rendered in dark theme.

Any other properties will be spread on the Menu ul container

MenuItem

Properties

PropTypeDescriptionDefault
hrefstringIf supplied, will render the <MenuItem /> inside of an <a> tag, rather than a <button> tag
childrennodeContent to appear inside of <MenuItem /> component
classNamestringClassname applied to li element
onClickfunctionFunction that will be called when a <MenuItem /> is clicked
activebooleanDetermines if the <MenuItem /> is activefalse
disabledbooleanDetermines if the <MenuItem /> is disabledfalse
descriptionnodeContent to appear below main text of the <MenuItem />
asReact.ElementTypeDetermines what the <MenuItem /> will be rendered as
sizedefault, largeSize of the <MenuItem /> component'default'
glyphReact.ReactElementSlot to pass in an Icon rendered to the left of <MenuItem /> text.
...native attributes of component passed to as propAny other props will be spread on the root element

SubMenu

Properties

PropTypeDescriptionDefault
openbooleanDetermines if <SubMenu /> item appears openfalse
setOpenfunctionFunction to set the value of open in <SubMenu />
classNamestringclassName applied to SubMenu root element
descriptionstring, React.ReactElementContent to appear below main text of SubMenu
activebooleanDetermines if <SubMenu /> appears activefalse
disabledbooleanDetermines if <SubMenu /> appears disabledfalse
glyphReact.ReactElementSlot to pass in an Icon rendered to the left of <SubMenu /> text.
titlestringMain text rendered in <SubMenu />
hrefstringIf supplied, will render the <SubMenu /> inside of an <a> tag, rather than a <button> tag
spacingnumberDistance between the content rendered inside of the Menu and the trigger15
...native anchor or button attributesAny other props will be spread on the root element

Downloads/wk

17.8K

GitHub Stars

134

LAST COMMIT

7mos ago

MAINTAINERS

4

CONTRIBUTORS

42

OPEN ISSUES

0

OPEN PRs

10
VersionTagPublished
19.0.1
latest
2d ago
16.1.0-test.0
test
2mos ago
16.1.0-next.2
next
2mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate