Context Menu

The ContextMenu component displays a menu with actions or options triggered by user interaction.

Example

Preview

Code

'use client';

import React from 'react';

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuList,
  ContextMenuItem,
} from '@hv/ui/context-menu';
import { Button } from '@hv/ui/button';

export default function ContextMenuExample() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        <Button>Context Menu</Button>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuList className='list-none px-5'>
          <ContextMenuItem asChild>
            <Button variant='ghost'>Open</Button>
          </ContextMenuItem>
          <ContextMenuItem asChild>
            <Button variant='ghost'>Edit</Button>
          </ContextMenuItem>
          <ContextMenuItem asChild>
            <Button variant='ghost'>Save</Button>
          </ContextMenuItem>
        </ContextMenuList>
      </ContextMenuContent>
    </ContextMenu>
  );
}

Structure

ContextMenu

Prop	Description	Type
children	The menu content, including trigger and items	ReactNode

ContextMenuTrigger

Prop	Description	Type
asChild	Renders the trigger as a child element	Boolean
className	Custom CSS classes for styling the trigger	String

ContextMenuContent

Prop	Description	Type
className	Custom CSS classes for styling the content	String

ContextMenuList

Prop	Description	Type
title	Optional title for the menu group	String
className	Custom CSS classes for styling the list	String

ContextMenuItem

Prop	Description	Type
asChild	Renders the item as a child element	Boolean
className	Custom CSS classes for styling the item	String

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.