Clicking the HR Core or Analytics header toggles a max-height transition on its .dsb-group-body. The chevron rotates 90° and the header turns the primary colour. Multiple groups can be open at once — only one is open by default here.
2 — Exclusive Accordion Sidebar
Single-Open Dropdown
Opening one group automatically closes the others — keeps the sidebar compact
Try opening Finance or Performance — the previously open People group automatically collapses. Each group shares a data-excl scope, so only one stays expanded at a time. A badge counter (128) shows live record counts.
3 — Nested 2-Level Dropdown
Multi-Level Submenu
A child item can itself expand into a third tier of links
Inside the Reports dropdown, HR Reports and Finance Reports are themselves expandable folders. Each nested level adds further indentation and a smaller font size, with its own chevron and connector line for clear visual hierarchy.
4 — Flyout Dropdown (Collapsed Rail)
Icon-Only Rail with Flyout Menu
Click an icon to pop out its submenu to the right — used when sidebar is collapsed
HR Core
Analytics
Settings
Click any icon to toggle its flyout. Only one flyout stays open at a time — clicking elsewhere on the page closes it.
5 — Dropdown with Notification Badges
Counters on Group Headers
Parent shows the sum of its children's pending counts
All Modules expands into a 2-column grid grouped by sub-heading (HR, Insights, Admin) instead of a single vertical stack — useful when a category has 8+ links and a single column would make the sidebar too tall.