Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Menu

Menu

 Overview API Examples Style Tokens

The Menu component is a flexible popup container that displays a list of selectable options or actions, with support for nested submenus and multiple selection modes.

Basic usage

The Menu provides a configurable dropdown interface that can be triggered from any element using the lmnMenuTrigger directive.

Component anatomy

Position

Control menu placement using the position Input with four options:

  • Below Before: Opens below trigger, aligned to start
  • Below After: Opens below trigger, aligned to end
  • Above Before: Opens above trigger, aligned to start
  • Above After: Opens above trigger, aligned to end

Selection Mode

Configure selection behavior using the selectionMode Input:

  • None (default): Action menu with click handlers
  • Single: Radio button selection
  • Multiple: Checkbox selection

Selection state is managed through form controls.

Nested Menus

Support for hierarchical menus through:

  • Parent/child relationships
  • Automatic back navigation
  • Nested state management
  • Smooth transitions

List Items

Menu items support rich content:

  • Title and description
  • Start/end slots for icons/avatars
  • Helper messages
  • Disabled states
  • Selection controls

Comprehensive navigation support:

  • Keyboard arrow navigation
  • Back button for nested menus
  • Close button on mobile
  • Focus management
  • RTL support

Negative Theme

Enable dark theme support using the negative Input. Affects:

  • Background colors
  • Text colors
  • Border colors
  • Icons and controls

Accessibility

Keyboard Navigation

The component implements comprehensive keyboard support:

  • Arrow keys for item navigation
  • Enter/Space for selection/action
  • Escape to close menu
  • Left arrow for back navigation
  • Right arrow to open submenus
  • Tab for interactive elements

ARIA Implementation

Proper ARIA attributes for menu structure:

  • Menu and menuitem roles
  • Expanded/collapsed states
  • Selected states
  • Disabled states
  • Hierarchical relationships

Focus Management

Careful attention to focus handling:

  • Focus trap within open menu
  • Focus restoration on close
  • Proper focus indicators
  • Logical tab order
  • Nested menu focus management

Best Practices for Developers

  1. Menu Triggers DEMO HERE

  2. Selection Implementation DEMO HERE

  3. Nested Navigation DEMO HERE

Previous
List Tree
Next
Modal Dialog