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.
| Name | Type | Description | Default |
|---|---|---|---|
Required items | (Item | GroupItem)[] | Section[]being an {
badge?: React.ReactElement;
icon?: string | SVG;
label: string;
onSelect?: () => void;
selectedByDefault?: boolean;
}a {
badge?: React.ReactElement;
icon?: string | SVG;
items: (Item | GroupItem)[];
label: string;
}and a {
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. | - |
() => { const items = [ { items: [ { label: "Collaboration & access", icon: "group", onSelect: () => { console.log("Collaboration & access"); } }, { label: "Comments", icon: "forum", badge: <DxcBadge mode="notification" label={9} />, onSelect: () => { console.log("Comments"); } }, { label: "Pending tasks", icon: "task", onSelect: () => { console.log("Pending tasks"); } }, ], }, { items: [ { label: "Apps", icon: "apps", onSelect: () => { console.log("Apps"); } }, { label: "Settings", icon: "settings", onSelect: () => { console.log("Settings"); } } ], } ]; return ( <DxcInset space="2rem"> <DxcContainer width="300px"> <DxcContextualMenu items={items} /> </DxcContainer> </DxcInset> ); }
() => { const groupItems = [ { title: "Business services", items: [ { label: "Home", icon: "home", items: [ { label: "Data & statistics" }, { label: "Apps", items: [ { label: "Sales data module", badge: <DxcBadge color="purple" label="Experimental" />, }, { label: "Central platform" }, ], }, ], }, { label: "Data warehouse", icon: "database", items: [ { label: "Data & statistics", }, { label: "Sales performance", }, { label: "Key metrics" }, ], }, ], }, { items: [ { label: "Support", icon: "support_agent" }, ], }, ]; return ( <DxcInset space="2rem"> <DxcContainer width="300px"> <DxcContextualMenu items={groupItems} /> </DxcContainer> </DxcInset> ); }