← Back to Components

QdsSidebarMenu Web Component

A vertical sidebar navigation menu component that displays hierarchical items in a collapsible panel.

Features

• Persistent vertical navigation for web applications
• Expandable/collapsible categories for organizing content
• Collapsible sidebar to save screen space
• Built on the QdsBaseMenu base class for consistent data handling
• Support for both light and dark themes
• Optional icon display
• Keyboard navigation support
• Accessibility features for screen readers
• Customizable through CSS parts

Installation

Include the component in your project:

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

Or import it in your JavaScript:

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

You can also load all components at once:

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

Usage

<div style="height: 600px;"> <!-- Container with defined height -->
  <qds-sidebar-menu
    data='[{"name":"Dashboard","linkUrl":"#dashboard"},{"name":"Reports","linkUrl":"#reports"}]'
    hierarchy='["businessFunction"]'
    icon-root="https://cdn.q360.ai/">
  </qds-sidebar-menu>
</div>

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
collapsed	Boolean	Whether the sidebar is in collapsed state	false

Properties

Property	Type	Description
useIcons	Boolean	Get/set whether icons are displayed in menu items
collapsed	Boolean	Get/set whether the sidebar is collapsed

Events

Event Name	Detail	Description
itemSelected	{ url: String, text: String }	Fired when a menu item is selected
toggleCollapse	{ collapsed: Boolean }	Fired when sidebar is expanded/collapsed

CSS Parts

Part	Description
sidebar	The sidebar container
item	Menu items (both links and categories)
toggle	Collapse/expand toggle button

Examples

Basic Example

<div style="height: 100vh;">
  <qds-sidebar-menu id="appSidebar"></qds-sidebar-menu>
</div>

<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 sidebar = document.getElementById('appSidebar');
  sidebar.setAttribute('data', JSON.stringify(menuItems));
  sidebar.setAttribute('hierarchy', JSON.stringify(["businessFunction"]));
  sidebar.useIcons = true; // Enable icons
</script>

With Toggle Button

<div style="height: 100vh; display: flex;">
  <qds-sidebar-menu id="sidebar"></qds-sidebar-menu>
  <div style="flex: 1; padding: 20px;">
    <button id="toggleButton">Toggle Sidebar</button>
    <div id="content">Main content here...</div>
  </div>
</div>

<script>
  const sidebar = document.getElementById('sidebar');
  const toggleButton = document.getElementById('toggleButton');
  
  // Set menu data
  sidebar.setAttribute('data', JSON.stringify(menuItems));
  
  // Toggle sidebar with external button
  toggleButton.addEventListener('click', () => {
    sidebar.collapsed = !sidebar.collapsed;
  });
  
  // Listen for sidebar collapse events
  sidebar.addEventListener('toggleCollapse', (event) => {
    const { collapsed } = event.detail;
    console.log(`Sidebar is now ${collapsed ? 'collapsed' : 'expanded'}`);
  });
</script>

Styling

You can customize the appearance using CSS:

qds-sidebar-menu {
  --sidebar-bg-color: #f8f9fa;
  --sidebar-text-color: #333;
  --sidebar-hover-bg-color: #e9ecef;
  --sidebar-active-bg-color: #e1f2ff;
  --sidebar-border-color: #e4e6e8;
  font-family: Arial, sans-serif;
}

/* Style specific parts */
qds-sidebar-menu::part(sidebar) {
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

qds-sidebar-menu::part(item) {
  border-radius: 4px;
  margin: 2px 8px;
}

qds-sidebar-menu::part(toggle) {
  background-color: #0078d4;
  color: white;
}

Accessibility

The sidebar menu provides the following accessibility features:

• ARIA attributes for menu items and expandable sections
• Keyboard navigation support
• Clear focus indicators
• Screen reader announcements for expanded/collapsed states

Browser Support

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