---
title: "Dynamic Fill Nav — Free Framer component · Best of Framer"
description: "Free Framer component · by Devique Studio · Navigation. Bi-Directional Interactive Fill Menu"
canonical: "https://framer.elliotli.dev/component/dynamic-fill-nav"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Dynamic Fill Nav

# Dynamic Fill Nav

Bi-Directional Interactive Fill Menu

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

![Dynamic Fill Nav preview image 1](https://framer.elliotli.dev/og/component/dynamic-fill-nav/3824b6d4ecdfa988/1600x1200.jpg)

## Summary

Bi-Directional Interactive Fill Menu

## Description

-   **Bi-Directional Motion:** Choose between a vertical "rising" fill or a horizontal "swipe" effect to match your site's flow.
    
-   **Outline to Solid Transition:** Seamlessly switch from elegant 2px (customizable) strokes to full-color fills on interaction.
    
-   **Dynamic Labels:** Add superscript markers or numbers (e.g., "08", "17") with full control over their font, style, and X/Y offset.
    
-   **Precise Animation Tuning:** Adjust **Hover Duration** and choose from multiple **Easing** presets (like Ease Out) for a natural feel.
    
-   **Full Customization:** Control gaps, alignment, and typography for a perfectly balanced menu.
    
-   **Fully Responsive:** Optimized layouts for Desktop, Tablet, and Mobile, ensuring a smooth experience on touch screens.
    

Ideal for bold, Swiss-style layouts where typography is the main hero of the design.

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

-   All · #2685

## Details

- **Author**: Devique Studio
- **Published**: 2026-02-26
- **Updated**: 2026-02-26
- **Added**: 2026-02-18
- **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