@highlight-ui/menu

Using npm:

npm install @highlight-ui/menu

Using yarn:

yarn add @highlight-ui/menu

Using pnpm:

pnpm install @highlight-ui/menu

In your (S)CSS file:

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

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

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

Usage

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" props | Used in the items prop | | DragProps | Provided by the drag-and-drop utility package | Used in the dragProps prop | | NavAccessibilityProps | "NavAccessibilityProps" props | Used in the accessibilityProps prop |

Contributing 🖌️

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

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