Dropdown Menu Component ⬇️

August 8, 2025 · View on GitHub

A beautiful, accessible dropdown menu for Angular, featuring multiple variants, advanced animations, mobile-first design, and full keyboard support.

✨ Features

🎨 7+ Variants: Glass, Gradient, Neon, Minimal, Floating, Elevated, and more
📱 Mobile-First: Smart positioning, touch-friendly, responsive layouts
♿ Accessibility: ARIA support, keyboard navigation, focus management
⚡ Performance: Built with Angular signals for optimal reactivity
🛠️ Customizable: Easily style with Tailwind CSS and CVA
🧩 Group & Icon Support: Menu groups, icons, badges, and descriptions
🔗 No External Dependencies: Pure Angular + Tailwind

🚀 Installation

Initialize Angular SuperUI in your project:

ngsui-cli init

Add the Dropdown Menu component:

ngsui-cli add dropdown-menu

🧑‍💻 Usage

Import the DropdownMenu component in your Angular component:

import { Component } from '@angular/core';
import { DropdownMenu } from 'angular-superui';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [DropdownMenu],
  template: `
    <DropdownMenu [items]="menuItems" [triggerText]="'Menu'"></DropdownMenu>
  `
})
export class DemoComponent {
  menuItems = [
    { label: 'Profile', value: 'profile' },
    { label: 'Settings', value: 'settings' },
    { separator: true },
    { label: 'Sign Out', value: 'signout', variant: 'destructive' }
  ];
}

🌈 Examples

Premium Glass Variant

<DropdownMenu
  [items]="premiumMenuItems"
  [triggerText]="'Premium Menu'"
  triggerVariant="gradient"
  triggerSize="lg"
  variant="glass"
  size="lg"
  (itemSelect)="onItemSelect($event)"
></DropdownMenu>

Developer Tools Variant

<DropdownMenu
  [items]="developerMenuItems"
  [triggerText]="'Dev Tools'"
  triggerVariant="neon"
  triggerSize="default"
  variant="blur"
  size="default"
  (itemSelect)="onItemSelect($event)"
></DropdownMenu>

<DropdownMenu
  [menuGroups]="userProfileGroups"
  [triggerText]="'John Doe'"
  triggerVariant="glass"
  triggerSize="lg"
  variant="floating"
  size="lg"
  (itemSelect)="onItemSelect($event)"
></DropdownMenu>

Minimal Clean Variant

<DropdownMenu
  [items]="minimalMenuItems"
  [triggerText]="'Options'"
  triggerVariant="outline"
  triggerSize="sm"
  variant="minimal"
  size="sm"
  (itemSelect)="onItemSelect($event)"
></DropdownMenu>

⚙️ API Reference

Inputs

Input	Type	Default	Description
`items`	`DropdownMenuItemData[]`	`[]`	Array of menu items
`menuGroups`	`DropdownMenuGroupData[]`	`[]`	Array of grouped menu items
`triggerText`	`string`	`''`	Text for the trigger button
`triggerVariant`	`'default'\|'gradient'\|'glass'\|'neon'\|'outline'\|'secondary'\|'ghost'\|'destructive'`	`'default'`	Style variant for the trigger button
`triggerSize`	`'sm'\|'default'\|'lg'`	`'default'`	Size of the trigger button
`variant`	`'glass'\|'gradient'\|'neon'\|'minimal'\|'floating'\|'elevated'`	`'glass'`	Style variant for the dropdown menu
`size`	`'sm'\|'default'\|'lg'`	`'default'`	Size of the dropdown menu
`hideChevron`	`boolean`	`false`	Hide the chevron icon in the trigger
`className`	`string`	`''`	Additional CSS classes

Outputs

Output	Type	Description
`itemSelect`	`DropdownMenuItemData`	Emitted when a menu item is selected

Item Data Interface

interface DropdownMenuItemData {
  label: string;
  value?: string;
  icon?: string;
  description?: string;
  badge?: string;
  shortcut?: string;
  variant?: 'default' | 'destructive';
  separator?: boolean;
}

Group Data Interface

interface DropdownMenuGroupData {
  label?: string;
  items: DropdownMenuItemData[];
}

🛡️ Accessibility

Full keyboard navigation (Tab, Arrow keys, Enter, Escape)
ARIA roles and attributes for menu and items
Focus management and visible focus ring
Screen reader support for all menu actions

🎨 Styling & Customization

Built with Tailwind CSS utility classes
Easily override styles with className input
Supports dark mode out of the box
Customizable menu width, border, shadow, and more

💡 Best Practices

Use clear, descriptive labels for menu items
Group related actions using menuGroups
Use icons and badges for visual clarity
Test keyboard and screen reader navigation

📚 More Examples

See the full interactive demo and advanced usage in the Dropdown Menu Demo.