Sidebar Menu

A sidebar menu is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable items.

Overview

API

Usage


  <wc-sidebar-menu id="sidebar-menu" style="width: 300px;" selected-item="Blockchain">
    <wc-sidebar-menu-item label="Artificial intelligence"></wc-sidebar-menu-item>
    <wc-sidebar-menu-item label="Blockchain"></wc-sidebar-menu-item>
    <wc-sidebar-sub-menu label="Cloud computing" expanded="true">
      <wc-sidebar-menu-item label="Containers"></wc-sidebar-menu-item>
      <wc-sidebar-menu-item label="Databases"></wc-sidebar-menu-item>
    </wc-sidebar-sub-menu>
  </wc-sidebar-menu>

Events


      const sidebarMenu = document.querySelector('#sidebar-menu');
      sidebarMenu.addEventListener('sidebar-menu:change', function(evt) {
      myConsole.log(JSON.stringify(evt.detail.value, null, 4), 'sidebar-menu:change');
      });

Sidebar Menu

Usage

Events

Properties

Events

Methods

CSS Custom Properties