npm package: @highlight-ui/menu
Description: This is Menu component in Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 4.5.9

[![npm](https://img.shields.io/npm/v/@highlight-ui/menu)](https://www.npmjs.com/package/@highlight-ui/menu)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/417ff7-menu/b/51a6b2)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-menu--basic-menu)

# @highlight-ui/menu

Using npm:

```bash
npm install @highlight-ui/menu
```

Using yarn:

```bash
yarn add @highlight-ui/menu
```

Using pnpm:

```bash
pnpm install @highlight-ui/menu
```

In your (S)CSS file:

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

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

```ts
import { Menu } from '@highlight-ui/menu';
```

## Usage

```tsx
import React, { useState } from 'react';
import { Menu } from '@highlight-ui/menu';

export default function MenuExample() {
  return (
    <Menu
      items={[
        { key: '1', title: 'Section 1' },
        { key: '2', title: 'Section 2' },
        {
          key: '3',
          title:
            'Section 3 with a really long text that gets truncated with an ellipsis at the end',
          disabled: true,
        },
      ]}
      onClick={handleOnClick}
    />
  );
}
```

## Props 📜

| Prop                         | Type                       | Required | Default   | Description                                              |
| :--------------------------- | :------------------------- | :------- | :-------- | :------------------------------------------------------- |
| `items`                      | `ListItem[]`               | Yes      |           | List of objects of type `ListItem`                       |
| `onClick`                    | `(item: ListItem) => void` | Yes      |           | Sets clicked item to the active and returns item         |
| `variant`                    | `"default", "anchor""`     | No       | `default` | Applies anchor menu style                                |
| `dragProps`                  | `DragProps<ListItem, D>`   | No       |           | Configuration for drag-and-drop capabilities             |
| `accessibilityProps`         | `NavAccessibilityProps`    | No       |           | Sets accessibility props for the nav container           |
| `disableAutoActiveFirstItem` | `boolean`                  | No       | `false`   | Should the first item be active by default               |
| `metadata`                   | `ComponentMetadata`        | No       | `null`    | Object used for testing. Contains testId and actionName. |

### Custom types 🔠

| Type                    | Values                                                                                                                                                        | Description                           |
| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------ |
| `ListItem`              | ["ListItem"](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/menu/src/types.tsx?ref_type=heads#L5) props         | Used in the `items` prop              |
| `DragProps`             | Provided by the `drag-and-drop` utility [package](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/tree/master/packages/ui/drag-and-drop) | Used in the `dragProps` prop          |
| `NavAccessibilityProps` | ["NavAccessibilityProps"](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/menu/src/Menu.tsx#L9) props            | Used in the `accessibilityProps` prop |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/417ff7-menu/b/51a6b2) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).