QdsSidebarMenu Component Test

All Components Menu Components Demo
Menu Components: Hierarchical Menu Horizontal Menu Sidebar Menu

The sidebar menu component now uses an explicit hierarchical data structure with parent-child relationships. Each menu item can have an items array containing its child items.

Default Sidebar Menu

Main Content

This area represents your main application content.

The sidebar menu provides a persistent navigation structure that can be collapsed when needed.

Interactions will appear here...

The sidebar menu displays a vertical navigation structure with collapsible categories. Use the buttons above to toggle the sidebar state and icon visibility.

Custom Data Structure


      

        

          
        

        

          
Hierarchical Structure

          
This example shows the sidebar with custom hierarchical data.

          
Parent items contain child items in their items array.

        

      

      

        This example demonstrates how to structure hierarchical data using the items property to define parent-child relationships.
      

    

    
    

      
Initially Collapsed

      

        

          
        

        

          
Maximized Content Area

          
With the sidebar collapsed, the content area has more space.

          
Users can hover over the collapsed sidebar to see menu items.

        

      

      

        This sidebar starts in collapsed state, showing only icons (when enabled) or a minimal width bar.
        Hover over the collapsed sidebar to see full menu items.