---
title: "Gilt Navbar — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Daniel Moreno · Navigation. 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."
canonical: "https://framer.elliotli.dev/component/gilt-navbar"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Gilt Navbar

# Gilt Navbar

Adaptive navbar with a gilded edge

[View on Framer](https://framer.com/marketplace/components/gilt-navbar/?via=elliot-li)

![Gilt Navbar preview image 1](https://framer.elliotli.dev/og/component/gilt-navbar/e5abacf976690950/1600x1200.jpg)

## Summary

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.

## Description

### 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](mailto:danielgrafix12@gmail.com). I'll get back to you as soon as possible.

## Rank history [How rankings work →](/terms#rankings)

-   All · #533

## Details

- **Author**: Daniel Moreno
- **Price**: $10.00
- **Published**: 2026-09-03
- **Updated**: 2026-09-07
- **Added**: 2026-09-03
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation