Dropdown Menu

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

import { DropdownMenu, DropdownLink, DropdownButton } from "@nulogy/components";

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

Variations

Custom Trigger

<DropdownMenu trigger={() => <Button>Custom Trigger</Button>}>
  <DropdownLink href="/">Dropdown Link</DropdownLink>
  <DropdownButton>Dropdown Button</DropdownButton>
</DropdownMenu>

Custom Colors

const customColors = {
  color: "white",
  hoverColor: "white",
  bgHoverColor: "black"
};

<DropdownMenu backgroundColor="blackBlue">
  <DropdownLink href="/" {...customColors}>Dropdown Link</DropdownLink>
  <DropdownButton {...customColors}>Dropdown Button</DropdownButton>
</DropdownMenu>

Disabled

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

Using 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.

<DropdownMenu>
  <DropdownItem>
    <a href="/" style={{textDecoration:"none"}}>Custom Link Component</a>
  </DropdownItem>
</DropdownMenu>

Closing the DropdownMenu

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.

<DropdownMenu>
  {({ closeMenu }) => (
    <DropdownButton onClick={(e)=>{closeMenu(e)}}>Dropdown Button</DropdownButton>
  )}
</DropdownMenu>

Props

NameTypeDefaultDescription

trigger

Function

() => <IconicButton icon="more"/>

Function that returns a button component that will be used as the trigger.

disabled

Boolean

false

Marks the button as disabled and unable to be activated.

backgroundColor

String

whiteGrey

Background color of the menu container.

showArrow

Bool

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

Bool

false

State of the dropdown menu when mounted.

className

String

undefined

className passed to the dropdown menu container.

boundariesElement

String<'viewport' | 'scrollParent'> | HTMLElement

undefined

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

openAriaLabel

String

open

aria label when the dropdown is closed

Related components