@synerise/ds-menu NPM

id: menu

title: Menu

Menu UI Component

Installation

npm i @synerise/ds-menu
or
yarn add @synerise/ds-menu

Usage

import Menu from '@synerise/ds-menu'

const items = [
  {
    text: 'Item 1',
    copyable: true,
    copyHint: 'Copy to clipboard',
    copyValue: 'Item 1',
    copyTooltip: 'Copied Item 1!'
  },
 {
    text: 'Item 2',
    copyable: true,
    copyHint: 'Copy to clipboard',
    copyValue: 'Item 2',
    copyTooltip: 'Copied Item 2!'
  },
];

// Render using dataSource passed as prop
<Menu  dataSource={items} />

// Render using dataSource mapping to Menu.Item
<Menu>
    {items.map(item => <Menu.Item {...item}/>}
</Menu>

Demo

Property	Description	Type	Default
asDropdownwMenu	Add additional styles for dropdown menu	boolean	`false`
dataSource	Array of items to display in menu	MenuItemProps[]	-
ordered	Determines if items should be displayed with index prefix (starting from 01)	boolean	`false`
maxToShowItems	limits the number of items rendered. remaining are shown after button click	number	-
texts	custom translations	MenuTexts	-

MenuItemProps

Property	Description	Type	Default
children	Children of the item	React.ReactNode
copyable	Boolean to enable option of copying the value to the clipboard	boolean	`false`
copyHint	Text displayed on hovering copyable item	string
copyValue	Value to be copied to clipboard when copyable item is clicked	string
copyTooltip	Tooltip to be displayed when copyable item is clicked	string / React.ReactNode
disabled	Disable an item element	boolean	`false`
description	Additional description displayed inside the item	string / React.ReactNode
highlight	Text to be highlighted inside the item	string
indentLevel	Indent level of the text inside the item.	Number	0
parent	Boolean to display arrow for parent item	boolean	`false`
prefixel	Prefix element node or a function to render it.	(hovered: boolean) => React.ReactNode / React.ReactNode	-
prefixVisibilityTrigger	Trigger for displaying the prefix element	`default` / `hover`	`default`
size	Size of the item. Affects the maximum and minimum height.	`default` / `large`	`default`
suffixel	Suffix element node or a function to render it.	(hovered: boolean) => React.ReactNode / React.ReactNode	-
suffixVisibilityTrigger	Trigger for displaying the suffix element	`default` / `hover`	`default`
subMenu	Array of nested items	MenuItemProps[]
text	Text displayed inside the item	string / React.ReactNode	-
type	Type of the item	`default` / `select` / `danger`	`default`

MenuTexts

Property	Description	Type	Default
showLess	toggle button label	ReactNode	-
showMore	toggle button label	ReactNode	-

@synerise/ds-button @synerise/ds-icon @synerise/ds-tooltip @synerise/ds-utils classnames copy-to-clipboard rc-menu rc-trigger uuid

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-890 @zalastax/nolb-_syn @synerise/ds-column-manager @synerise/ds-context-selector @synerise/ds-factors @synerise/ds-folders @synerise/ds-information-card @synerise/ds-items-roll @synerise/ds-search @synerise/ds-manageable-list @synerise/ds-table @synerise/ds-tabs @synerise/ds-sidebar @synerise/ds-sidebar-object @synerise/design-system @synerise/ds-card-tabs @synerise/ds-treemenu

7 months ago

7 months ago

7 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

5 months ago

5 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago