DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Contextual menu

The contextual menu provides quick access to navigation or actions related to the current context, enhancing usability and content organization.

Overview
Code

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; selected?: 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

() => {
  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="var(--spacing-padding-xl)">
      <DxcContainer width="300px">
        <DxcContextualMenu items={items} />
      </DxcContainer>
    </DxcInset>
  );
}

Navigation menu

() => {
  const groupItems = [
    {
      title: "Business services",
      items: [
        {
          label: "Home",
          icon: "home",
          items: [
            { label: "Data & statistics" },
            {
              label: "Apps",
              items: [
                {
                  label: "Sales data module",
                  badge: <DxcBadge color="primary" 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="var(--spacing-padding-xl)">
      <DxcContainer width="300px">
        <DxcContextualMenu items={groupItems} />
      </DxcContainer>
    </DxcInset>
  );
}
On this page