Data Pulse Sidebar
AI Pass+sidebar#navigation#collapsible
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Sidebar component
About Data Pulse Sidebar
A collapsible product navigation sidebar with an expandable icon rail, tooltips, active-link tracking, integration logos, and a profile dropdown menu — fully token-driven and design-system agnostic.
Features
- Collapsible rail that toggles between icon-only and expanded states
- Hover tooltips on nav items when collapsed
- Active-link tracking that follows the last-clicked item
- Injected brand and integration logos from
data-srcattributes - Profile dropdown menu with an accessible
role="menu"pattern - Search focus auto-expands the collapsed rail
- Escape and outside-click dismissal for the profile menu
Accessibility
- ARIA labels
- Interactive controls have
aria-labelor accessible names - Profile menu
aria-haspopup="menu",aria-expanded,role="menu"- Keyboard nav
Escapecloses the profile menu and returns focus- Focus management
- Focus returns to the trigger after dismissal
- Outside click
- Clicking outside dismisses the open menu
Customise it with AI
Open Data Pulse Sidebar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the sidebar is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Storeify Sidebar
VanillaReact
A collapsible Storeify admin sidebar with search, two nav sections, a used-capacity ring card, gradient upgrade CTA, and user profile. Collapses to a 5rem icon rail with tooltips. Design-system agnostic via tokens.
#sidebar#navigation#collapsible
Astra Sidebar
VanillaReact
A night-slate admin sidebar with the Astra mark, a straddling round collapse button, live-filtered search with a ⌘K shortcut, a gliding active row, a pinned Settings group and a profile with logout. Collapses to an icon rail with tooltips.
#sidebar#navigation#collapsible
Sidebar
ReactVanilla
A collapsible sidebar navigation with search, nav links, integrations section, user profile, and dark/light theme toggle. Collapses to icon-only view with tooltips.
#sidebar#navigation#collapsible
Car Admin Sidebar
ReactVanilla
A luxury automotive collapsible sidebar navigation with workspace switching, route color markers, company dropdown, profile dropdown, and dark/light theme toggle. Starts collapsed with icon-only view and tooltips.
#sidebar#navigation#collapsible
Pricing Cards
VanillaReact
A three-tier Atheros AI Builder pricing showcase with a highlighted "Most Popular" plan, monthly AI-credit badges, gradient gem icons, and a dark/light theme toggle — fully token-driven and design-system agnostic.
#pricing#cards
Training Status Popover
VanillaReact
A premium model training-status popover: a gradient progress ring with live percentage count-up, a running status badge with pulsing dot, an epoch segment strip with ETA, live loss/accuracy/step metric tiles and pause / view-logs actions, revealed from a trigger with staggered entrance.
#popover#progress#ai
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
