---
title: "Island Navbar — Free Framer component · Best of Framer"
description: "Free Framer component · by Daniel Moreno · Navigation. Island Navbar is a floating, app-inspired navigation component designed for creators and portfolio sites that want a distinctive,…"
canonical: "https://framer.elliotli.dev/component/island-navbar"
---

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

# Island Navbar

Floating Navbar for creative sites

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

![Island Navbar preview image 1](https://framer.elliotli.dev/og/component/island-navbar/12a755bd2488cc05/1600x1200.jpg)

## Summary

Island Navbar is a floating, app-inspired navigation component designed for creators and portfolio sites that want a distinctive, mobile-native feel.

## Description

**Island Navbar** is a floating, app-inspired navigation component designed for creators and portfolio sites that want a distinctive, mobile-native feel. Inspired by the compact nav bars found in mobile apps, it condenses your site's navigation into a sleek floating capsule that can be placed at the top or bottom of the page. With toggleable icons and text, animated hover states, and a signature dashed border animation, it brings a tactile, polished touch to any creative site.

### **Key Features**

-   **Flexible Display:** Independently show or hide icons and text to match your site's style.
    
-   **Animated Hover State:** Links transition to a lighter accent color on hover, paired with an animated dashed border around the button.
    
-   **Active State Indicator:** A clear accent-colored icon and underline mark the current page or section.
    

### **Properties**

_Content_

-   **Number of Links:** Choose how many nav items to display (up to 5).
    
-   **Show Icon / Show Text:** Toggle icon and text visibility independently.
    
-   **Icon 1–5, Title 1–5, Link 1–5:** Set the icon, label, and destination for each nav item.
    

_Color Properties_

-   **BG Color:** The background color of the navbar capsule.
    
-   **Border Color:** The color of the navbar's outer border.
    
-   **Hover Color:** The accent color links transition to on hover.
    
-   **Inactive Text / Active Text:** Colors for unselected and selected link text.
    
-   **Accent Color:** The color of the active link's icon and underline indicator.
    
-   **Glow Accent:** The glow color applied around the active link.
    

**Best Practices**

-   **Balance Icons and Text:** For minimal sites, try icons only; for clarity on larger screens, keep both enabled.
    
-   **Match Your Palette:** Adjust the Accent and Glow colors to align with your site's branding for a cohesive look.
    
-   **Keep Titles Short:** Concise labels (1–2 words) work best to preserve the compact, floating aesthetic.
    

**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 · #637

## Details

- **Author**: Daniel Moreno
- **Published**: 2026-07-21
- **Updated**: 2026-07-21
- **Added**: 2026-07-21
- **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