---
title: "FluxNode — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Velora Studio · Navigation. hamburger menu with multiple opening tab"
canonical: "https://framer.elliotli.dev/component/fluxnode"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/FluxNode

# FluxNode

hamburger menu with multiple opening tab

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

![FluxNode preview image 1](https://framer.elliotli.dev/og/component/fluxnode/a65980bbbc47f76d/1600x1200.jpg)

## Summary

hamburger menu with multiple opening tab

## Description

This component utilizes Framer’s **Variants** and **Smart Animate** to create a fluid "morphing" experience. Here is how the interaction flow is structured:

**Stage 1: The Trigger (Collapsed State)**

-   **Visuals:** A simple, rounded-square button containing a two-line "equal" icon.
    
-   **Purpose:** Acts as a floating action button or a discreet menu trigger to keep the UI clean.
    
-   **Interaction:** On **Click**, the component transitions to the "Header" variant.
    

**Stage 2: The Header (Identity State)**

-   **Visuals:** The icon expands horizontally into a translucent pill-shaped bar. It displays the user's avatar (E. Farid), their unique ID, a purple "Team" badge, and a close (X) icon.
    
-   **Purpose:** Provides immediate context of "who" is logged in without taking up the whole screen.
    
-   **Interaction:** On **Click** (anywhere on the bar), the component triggers a vertical expansion to show the full list.
    

**Stage 3: The Dashboard (Expanded State)**

-   **Visuals:** The pill expands downward into a full-sized vertical menu. It retains the header but adds a structured list of items:
    
    -   **Members:** Showing count (24).
        
    -   **Business Target & Mailbox:** Navigational links with chevron indicators.
        
    -   **Achievements:** Featuring a "New" badge.
        
    -   **Security:** "Reset Fingerprints" and a "Make Private" toggle.
        
-   **Interaction:** Clicking the (X) or clicking outside the component typically returns it to the Stage 1 icon state.
    

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

-   All · #7717

## Details

- **Author**: Velora Studio
- **Price**: $15.00
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-05-11
- **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