QdsSidebarMenu Component Test
A vertical navigation component for explicit tree data with optional icons, collapsible width, and an always-expanded sectioned mode.
Default Sidebar Menu
This example demonstrates the default interactive behavior, including collapsible width, optional icons, and always-expanded mode switching.
Main Content
This content area represents application chrome next to a persistent sidebar navigation surface.
Use the controls below to toggle the main display modes and observe how the component keeps the layout stable.
Custom Data Structure
The component reads explicit parent-child relationships from the items array. The JSON below is the source for the sample menus on this page.
Hierarchical Structure
Parent entries contain child items in their items array, which lets the sidebar render nested sections without needing implicit grouping logic.
Sectioned Always Expanded Styling
This example uses always-expanded with host-level CSS custom properties to approximate the dense sectioned navigation reference while keeping the page theme under the shared docs shell.
Level-Based Configuration
Top-level groups act like compact section headers, while nested items keep a more standard navigation rhythm and a distinct active state.
Use variables such as --sidebar-level-0-text-transform, --sidebar-item-active-bg-color, and --sidebar-border-color to adapt the variant.
Initially Collapsed
This variant starts in collapsed mode so the content column has more room while still preserving hover-expand behavior on pointer devices.
Maximized Content Area
Collapsed mode reduces the sidebar footprint for dense work surfaces. The component still exposes the same navigation tree when expanded or hovered.