⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Menu

Menu

The Menu component provides a flexible and customizable way to display a dropdown menu with various items and sub-items. It supports a range of features, including nested menus, separators, and positioning options.

Usage

  • Navigation: For creating a dropdown menu with multiple options or actions.
  • Contextual Actions: To provide context-sensitive options based on the current user interaction or selection.
  • Nested Menus: When you need hierarchical or grouped menu items.

Anatomy

The menu contains text labels paired with icons, all organised within a container.

Options

The Menu component comes in three options: base, nested, and icon

Base Menu

Nested Menu

With Icon

Specifications

Structure and spacing measurements for menu.

Live Demo

The Menu is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Loader
Pagination

Helix - HDFC Life 2025