Sidebar Variants Block
Standard Left Navigation Menu
Fixed-width primary navigation sidebar featuring brand logo header, quick search, grouped section navigation, and user profile footer.
When to Use & Guidelines
- Primary navigation for SaaS dashboards, admin back-offices, and multi-view applications.
- Maintains consistent section grouping via
<SidebarSection>wrappers. - Ensures high accessibility compliance with roving focus state and clear active indicators.
Collapsible Left Menu (Icon Rail Mode)
Interactive sidebar with trigger button that smoothly collapses between full 240px width and compact 64px icon-rail mode with automatic hover tooltips.
When to Use & Guidelines
- Use when users need maximum horizontal canvas space for complex tables, code editors, or canvas views.
- In icon-rail mode, labels are automatically hidden and rendered inside accessible
<Tooltip>popovers on hover.
Right Option Inspector / Context Panel
Right-docked inspector sidebar panel (side="right") for object parameters, live document settings, and activity history.
When to Use & Guidelines
- Ideal for secondary property panels, document inspectors, live code previewers, and configurator panels.
- Integrates seamlessly with
side="right"prop to dock on the right edge.
Dual Resizable Left + Right Sidebars
Complex application shell with drag-resizable left navigation sidebar and resizable right option panel flanking a central workspace canvas. Drag edge lines to resize interactively.
When to Use & Guidelines
- Recommended for professional design applications, IDEs, code workbenches, and data-heavy analytics tools.
- Pass
resizable minWidth={180} maxWidth={360}to enable fluid drag-resizing with double-click reset capability.
Floating / Inset Sidebar Panel
Modern elevated floating sidebar (variant="floating") detached from viewport edges with rounded corners and panel shadow.
When to Use & Guidelines
- Use
variant="floating"for modern landing page dashboards, floating toolbar panels, or detached navigation rails.