Dropdown Menu

The Dropdown Menu displays a customizable list of navigation or action items.

Examples

Basic Dropdown Menu

Preview

Code

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@hv/ui/dropdown-menu';
import { Button } from '@hv/ui/button';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Option 1</DropdownMenuItem>
    <DropdownMenuItem>Option 2</DropdownMenuItem>
    <DropdownMenuItem>Option 3</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Dropdown Menu with Submenus

Preview

Code

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '@hv/ui/dropdown-menu';
import { Button } from '@hv/ui/button';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>Submenu</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Sub Option 1</DropdownMenuItem>
        <DropdownMenuItem>Sub Option 2</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuItem>Option 2</DropdownMenuItem>
    <DropdownMenuItem>Option 3</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props

Name	Description	Type
className	Additional classes for styling components	String
sideOffset	Offset for menu alignment	Number
inset	Adds padding to specific menu items	Boolean
checked	State for checkbox or radio menu items	Boolean
ref	Forwarded reference to the menu element	React.Ref

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 to modify styles for a particular instance.