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