A professional, responsive sidebar for dashboards and internal tools. It supports a full “expanded” mode with icons + labels and a compact icon-only “rail” that saves space on larger screens. The active route is highlighted, sections are grouped with dividers, and a floating chevron lets users dock/undock the sidebar with smooth animation. Built with accessibility in mind (ARIA roles, keyboard focus ring, readable labels) and ready for theming, badges, and user profile blocks. Works flawlessly with breadcrumbs/top bar layouts and preserves state across page changes.

Functionality

• Expand/Collapse with smooth transitions; mini-rail (icon-only) mode with tooltips.

• Route-aware highlighting (active/hover/pressed) and optional notification badges.

• Section headers, dividers, and nested items (one or multiple levels).

• User panel/footer slot (avatar, name, status, quick actions).

• Responsive breakpoints: auto-collapse on small screens; persistent/temporary modes.

• Keyboard navigation (← → ↑ ↓, Enter, Esc) and screen-reader labels (ARIA).

• Configurable width, rail size, item height, paddings, and icon set.

• Optional overlay scrim and swipe/drag gesture to open on mobile.

• Theming: light/dark, brand colors, elevation, rounded corners, shadows.

• State persistence (remember last open section) and RTL support.

Use cases

• Admin dashboards and analytics consoles.

• Project management, CRM/ERP, and CMS back-office tools.

• SaaS web apps with many sections and deep navigation.

• Tablet/desktop hybrids that need a compact navigation rail.

• Multi-tenant apps that show user/account controls in the sidebar.

• Documentation portals or internal knowledge bases with grouped menus.

Keywords Sidebar, Navigation Drawer, Collapsible Menu, Mini Rail, Responsive Navigation, Route Highlighting, Nested Menu, Admin Dashboard, ARIA Accessible, Keyboard Navigation, Tooltips, Badges, User Profile Block, Theming, RTL, Flutter/FlutterFlow, Web App UI, Persistent Drawer, Temporary Drawer, Animated Sidebar.