HTML / CSS / JS component

Add a polished collapsible sidebar to your next dashboard or admin interface.

NeatHub provides matching light and dark sidebar examples with a compact icon rail, expandable menu panel, nested navigation, badges, active states, a tooltip, search styling, and a profile card. The sample labels and creator-tool theme are only a demonstration: replace the branding, navigation, icons, colors, and profile content to use the component in virtually any website, application, client project, or internal interface. The component is built with labeled HTML, CSS, and vanilla JavaScript—no framework or build tools required. Search and menu destinations are presentation-only.

DOWNLOAD NOW Watch video

Load clip · close both, open dark, nest, then Launch Planner tooltip

Highlights

A focused navigation component with the essential interaction states included.

The showcase places matching light and dark versions side by side so you can compare themes, test behavior, and adapt the repeated rail-and-panel structure to your interface.

Matching light and dark themes

Both versions ship on one page and use theme tokens around the same structure. A runtime theme toggle is not included.

Space-saving icon rail

A 70px rail keeps primary destinations, collapse control, active state, hover feedback, and avatar access visible when the panel is closed.

Collapsible menu panel

Close the full menu with the rail chevron or panel X, then restore it from the compact rail without leaving the page.

Working nested navigation

The Content Lab example expands and collapses three child links, demonstrating submenu behavior and editable HTML badge counts.

Search-field treatment

A styled input and visible focus state are ready for your own filtering logic. The included component does not perform a search.

Rail tooltip example

Hover the calendar destination to reveal its Launch Planner label; the remaining icons retain accessible names through aria-label.

Profile summary card

Name, email, and initials anchor the bottom of the menu panel. The included card is a placeholder link without a profile page.

Independent active states

Clicking a rail icon or menu link updates its own list, making both navigation layers easy to demonstrate and extend.

Clearly labeled source

Section markers identify the rail, panel, themes, and behaviors. Edit labels and badges in HTML, then rebrand with CSS tokens.

Narrow screens

Both themes remain usable in the narrow showcase layout.

Below 980px, the light and dark examples stack vertically. Below 560px, each menu panel uses the width remaining beside its icon rail to prevent horizontal overflow.

NeatHub light sidebar stacked on a phone — Light theme · stacked showcase

Light and dark examples stack instead of sitting side by side
Each sidebar keeps the icon rail and the menu panel on one row
Collapse, submenu, and active states still work on a phone

Labeled for edit

Move quickly from the demo to your own navigation labels and styles.

Numbered section banners map the HTML, CSS, and JavaScript so you can jump directly to the rails, panels, themes, responsive rules, and interactions.

index.html Names each block: light sidebar, dark sidebar, rail, brand, search, nest, profile.
styles.css Numbered map from theme tokens to the phone breakpoints.
script.js Explains collapse, the Content Lab nest, and active states.

Code editor showing labeled NeatHub HTML, CSS, and JavaScript sections — Comments in the files point to what to edit. This is a stylized editor view of those labels.

Screenshots

Inspect every important state before using the component.

Detailed screenshots cover the full showcase, both themes, collapsed rails, nested menu, tooltip, focused search field, and profile card.

NeatHub light and dark sidebars side by side — Light and dark showcase

NeatHub light sidebar with icon rail and menu panel — Light sidebar

NeatHub dark sidebar with icon rail and menu panel — Dark sidebar

NeatHub light and dark sidebars collapsed to icon rails — Collapsed rails

Content Lab nested menu with badge counts — Content Lab nest

Launch Planner tooltip beside the calendar rail icon — Tooltip

Search field focused in the light menu panel — Search

Profile

Watch it in action

Watch the navigation states change in real time.

Preview both themes, panel collapse, nested navigation, tooltip, and narrow-screen stacking before opening the source.

A short walkthrough of the light and dark rails, collapse, and submenu.

What you get

All source files needed for the component.

Customize names and badges in HTML, theme tokens and responsive rules in CSS, and collapse, submenu, and active-state behavior in JavaScript. Search logic, routing, and a profile page are not included.

index.html Light and dark sidebars, labels, and badges
assets/css/styles.css Theme tokens, rail, panel, and phone rules
assets/js/script.js Collapse, submenu, and active states
README.md Setup and customization notes
LICENSE.txt Template license terms

Get the component

Start with the navigation behavior and both themes already built.

Adapt the HTML, CSS, and vanilla JavaScript sidebar to your dashboard, admin panel, workspace, or internal-tool interface.

Instant download after successful payment

Buy now — $10 By purchasing this product, you agree to the Terms and License.

Pay securely with PayPal VISA AMEX