Offcanvas V10

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A dark icon rail for an analytics dashboard that expands into a full sidebar with labels, a badge and the signed-in user. When collapsed, each icon shows its label as a tooltip on hover and keyboard focus, and the label stays available to screen readers. The chosen state is saved in localStorage, guarded with try/catch, and on phones the expanded sidebar floats over the page instead of squeezing it.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 156 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Expanded or collapsed state remembered in localStorage with a safe fallback
• Tooltips on hover and focus in rail mode, labels always in the accessibility tree
• Content reflows on desktop; overlay with scrim on phones
• Esc collapses and returns focus to the toggle
• Width and label transitions switch off for reduced motion