NeatHub — Light & Dark Sidebar Navigation HTML Component

NeatHub — Light & Dark Sidebar Navigation HTML Component

A responsive HTML sidebar component showcase with separate light and dark examples, collapsible panels, nested navigation, badges, active states, and inline SVG icons.

Full Description:

NeatHub is a one-page sidebar-navigation component showcase built with plain HTML, CSS, and vanilla JavaScript. It presents matching light and dark examples side by side, each with a compact icon rail, expandable menu panel, search-field treatment, nested Content Lab menu, editable badge counts, profile summary, and tooltip example.

The displayed creator-tool theme, brand, labels, counts, profile details, and destinations are sample content. Replace the branding, menu structure, icons, colors, and profile information to adapt the component for other industries, websites, applications, client projects, or internal interfaces.

Key Features

• Separate light and dark sidebar examples
• Compact `70px` icon rail
• Expandable and collapsible menu panel
• Nested submenu with three sample child links
• Independent active states for rail and menu links
• Editable badge counts
• Styled search input with focus treatment
• Hover tooltip example for the Launch Planner icon
• Bottom profile summary card
• Inline SVG navigation icons
• Responsive side-by-side and stacked showcase layouts
• Plain HTML, CSS, and vanilla JavaScript

Included Component and Files

• `index.html` — light and dark sidebar examples, labels, badges, icons, and profile content
• `assets/css/styles.css` — theme tokens, rail and panel styling, transitions, and responsive rules
• `assets/js/script.js` — collapse, submenu, and active-state behavior
• `README.md` — setup, integration, and customization guide
• `LICENSE.txt` — controlling license terms

Best For / Use Cases

• SaaS and application dashboards
• Admin and content-management interfaces
• Creator, marketing, and workspace tools
• Internal web applications
• Sidebar prototypes and component studies
• Re-themed navigation for other industries and client projects

Technical Details

• HTML5, CSS3, and vanilla JavaScript
• No framework, package installation, or build step
• No external JavaScript dependency or icon library
• Inter loaded from Google Fonts
• Inline SVG icons
• Two examples on one page; the showcase stacks below `980px` and tightens below `560px`

Customization

Edit the brand, URL text, navigation labels, badge values, initials, name, profile details, and icon SVG markup in `index.html`. Change the primary accent, panel colors, rail colors, dimensions, transitions, and responsive behavior through CSS custom properties and component rules in `assets/css/styles.css`. JavaScript behavior is separated into collapse, submenu, and active-state handlers. If both theme examples remain, mirror content changes in both repeated markup blocks.

Important Notes / Limitations

• This package contains one component showcase page, not a complete dashboard or application.
• Light and dark examples are separate markup; a runtime theme switcher is not included.
• Panel collapse, submenu visibility, and visual active states work locally but are not persisted.
• Search is a demo-only styled field and does not filter navigation.
• Rail, menu, submenu, and profile links use `#` placeholders and do not route to application screens.
• Badge values and profile details are static.
• No routing, authentication, account management, search service, database, API, or backend is included.

Third-Party Assets / Internet Requirements

Inter loads from Google Fonts and requires an internet connection unless it is replaced or self-hosted. Navigation icons are included as inline SVG markup, with no external icon library or JavaScript framework. Third-party resources remain subject to their own terms.

License Summary

The root `LICENSE.txt` governs use and is controlling if this summary differs. In summary, one validly acquired license covers creation of one customized End Product for the licensee or one client, subject to the permissions and restrictions in that file. Redistribution of the component source or use in a competing downloadable component, template, or source-file collection is restricted.

Publisher

Tech & ALL

https://www.techandall.com

sidebar navigation, dashboard sidebar, admin navigation, light sidebar, dark sidebar, HTML component, collapsible menu, nested navigation, SaaS UI, inline SVG icons, vanilla JavaScript, responsive sidebar, web app navigation