4.5.6 • Published 8 months ago

@highlight-ui/menu v4.5.6

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

npm personio.design storybook.personio.design

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

PropTypeRequiredDefaultDescription
itemsListItem[]YesList of objects of type ListItem
onClick(item: ListItem) => voidYesSets clicked item to the active and returns item
variant"default", "anchor""NodefaultApplies anchor menu style
dragPropsDragProps<ListItem, D>NoConfiguration for drag-and-drop capabilities
accessibilityPropsNavAccessibilityPropsNoSets accessibility props for the nav container
disableAutoActiveFirstItembooleanNofalseShould the first item be active by default
metadataComponentMetadataNonullObject used for testing. Contains testId and actionName.

Custom types 🔠

TypeValuesDescription
ListItem"ListItem" propsUsed in the items prop
DragPropsProvided by the drag-and-drop utility packageUsed in the dragProps prop
NavAccessibilityProps"NavAccessibilityProps" propsUsed 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.

@highlight-ui/button@highlight-ui/drag-and-drop@highlight-ui/icon@highlight-ui/typography@highlight-ui/utils-commons
@infinitebrahmanuniverse/nolb-_hig@everything-registry/sub-chunk-395personio-componants@zalastax/nolb-_hig
4.5.6

8 months ago

4.5.5

1 year ago

4.5.4

1 year ago

4.5.3

2 years ago

4.4.10

2 years ago

4.4.1

2 years ago

4.4.0

2 years ago

4.4.3

2 years ago

4.4.2

2 years ago

4.4.9

2 years ago

4.4.8

2 years ago

4.4.5

2 years ago

4.4.4

2 years ago

4.4.7

2 years ago

4.4.6

2 years ago

4.3.13

2 years ago

4.3.12

2 years ago

4.3.17

2 years ago

4.3.16

2 years ago

4.3.15

2 years ago

4.3.14

2 years ago

4.3.19

2 years ago

4.3.18

2 years ago

4.5.0-r18.0

2 years ago

4.5.0

2 years ago

4.3.20

2 years ago

4.5.2

2 years ago

4.5.1

2 years ago

4.3.24

2 years ago

4.3.23

2 years ago

4.3.22

2 years ago

4.3.21

2 years ago

4.3.28

2 years ago

4.3.27

2 years ago

4.3.26

2 years ago

4.3.25

2 years ago

4.3.29

2 years ago

4.3.4

2 years ago

4.3.9

2 years ago

4.3.6

2 years ago

4.3.5

2 years ago

4.3.8

2 years ago

4.3.7

2 years ago

4.3.11

2 years ago

4.3.10

2 years ago

4.3.2

2 years ago

4.3.1

2 years ago

4.3.3

2 years ago

4.3.0

2 years ago

4.2.17

2 years ago

4.2.15

2 years ago

4.2.16

2 years ago

4.2.10

2 years ago

4.2.11

2 years ago

4.2.12

2 years ago

4.2.13

2 years ago

4.2.14

2 years ago

4.2.9

2 years ago

4.1.8

3 years ago

4.1.7

3 years ago

4.1.9

3 years ago

4.0.27

3 years ago

4.2.3

2 years ago

4.2.2

3 years ago

4.2.5

2 years ago

4.2.4

2 years ago

4.2.1

3 years ago

4.2.0

3 years ago

4.2.7

2 years ago

4.2.6

2 years ago

4.2.8

2 years ago

4.1.10

3 years ago

4.1.11

3 years ago

4.1.16

3 years ago

4.1.12

3 years ago

4.1.13

3 years ago

4.1.14

3 years ago

4.1.15

3 years ago

4.1.4

3 years ago

4.1.3

3 years ago

4.1.6

3 years ago

4.1.5

3 years ago

4.1.0

3 years ago

4.1.2

3 years ago

4.1.1

3 years ago

4.0.19

3 years ago

4.0.21

3 years ago

4.0.20

3 years ago

4.0.23

3 years ago

4.0.22

3 years ago

4.0.25

3 years ago

4.0.18

3 years ago

4.0.16

3 years ago

4.0.15

3 years ago

4.0.17

3 years ago

4.0.0-alpha.1

3 years ago

4.0.5

3 years ago

4.0.4

3 years ago

4.0.10

3 years ago

4.0.7

3 years ago

4.0.6

3 years ago

4.0.1

3 years ago

4.0.0

3 years ago

4.0.3

3 years ago

4.0.2

3 years ago

4.0.12

3 years ago

4.0.11

3 years ago

4.0.14

3 years ago

4.0.13

3 years ago

4.0.8

3 years ago

4.0.0-alpha.0

3 years ago

3.0.12

3 years ago

3.0.13

3 years ago

3.0.14

3 years ago

3.0.9

3 years ago

3.0.10

3 years ago

3.0.11

3 years ago

3.0.4

4 years ago

3.0.8

4 years ago

3.0.7

4 years ago

3.0.6

4 years ago

3.0.5

4 years ago

3.0.3

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.0.19

4 years ago

2.0.20

4 years ago

2.0.18

4 years ago

2.0.17

4 years ago

2.0.16

4 years ago

2.0.15

4 years ago

2.0.14

4 years ago

2.0.13

4 years ago

2.0.11

4 years ago

2.0.12

4 years ago

2.0.10

4 years ago

2.0.7

4 years ago

2.0.9

4 years ago

2.0.8

4 years ago

2.0.5

4 years ago

2.0.6

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.1

4 years ago