QDS Menu Components Demo

Menu Components Overview

This demo showcases three different menu components that share a common base class:

QdsHierarchicalMenu - Dropdown menu triggered by an icon
QdsHorizontalMenu - Horizontal navigation with dropdowns
QdsSidebarMenu - Vertical sidebar navigation

All three components share the same data model and core functionality through the QdsBaseMenu class, but offer different presentation styles and interaction patterns.

Hierarchical Menu (Dropdown)

The classic dropdown menu that appears when clicked. Good for applications where screen real estate is valuable.

Show icons in hierarchical menu

Horizontal Menu

A horizontal navigation bar with dropdowns. Ideal for main navigation in web applications.

Show icons in horizontal menu

Sidebar Menu

A vertical sidebar menu is visible on the left side of this demo. It can be collapsed to save space and expanded when needed.

Common API

All menu components share these common attributes:

data - JSON string containing menu items
hierarchy - JSON string defining how to organize items
icon-root - Base URL for relative icon paths
use-icons - Whether to display icons (defaults to false)

And these common properties:

useIcons - Get/set whether icons are displayed