@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 |

DropdownMenuItem

The DropdownMenuItem gets its props from the a and button types.

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.