DropdownMenu

Dropdown Menus are used to collapse a group of associated actions together.

children


        <DropdownLink href="/">Dropdown Link</DropdownLink>
        <DropdownButton>Dropdown Button</DropdownButton>


        <DropdownLink href="/">Dropdown Link</DropdownLink>
        <DropdownButton>Dropdown Button</DropdownButton>

disabled

backgroundColor

showArrow

placement

showDelay

hideDelay

defaultOpen

trigger

className

boundariesElement

openAriaLabel

import * as React from "react";
import {
  DropdownMenu,
  DropdownLink,
  DropdownButton
} from "@nulogy/components";

export default () => {
  return (
    <DropdownMenu showArrow={false} defaultOpen={false}>
      <DropdownLink href="/">Dropdown Link</DropdownLink>
      <DropdownButton>Dropdown Button</DropdownButton>
    </DropdownMenu>
  );
}

import * as React from "react";
import {
  DropdownMenu,
  DropdownLink,
  DropdownButton
} from "@nulogy/components";

export default () => {
  return (
    <DropdownMenu showArrow={false} defaultOpen={false}>
      <DropdownLink href="/">Dropdown Link</DropdownLink>
      <DropdownButton>Dropdown Button</DropdownButton>
    </DropdownMenu>
  );
}

Variations

Custom Trigger

A custom trigger element can be passed to change the trigger that opens the dropdowns.

Custom Colors

A custom trigger element can be passed to change the trigger that opens the dropdowns.

DropdownItem

Using the Dropdown Link and DropdownButton components with the DropdownMenu are recommended as they provide the correct link and button styles for the dropdown. However, wrapping another component with DropdownItem will also apply correct styling for the DropdownMenu.

As a Controlled Component

The DropdownMenu is currently to be used as an uncontrolled component. However, the component does come with hooks to use to close the menu when elements within the menu are clicked. Use the closeMenu function provided by the DropdownMenu component via the render props React pattern as shown below. Note: event must be passed in to closeMenu.

Props

Name	Type	Default	Description
children	react node		The dropddown menu items
disabled	boolean	false	Marks the button as disabled and unable to be activated.
backgroundColor	string	whiteGrey	Background color of the menu container.
showArrow	boolean	true	Determines if the arrow is shown on the menu container.
placement	string	bottom-start	One of top, bottom, left, or right with optional -start or -end appended to place the menu container relative to the trigger.
showDelay	number	100	Buffer delay time to show the dropdown menu when opening.
hideDelay	number	200	Buffer delay time to hide the dropdown menu when closing.
defaultOpen	boolean	false	State of the dropdown menu when mounted.
trigger	function		Function that returns a button component that will be used as the trigger.
className	string		className passed to the dropdown menu container.
boundariesElement	string		The element which will define the boundaries of the dropdown position. The opened dropdown will never be placed outside of the defined boundaries
openAriaLabel	string	open	aria label when the dropdown is closed

Related Components

IconicButton