EVO React Components

Evo Sidebar

Block: Evo Sidebar navigation component.

Owner: [email protected]
Evo Sidebar
To be defined - Evo Sidebar is a navigation sidebar component leveraging Radix UI's Sidebar primitives, designed for creating advanced layouts.
Static Sidebar (No Collapse / No Trigger)
A permanently expanded sidebar rendered with collapsible="none" and no trigger button. Useful for layouts where navigation is always visible and screen width permits.

Layout Notes

  • No collapse interaction; width is constant.
  • Great for wide dashboards or admin portals.
  • Remove trigger to simplify UI.
Docked Sidebar
Explicit docked variant with icon collapse. Uses variant="docked".

Notes

  • Shows explicit variant prop.
  • Same layout behavior as default (docked is default) but documented for clarity.
  • Use with variant="floating" to switch styles.
Evo Sidebar
An example mirroring the advanced sidebar pattern grouped navigation, collapsing to icon mode, & footer user info.

Content

Default example using grouped navigation, icon collapse mode and footer user section.

Evo Smart Sidebar
A smarter variant that includes a quick search and visual grouping for faster navigation in large apps.

Dashboard

Smart - advanced Sidebar showing and overview of your workspace performance

Team Members
42
Upcoming Events
7
Config Tasks
3
Projects
Recently updated projects
NameUpdated
Customer Portal Revamp
2h ago
Mobile App v2
5h ago
Marketing Site
1d ago
Internal Tools
1d ago
Team Capacity
Current allocation across active work
Frontend72%
Backend64%
Design48%
QA38%
Sidebar Collapsible Section
Focused example showing only a collapsible group and how the trigger + text behave in icon (collapsed) mode.

Notes

  • Trigger keeps icon visible when collapsed (hideOnCollapse=false).
  • Text spans hide with group-data selectors in icon mode.
  • Sub-items fully hidden in icon mode to reduce clutter.
Sidebar Item with Inline Menu
Demonstrates a menu trigger button revealed inline on each item for quick actions.

Usage

Each item renders an inline dropdown trigger (hidden in icon mode). Use this for quick contextual actions without navigating away.

  • Trigger hidden when sidebar collapsed to icon width.
  • Leverages existing SidebarMenuButton styling; no duplicate styles.
  • Menu items array controls dropdown content.
Teams Channel
Getting Started