Gilt Navbar

Gilt Navbar adapts to the device it's on: a clean text navbar on desktop, and a floating icon capsule with an expandable menu on mobile.

About Gilt Navbar Gilt Navbar adapts to the device it's on: a clean text navbar on desktop, and a floating icon capsule with an expandable menu on mobile. Its signature is the gilded liquid-gradient border — a subtly animated gold edge that marks the CTA on desktop and the hamburger on mobile, giving the primary action a premium, tactile finish. Key Features * Adaptive Layout : Text navbar on desktop, floating icon capsule on mobile. * Gilded Border : Animated liquid-gradient gold edge highlights the CTA and hamburger. * Expandable Mobile Menu : The hamburger opens a vertical panel listing every link with icon and label, then morphs into a close (X) button. * Built-in Social Links : Add up to 3 social icons (X, Framer, Instagram, or any other) inside the mobile panel. * Active Link Indicator : A variable marks which link shows as currently selected. Properties * Variant : Choose between Desktop and Mobile layouts. * Trigger : Set what opens the mobile menu. * Active Link : Determines which link appears selected in the component. * Number of Links : Sets how many links show in the desktop variant's link group (Mobile always uses all 4 plus the CTA). * Icon 1–5, Title 1–5, Link 1–5 : Set the icon, label, and destination for each nav item. Social Links * Social Logo 1–3, Social Link 1–3 : Set the icon and URL for each social link shown in the mobile panel (X, Framer, Instagram, or any platform you choose). Best Practices * Keep Titles Short : 1–2 word labels preserve the compact, floating look on mobile. * Reserve the CTA : Use Link 5 for your single most important action — it stays visible in both layouts. * Fill Every Aria Label : Since social links are icon-only, a clear Aria Label keeps the component accessible. Support & Assistance If you have any questions, need help using the component, or encounter any issues, you can reach out to me at danielgrafix12@gmail.com . I'll get back to you as soon as possible.

Adaptive navbar with a gilded edge