Keel: Glass Sidebar Menu

Keel is a desktop-class navigation panel for streaming, media and dashboard apps. A frosted-glass column with window controls, a search field and grouped Menu, Discovery and General sections; icons magnify like a dock as the cursor glides over them, the active item glows, and the whole panel collapses to an icon rail with one click.

Dock magnification in a vertical menu

Hovered items and their neighbours scale with spring physics, giving a tactile, native-app feel to a classic sidebar.

Everything a real app needs

Search, section headings, notification badges, settings, log-out and a profile card with a switch-account action are already in place.

Features

• ✓Frosted-glass sidebar with window traffic-light controls
• ✓Search field
• ✓Grouped sections: Menu, Discovery, General
• ✓Dock-style spring magnification on hover
• ✓Active item highlight and notification badge
• ✓Collapse / expand to an icon rail
• ✓Profile footer with switch-account action
• ✓Framer Motion and plain CSS

What's included
Full JavaScript source code, package.json with locked dependencies, Vite config, RVT.ai README with setup and customisation guide, LICENSE and THIRD-PARTY-NOTICES.md. No node_modules: run npm install once.

Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.

Perfect for

• Streaming and media apps
• Admin dashboards and SaaS tools
• Desktop-style web apps (Electron, Tauri)
• Portfolio and design-system demos

From download to production

1. Download Keel: Glass Sidebar Menu from your account and unzip it.
2. Run npm install, then npm run dev to open it locally.
3. Swap in your brand colours, copy and data (see the README customisation guide).
4. Run npm run build and deploy the dist/ folder to any static host.

Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.

Choose the license for your project

A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.