← Back to Components

Hierarchical Menu Web Component

A customizable, expandable hierarchical menu that organizes items into a nested tree structure based on specified attributes.

Features

• Dynamically organizes menu items into a hierarchical structure
• Supports multiple levels of nesting
• Collapsible/expandable nodes
• Icon support with customizable base URL
• Customizable menu toggle icon color
• Handles both relative and absolute icon paths
• Shows item descriptions as tooltips on hover

Installation

Include the component in your project:

<script src="https://cdn.q360.ai/assets/components/hierarchical-menu/qds-hierarchical-menu.js" type="module"></script>

Or import it in your JavaScript:

import "https://cdn.q360.ai/assets/components/hierarchical-menu/qds-hierarchical-menu.js";

You can also load all components at once:

<script src="https://cdn.q360.ai/assets/components/index.js" type="module"></script>

Usage

<hierarchical-menu 
  data='[{"name":"Item1","linkUrl":"https://example.com","businessFunction":"Group1"}]'
  hierarchy='["businessFunction"]'
  icon-root="https://cdn.example.com/"
  icon-color="blue">
</hierarchical-menu>

Basic Example

const menuItems = [
  { 
    name: "QUILT", 
    description: "An app", 
    linkUrl: "https://quilt.example.com", 
    businessFunction: "Group1", 
    icon: "icons/quilt-icon.svg" 
  },
  { 
    name: "Dashboard", 
    description: "Dashboard App", 
    linkUrl: "https://dashboard.example.com", 
    businessFunction: "Group1", 
    icon: "https://cdn.example.com/icons/dashboard.svg" 
  },
  { 
    name: "Reports", 
    description: "Reports App", 
    linkUrl: "https://reports.example.com", 
    businessFunction: "Group2", 
    icon: "icons/reports.svg" 
  }
];

const hierarchy = ["businessFunction"];

const menuElement = document.querySelector("hierarchical-menu");
menuElement.setAttribute("data", JSON.stringify(menuItems));
menuElement.setAttribute("hierarchy", JSON.stringify(hierarchy));

Attributes

Attribute	Type	Description	Default
data	String	JSON string containing menu items array	[]
hierarchy	String	JSON string containing attributes to group items by	[]
icon-root	String	Base URL for relative icon paths	https://cdn.q360.ai/
icon-color	String	Color for the menu toggle icon	black

Data Format

The menu items should be an array of objects with at least the following properties:

Property	Type	Description	Required
name	String	Display name of the item	Yes
linkUrl	String	URL to navigate to when clicked	Yes
description	String	Description shown as tooltip when hovering	No
icon	String	Path to icon image (can be relative or absolute)	No
Hierarchy fields	String	Any fields used for hierarchical grouping	Yes

Hierarchical Grouping

The hierarchy attribute defines the order and properties used to group items. For example:

// Group by businessFunction, then by category
const hierarchy = ["businessFunction", "category"];

This will create a two-level hierarchy where items are first grouped by their businessFunction value, and then within each group, further grouped by their category value.

Styling

The component uses Shadow DOM for encapsulation. Basic styling is included, but you can customize the appearance by wrapping the component and styling its container.

Browser Support

This component uses standard Web Component APIs and works in all modern browsers that support Custom Elements v1.

License

[License information here]