4.5.4 • Published 3 months ago

@highlight-ui/menu v4.5.4

Weekly downloads
-
License
MIT
Repository
-
Last release
3 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.4

3 months ago

4.5.3

5 months ago

4.4.10

7 months ago

4.4.1

9 months ago

4.4.0

9 months ago

4.4.3

8 months ago

4.4.2

8 months ago

4.4.9

7 months ago

4.4.8

7 months ago

4.4.5

8 months ago

4.4.4

8 months ago

4.4.7

8 months ago

4.4.6

8 months ago

4.3.13

10 months ago

4.3.12

10 months ago

4.3.17

10 months ago

4.3.16

10 months ago

4.3.15

10 months ago

4.3.14

10 months ago

4.3.19

10 months ago

4.3.18

10 months ago

4.5.0-r18.0

8 months ago

4.5.0

7 months ago

4.3.20

10 months ago

4.5.2

7 months ago

4.5.1

7 months ago

4.3.24

9 months ago

4.3.23

10 months ago

4.3.22

10 months ago

4.3.21

10 months ago

4.3.28

9 months ago

4.3.27

9 months ago

4.3.26

9 months ago

4.3.25

9 months ago

4.3.29

9 months ago

4.3.4

1 year ago

4.3.9

11 months ago

4.3.6

12 months ago

4.3.5

12 months ago

4.3.8

11 months ago

4.3.7

12 months ago

4.3.11

11 months ago

4.3.10

11 months ago

4.3.2

1 year ago

4.3.1

1 year ago

4.3.3

1 year ago

4.3.0

1 year ago

4.2.17

1 year ago

4.2.15

1 year ago

4.2.16

1 year ago

4.2.10

1 year ago

4.2.11

1 year ago

4.2.12

1 year ago

4.2.13

1 year ago

4.2.14

1 year ago

4.2.9

1 year ago

4.1.8

1 year ago

4.1.7

1 year ago

4.1.9

1 year ago

4.0.27

1 year ago

4.2.3

1 year ago

4.2.2

1 year ago

4.2.5

1 year ago

4.2.4

1 year ago

4.2.1

1 year ago

4.2.0

1 year ago

4.2.7

1 year ago

4.2.6

1 year ago

4.2.8

1 year ago

4.1.10

1 year ago

4.1.11

1 year ago

4.1.16

1 year ago

4.1.12

1 year ago

4.1.13

1 year ago

4.1.14

1 year ago

4.1.15

1 year ago

4.1.4

1 year ago

4.1.3

1 year ago

4.1.6

1 year ago

4.1.5

1 year ago

4.1.0

1 year ago

4.1.2

1 year ago

4.1.1

1 year ago

4.0.19

2 years ago

4.0.21

2 years ago

4.0.20

2 years ago

4.0.23

2 years ago

4.0.22

2 years ago

4.0.25

2 years ago

4.0.18

2 years ago

4.0.16

2 years ago

4.0.15

2 years ago

4.0.17

2 years ago

4.0.0-alpha.1

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.10

2 years ago

4.0.7

2 years ago

4.0.6

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

4.0.12

2 years ago

4.0.11

2 years ago

4.0.14

2 years ago

4.0.13

2 years ago

4.0.8

2 years ago

4.0.0-alpha.0

2 years ago

3.0.12

2 years ago

3.0.13

2 years ago

3.0.14

2 years ago

3.0.9

2 years ago

3.0.10

2 years ago

3.0.11

2 years ago

3.0.4

2 years ago

3.0.8

2 years ago

3.0.7

2 years ago

3.0.6

2 years ago

3.0.5

2 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.0.19

3 years ago

2.0.20

3 years ago

2.0.18

3 years ago

2.0.17

3 years ago

2.0.16

3 years ago

2.0.15

3 years ago

2.0.14

3 years ago

2.0.13

3 years ago

2.0.11

3 years ago

2.0.12

3 years ago

2.0.10

3 years ago

2.0.7

3 years ago

2.0.9

3 years ago

2.0.8

3 years ago

2.0.5

3 years ago

2.0.6

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.1

3 years ago