@highlight-ui/dropdown-menu NPM

@highlight-ui/dropdown-menu

Installation

Using npm:

npm install @highlight-ui/dropdown-menu

Using yarn:

yarn add @highlight-ui/dropdown-menu

Using pnpm:

pnpm install @highlight-ui/dropdown-menu

In your (S)CSS file:

@import url('@highlight-ui/dropdown-menu');

Once the package is installed, you can import the library:

import {
  DropdownMenu,
  DropdownMenuItem,
  DropdownMenuList,
  DropdownMenuToggle,
} from '@highlight-ui/dropdown-menu';

Usage

import React from 'react';
import {
  DropdownMenu,
  DropdownMenuToggle,
  DropdownMenuList,
  DropdownMenuItem,
} from '@highlight-ui/dropdown-menu';
import { Button } from '@highlight-ui/button';

export default function DropdownMenuExample() {
  return (
    <DropdownMenu>
      <DropdownMenuToggle>
        <Button buttonState={disabled ? 'disabled' : undefined}>
          Toggle Me!
        </Button>
      </DropdownMenuToggle>
      <DropdownMenuList direction={direction} title={title}>
        <DropdownMenuItem
          onClick={() => {
            console.log('clicked!');
          }}
        >
          Item label (as Button)
        </DropdownMenuItem>
        <DropdownMenuItem
          href="https://personio.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Item label (as Link)
        </DropdownMenuItem>
        <DropdownMenuItem disabled>Item label (disabled)</DropdownMenuItem>
      </DropdownMenuList>
    </DropdownMenu>
  );
}

Props 📜

DropdownMenu

Prop	Type	Required	Default	Description
`open`	`boolean`	No	`false`	Whether the dropdown is open or not
`defaultValue`	`boolean`	No	`false`	Default open value
`className`	`string`	No		Allows providing a custom class name to the DIV element that surrounds the text
`closeOnClickAnywhere`	`boolean`	No	`false`	Enables closing the dropdown menu when clicking inside
`disabled`	`boolean`	No	`false`	Prevents the open state of the dropdown menu from changing (Only works when the `open` prop is not being used)
`onChange`	`() => void`	No		Callback triggered whenever the open state of the dropdown menu is changed (Only works when the `open` prop is not being used)
`onClose`	`() => void`	No		Callback triggered whenever the dropdown menu is closed (Only works when the `open` prop is not being used)
`onOpen`	`() => void`	No		Callback triggered whenever the dropdown menu is opened (Only works when the `open` prop is not being used)
`onRequestToChange`	`() => void`	No		Callback triggered when the open state of the dropdown menu is about to change (Only works when the `open` prop is in use)

DropdownMenuToggle

Prop	Type	Required	Default	Description
`className`	`string`	No		Allows providing a custom class name to the toggle
`disabled`	`boolean`	No	`false`	Prevents the open state of the dropdown menu from changing
`onToggle`	`() => void`	No		Callback triggered whenever the open state of the dropdown menu is changed

DropdownMenuList

Prop	Type	Required	Default	Description
`open`	`boolean`	No	`false`	Whether the dropdown is open or not
`className`	`string`	No		Allows providing a custom class name to the list
`containerWidth`	`number`	No	`0`	The max width of the container
`direction`	`'bottom-left', 'bottom-right', 'center', 'top-left', 'top-right'`	No	`bottom-right`	The direction that the menu should open from - relative to the trigger
`onToggle`	`() => void`	No		Callback triggered whenever the open state of the dropdown menu is changed
`preventToCloseOnClick`	`boolean`	No	`false`	Prevents the close on click
`title`	`string`	No		Gives this dropdown a title