Sidebar
StructureA vertical panel positioned along the left or right edge of the main content area, containing navigation, filters, or supplementary information.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Sidebar coming soon.
How It Works in Apps/Websites
Sidebars provide persistent access to navigation or contextual tools without leaving the current page. Left sidebars typically contain primary navigation (dashboards, admin panels), while right sidebars often hold contextual info, filters, or widgets. Sidebars can be fixed (always visible), collapsible (icon-only mode), or responsive (becomes a drawer on mobile).
How AI Interprets This Term
When you say 'sidebar', AI expects: a vertical panel 240-300px wide, positioned on the left or right of main content, usually with a contrasting background, containing navigation links with icons, possibly with section headers. On collapse, it becomes 60-80px showing only icons.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a left sidebar with navigation links and icons
Design a collapsible sidebar with: logo at top, navigation sections (Dashboard, Analytics, Settings) with icons, user profile at bottom. Expanded width 260px, collapsed width 64px. Dark theme with #1e1e1e background.
Show a sidebar in expanded state with full text labels vs collapsed state with only icons and tooltips on hover
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Dashboards and admin interfaces
- •Apps with deep navigation hierarchy
- •Documentation sites
- •E-commerce filter panels
When NOT to Use
- •Simple marketing websites
- •Mobile-first designs
- •Content-heavy reading experiences
Related Terms
Dashboard
An at-a-glance view that displays key metrics, charts, and summaries, giving users a quick overview of important data and system status.
Drawer
A panel that slides in from the edge of the screen (usually left or right) to reveal navigation, filters, or additional content without navigating away from the current view.
Navbar
A horizontal navigation bar typically placed at the top of a page, containing the logo, main navigation links, and often search or user account controls.