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

Name Type Description Default

items

Name	Type	Description	Default
items	`(Item \| GroupItem)[] \| Section[]` being an `Item` an object with the following properties: `{ badge?: React.ReactElement; icon?: string \| SVG; label: string; onSelect?: () => void; }` 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.	-

(Item | GroupItem)[] | Section[]

being an Item an object with the following properties:

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

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

() => {
  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 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>
  );
}

() => {
  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>
  );
}

Props
Examples
- Action menu
- Navigation menu

Edit this page on GitHub

Report an issue on GitHub

Container

NextDate Input

Contextual Menu

Props

Examples

Action menu

Navigation menu

Contents