arca-ui

Sidebar

A comprehensive sidebar navigation component with hard edges and bold borders. These examples are contained simulations to demonstrate various sidebar patterns.

Basic Sidebar

Standard sidebar with navigation groups, project list, and user profile.

HS

Hard-Edge Stack

workspace

Navigation

Projects

JD

John Doe

john@example.com

Dashboard

Content for Dashboard would appear here. Click menu items to navigate.

Collapsible to Icon Mode

Sidebar that collapses to icon-only mode for more content space.

HS
Hard-Edge
Profile

Dashboard

Click the << button in the sidebar footer or the menu icon to toggle collapse mode.

Nested Navigation

Documentation-style sidebar with expandable sections and sub-items.

HS

Documentation

v2.0.0

Need help?

Nested Navigation

Click on section headers to expand/collapse nested navigation items.

Mobile Sidebar

Slide-out sidebar pattern for mobile devices with overlay.

HS
Hard-Edge
JD

John Doe

@johndoe

Mobile Navigation

Click the menu button to open the mobile sidebar. Tap outside or the X button to close.

Floating Sidebar

Detached sidebar with card-like appearance and independent shadow.

HS
Floating Style

Floating Sidebar

This style features a detached sidebar with its own shadow, creating a floating card effect. Useful for dashboard layouts.