A premium, framework-free navigation experience built with modern HTML, CSS & JavaScript.
Glassmorphism · Real-Time Search · Notifications · Responsive Navigation · Accessibility · Performance
Features · Preview · Quick Start · Customization · Browser Support
Nexus UI is a modern, production-ready navigation system designed to demonstrate how far you can push a vanilla HTML, CSS, and JavaScript interface without relying on frameworks, UI libraries, or a build pipeline.
It combines a premium glassmorphism visual language with practical application-style interactions such as global search, notification management, profile controls, theme persistence, responsive navigation, and keyboard-first workflows.
The project is intentionally dependency-free and drop-in ready — clone it, customize it, and integrate it into your own website.
Built with zero frameworks. Zero dependencies. Zero build steps.
- Modern frontend architecture without React/Vue/etc.
- Advanced CSS effects and animations
- Component-like UI organization using vanilla JavaScript
- Persistent client-side state with
localStorage - Accessible interaction patterns
- Responsive navigation systems
- Performance-conscious event handling
- Keyboard-first user experiences
💡 Tip: You can replace the image paths above with screenshots from your own deployment.
Nexus UI isn't just a static navbar. It behaves like a complete application navigation layer.
- Floating glassmorphism navigation bar
- Hide-on-scroll-down behavior
- Reveal-on-scroll-up interaction
- Active section detection
IntersectionObserverpowered navigation tracking- Animated scroll progress indicator
- Smooth anchor navigation
- Magnetic interaction effects
- Persistent light/dark theme
- Responsive desktop and mobile layouts
Press:
⌘ K
or:
Ctrl K
or simply:
/
to instantly open the global search interface.
- ⚡ Real-time filtering
- 🔎 Fuzzy-style matching
- ✨ Highlighted matching text
- ⌨️ Full keyboard navigation
- 🕘 Recent searches
- 📂 Categorized results
- 🏠 Pages
- 🚀 Quick links
- ⚙️ Actions
- Empty-state handling
- Persistent search history
↑ / ↓ Navigate results
Enter Select result
Esc Close search
This makes the search experience feel closer to a modern SaaS dashboard than a traditional website navbar.
Nexus UI includes a complete client-side notification system.
| Type | Purpose |
|---|---|
| 💬 Mention | User mentions and interactions |
| ✅ Success | Successful actions |
| Warnings and attention states | |
| 🚨 Alert | Important or critical events |
| ℹ️ Info | General information |
- All / Unread / Mentions filters
- Read/unread state
- Persistent notification state
- Live unread badge
- Relative timestamps
- Mark-all-as-read
- Notification type indicators
- Empty states
Example:
All Unread Mentions
● Sarah mentioned you
5 minutes ago
✓ Deployment completed
2 hours ago
⚠️ Storage usage is high
Yesterday
The profile system provides a compact account control center.
- Avatar
- Online status indicator
- Account information
- Usage statistics
- Plan progress
- Dashboard shortcut
- Settings shortcut
- Help shortcut
- Sign-out action
The component is designed to be easily adapted for SaaS dashboards, admin panels, developer tools, portfolios, and web applications.
The desktop navigation transforms into a dedicated full-screen mobile experience.
- Full-screen navigation
- Staggered entrance animations
- Numbered navigation items
- Large touch targets
- Social links
- Primary CTA
- Backdrop dismissal
- Responsive typography
- Touch-friendly interaction
No separate mobile framework is required.
The visual identity of Nexus UI is built around layered glass surfaces and atmospheric gradients.
backdrop-filter- Transparent surfaces
- Aurora gradients
- Soft borders
- Ambient glow
- Layered shadows
- Gradient accents
- Smooth transitions
- Dark/light themes
- Modern typography
The result is a UI that feels closer to a polished product interface than a traditional navigation bar.
Accessibility is treated as part of the component architecture rather than an afterthought.
Nexus UI is designed around keyboard-first interaction and modern accessibility practices.
- ✅ Skip-to-content navigation
- ✅ Keyboard-only operation
- ✅ Visible focus states
- ✅ Semantic HTML
- ✅ ARIA attributes
- ✅
aria-expanded - ✅
aria-haspopup - ✅ Dialog semantics
- ✅ Screen-reader-friendly labels
- ✅ Reduced-motion support
- ✅ Accessible interactive states
- ✅ Logical focus behavior
Users who enable reduced motion through their operating system are automatically respected through:
@media (prefers-reduced-motion: reduce) {
/* Reduced animation experience */
}Nexus UI is intentionally lightweight.
There are no frameworks, libraries, bundlers, or runtime dependencies.
- Minimal DOM work
- Event delegation
- Throttled scroll processing
IntersectionObserver- Debounced search
- Batched animation updates
- Passive event listeners
- Paused animation loops
- No unnecessary layout recalculation
- Limited
will-changeusage
The custom cursor uses requestAnimationFrame and automatically reduces unnecessary work when:
- The cursor is stationary
- The browser tab becomes hidden
- Movement falls below the animation threshold
Instead of attaching multiple independent scroll handlers, Nexus UI uses a centralized requestAnimationFrame-based approach.
Navigation state is calculated using IntersectionObserver rather than continuously checking element positions during scrolling.
Search filtering is debounced to prevent unnecessary work during rapid typing.
| Layer | Technology |
|---|---|
| Markup | Semantic HTML5 |
| Styling | Modern CSS3 |
| Logic | Vanilla JavaScript |
| JavaScript | ES2020+ |
| Fonts | Inter, Space Grotesk |
| Icons | Inline SVG |
| Storage | Browser localStorage |
| Build System | None |
| Dependencies | None |
| Framework | None |
Nexus UI makes use of modern browser capabilities such as:
backdrop-filter
color-mix()
custom properties
CSS gradients
CSS transitions
CSS animations
clamp()nexus-ui/
│
├── public/
│ ├── index.html
│ │
│ ├── Js/
│ │ └── script.js
│ │
│ ├── Style/
│ │ └── style.css
│ │
│ └── Src/
│ └── images/
│ ├── Preview Images Are Here!
│
└── README.md
The main HTML entry point containing the semantic structure of the Nexus UI interface, including:
- Navigation
- Search interface
- Notification center
- Profile menu
- Mobile navigation
- Main content
- Accessibility landmarks
Contains the complete visual system of the project:
- CSS custom properties
- Light/dark themes
- Glassmorphism effects
- Aurora gradients
- Responsive layouts
- Navigation animations
- Search interface styling
- Notification styling
- Profile menu
- Mobile navigation
- Accessibility states
- Reduced-motion support
Contains the application's client-side behavior:
- Navigation interactions
- Scroll behavior
- Active section tracking
- Global search
- Search history
- Notification management
- Profile menu
- Theme switching
- localStorage persistence
- Keyboard shortcuts
- Magnetic cursor
- Responsive menu interactions
Contains the visual assets used throughout the project and README documentation.
These images can also be used for:
- GitHub README previews
- Documentation
- Social previews
- Project showcases
- Portfolio presentations
Project documentation, setup instructions, feature documentation, customization guides, and technical information.
git clone https://github.com/ItsWanheda/nexus-ui.git
cd nexus-uiNo installation is required.
start public/index.htmlopen public/index.htmlxdg-open public/index.htmlYou can also simply drag index.html into your browser.
Although Nexus UI works directly from the filesystem, using a local server is recommended during development.
python -m http.server 8000npx serve .Then open:
[http://localhost:8000](http://localhost:8000/public/)
That's it.
No:
npm install
npm run build
npm run devrequired.
| Shortcut | Action |
|---|---|
⌘ K |
Open search |
Ctrl K |
Open search |
/ |
Open search |
Esc |
Close active overlay |
↑ |
Previous result |
↓ |
Next result |
Enter |
Select result |
The shortcuts are designed to make the navigation usable without a mouse.
Nexus UI was designed to be customized.
You can change the entire visual identity without rewriting the component structure.
Edit the CSS custom properties inside :root:
:root {
--primary: #a78bfa;
--accent: #ec4899;
--grad-1:
linear-gradient(
135deg,
#a78bfa 0%,
#ec4899 100%
);
}You can replace the colors with your own brand palette.
For example:
:root {
--primary: #38bdf8;
--accent: #6366f1;
}Theme preference is persisted through:
localStorage
using:
nexus-theme
Possible values:
dark
light
This means the user's selected theme survives page reloads and future visits.
Replace the default notification data inside script.js:
const DEFAULT_NOTIFS = [
{
id: 1,
type: 'mention',
icon: '@',
title: '<strong>Sarah</strong> mentioned you',
time: Date.now() - 5 * 60 * 1000,
unread: true,
},
{
id: 2,
type: 'success',
icon: '✓',
title: 'Deployment completed successfully',
time: Date.now() - 2 * 60 * 60 * 1000,
unread: false,
},
];Supported types:
mention
success
warning
alert
info
Search results are controlled through the SEARCH_INDEX array.
const SEARCH_INDEX = [
{
type: 'page',
icon: '🏠',
title: 'Home',
desc: 'Return to the homepage',
href: '#home',
},
{
type: 'quick',
icon: '🚀',
title: 'Get Started',
desc: 'Learn how to get started',
href: '#start',
},
{
type: 'action',
icon: '⚙️',
title: 'Settings',
desc: 'Manage application settings',
action: () => {
// Custom action
},
},
];This makes the search system adaptable to virtually any website structure.
Nexus UI uses browser localStorage for lightweight client-side persistence.
| Key | Purpose |
|---|---|
nexus-theme |
Theme preference |
nexus-recents |
Recent search queries |
nexus-notifs |
Notification read state |
No backend or database is required.
Note:
localStorageis intentionally used for the demo. A production application can replace this layer with an API or application state management system.
| Browser | Version | Support |
|---|---|---|
| Chrome | 90+ | ✅ Full |
| Edge | 90+ | ✅ Full |
| Firefox | 88+ | ✅ Full |
| Safari | 15.4+ | ✅ Full |
| Mobile Safari | 15.4+ | ✅ Full |
| Internet Explorer | — | ❌ Not supported |
Nexus UI relies on modern CSS and JavaScript APIs, so legacy browsers are intentionally not supported.
| Metric | Target |
|---|---|
| First Contentful Paint | < 0.5s |
| JavaScript | ~12 KB minified |
| CSS | ~18 KB minified |
| Dependencies | 0 |
| Frameworks | 0 |
| Build step | 0 |
| Category | Target |
|---|---|
| Performance | 98+ |
| Accessibility | 100 |
| Best Practices | 95+ |
| SEO | 95+ |
Performance values can vary depending on hosting, browser, device, network conditions, and whether assets are cached. Treat these numbers as project targets rather than universal benchmarks.
Nexus UI follows a few simple principles:
If the browser can already do it, there is no reason to ship another library.
The interface should remain understandable and usable while enhanced interactions are layered on top.
Keyboard interaction and reduced-motion support aren't optional extras.
Animations should enhance the experience without continuously consuming resources.
Colors, navigation items, notifications, search entries, and account information should be easy to replace.
The component can be integrated into almost any existing frontend stack because the core implementation uses standard web technologies.
Nexus UI can serve as the navigation foundation for:
- 🖥️ SaaS dashboards
- 🛠️ Developer tools
- 📊 Admin panels
- 💼 Business applications
- 👨💻 Developer portfolios
- 🚀 Startup landing pages
- 🎨 Creative portfolios
- 📱 Responsive web applications
- 🧪 UI/UX experiments
- 📚 Frontend learning projects
Potential additions for future versions:
- Command palette actions
- Search result grouping improvements
- Drag-and-drop notification management
- Notification pagination
- User profile editing
- Persistent navigation preferences
- More theme presets
- Custom accent color picker
- PWA support
- Advanced focus management
- Automated accessibility testing
- Automated Lighthouse CI
- Component extraction for easier reuse
- Optional TypeScript version
Contributions, improvements, and ideas are welcome.
git fork https://github.com/ItsWanheda/nexus-ui.gitgit checkout -b feature/my-improvementKeep the implementation:
- Lightweight
- Accessible
- Responsive
- Framework-free
- Performance-conscious
git commit -m "feat: improve navigation interactions"git push origin feature/my-improvementExplain what changed and why.
This project is licensed under the MIT License.
Copyright © 2026 ItsWanheda
You are free to:
- Use it
- Modify it
- Distribute it
- Integrate it into personal projects
- Integrate it into commercial projects
See the LICENSE file for the complete license text.
If Nexus UI helped you build something cool:
Give the repository a ⭐ on GitHub.
It helps the project get discovered and motivates further development.
Built with HTML · CSS · JavaScript
Designed to prove that modern UI doesn't require a framework.
Made with ☕ and a lot of frontend obsession.