Mast: Glass Dock Navigation Bars

The navigation bar is on every page, so it should feel effortless. Mast gives you two refined, desktop-class headers inspired by native macOS design: floating glass pills, fluid dropdowns, search, theme switching and slick mobile menus, all animated with Framer Motion.

Two variants, two styling approaches

Classic is written in plain CSS for maximum portability; V2 is built with Tailwind CSS v4 and adds an expanding glass panel with an integrated sign-in sheet.

Motion that guides, not distracts

Spring-based transitions open menus from their trigger, highlight the active item and collapse gracefully on mobile.

Variants included

• Classic: Floating pill navbar with animated mega dropdowns, search and theme toggle.
• V2: Tailwind CSS v4 navbar with expanding glass panel and built-in sign-in sheet.

Features

• ✓Two complete navbar variants
• ✓Floating glassmorphism pill design
• ✓Animated dropdown / mega-menu panels
• ✓Search and theme toggle buttons
• ✓Integrated sign-in sheet (V2)
• ✓Mobile hamburger menu
• ✓Framer Motion spring animations
• ✓Plain CSS (Classic) and Tailwind CSS v4 (V2)

What's included
Full JavaScript source code for 2 variants, 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

• SaaS and startup marketing sites
• Fintech and comparison platforms
• Portfolio and agency headers
• Documentation and product hubs

From download to production

1. Download Mast: Glass Dock Navigation Bars 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.