Contextual Menu

The Contextual menu is a powerful component that improves user experience by allowing users to navigate through page-level content or choose from a list of actions while complementing the general disposition of the main content within the interface.

Props

NameTypeDescriptionDefault
Required
items
(Item | GroupItem)[] | Section[]

being an Item an object with the following properties:

{ badge?: React.ReactElement; icon?: string | SVG; label: string; onSelect?: () => void; selectedByDefault?: boolean; }

a GroupItem another object with the following properties:

{ badge?: React.ReactElement; icon?: string | SVG; items: (Item | GroupItem)[]; label: string; }

and a Section another object with the following properties:

{ items: (Item | GroupItem)[]; title?: string }
Array of items to be displayed in the Contextual menu. Each item can be a single/simple item, a group item or a section.-

Examples

Action menu

Navigation menu