← Back to Components

QdsHorizontalMenu Web Component

A horizontal navigation menu component that displays top-level items in a row and reveals child items in dropdowns on hover.

Features

• Displays top-level navigation items in a horizontal bar
• Shows child items in dropdown menus on hover
• Responsive design that adapts to different screen sizes
• Built on the QdsBaseMenu base class for consistent data handling
• Support for both light and dark themes
• Optional icon display
• Keyboard navigation support
• Customizable through CSS parts

Installation

Include the component in your project:

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

Or import it in your JavaScript:

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

You can also load all components at once:

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

Usage

<qds-horizontal-menu
  data='[{"name":"Dashboard","linkUrl":"#dashboard"},{"name":"Reports","linkUrl":"#reports"}]'
  hierarchy='["businessFunction"]'
  icon-root="https://cdn.q360.ai/">
</qds-horizontal-menu>

Attributes

Attribute	Type	Description	Default
data	String	JSON string containing menu items array	[]
hierarchy	String	JSON string containing attributes to group items by	[“businessFunction”]
icon-root	String	Base URL for relative icon paths	“https://cdn.q360.ai/“
use-icons	Boolean	Whether to display icons next to menu items	false

Properties

Property	Type	Description
useIcons	Boolean	Get/set whether icons are displayed in menu items

Events

Event Name	Detail	Description
itemSelected	{ url: String, text: String }	Fired when a menu item is selected

CSS Parts

Part	Description
nav-container	The main container for navigation
top-level-item	The top level menu items
dropdown	The dropdown container for submenu items

Examples

Basic Example

<qds-horizontal-menu id="mainNavigation"></qds-horizontal-menu>

<script>
  const menuItems = [
    { name: "Dashboard", linkUrl: "/dashboard", icon: "dashboard.svg" },
    { name: "Finance", businessFunction: "Finance", linkUrl: "#" },
    { name: "HR", businessFunction: "Human Resources", linkUrl: "#" },
    { name: "Help", linkUrl: "/help", icon: "help.svg" }
  ];
  
  const mainNav = document.getElementById('mainNavigation');
  mainNav.setAttribute('data', JSON.stringify(menuItems));
  mainNav.setAttribute('hierarchy', JSON.stringify(["businessFunction"]));
  mainNav.useIcons = true; // Enable icons
</script>

With Event Handling

<qds-horizontal-menu id="navigation"></qds-horizontal-menu>

<script>
  const navigation = document.getElementById('navigation');
  
  // Set menu data
  navigation.setAttribute('data', JSON.stringify(menuItems));
  
  // Listen for item selection
  navigation.addEventListener('itemSelected', (event) => {
    const { url, text } = event.detail;
    console.log(`Selected "${text}" with URL: ${url}`);
  });
</script>

Styling

You can customize the appearance using CSS:

qds-horizontal-menu {
  --menu-bg-color: #f8f9fa;
  --menu-text-color: #333;
  --menu-hover-bg-color: #e9ecef;
  --menu-dropdown-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
}

/* Style specific parts */
qds-horizontal-menu::part(top-level-item) {
  text-transform: uppercase;
  font-weight: bold;
}

qds-horizontal-menu::part(dropdown) {
  border-radius: 8px;
}

Browser Support

This component works in all modern browsers that support Custom Elements v1 and ES6 modules.