---
title: "Clickable Burger — Free Framer component · Best of Framer"
description: "Free Framer component · by Framerspark · Navigation. A lightweight icon component built for toggling navigation menus with smooth motion and easy customization."
canonical: "https://framer.elliotli.dev/component/clickable-burger"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Clickable Burger

# Clickable Burger

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

![Clickable Burger preview image 1](https://framer.elliotli.dev/og/component/clickable-burger/ee703f7f494f04b1/1600x1200.jpg)

## Summary

A lightweight icon component built for toggling navigation menus with smooth motion and easy customization.

## Description

A lightweight icon component built for toggling navigation menus with smooth motion and easy customization.

**Key Features:**

-   **Toggle behavior:** Seamlessly switches between hamburger (closed) and X (open) states
    
-   **Smooth animation:** Fluid morphing transition for icon lines
    
-   **Customizable:** Adjust colors and transition styles to fit your design
    
-   **Integration ready:** Easily bind the toggle to show or hide any menu panel
    
-   **Responsive:** Control visibility based on viewport size or breakpoints
    

**How to Use:**

1.  Copy the component into your project
    
2.  Place it in your header, navbar, or preferred location
    
3.  Connect it to your desired menu or interaction
    
4.  Customize styles and transitions as needed
    
5.  Use the visibility variable to hide it on specific breakpoints
    

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

-   All · #2471

## Details

- **Author**: Framerspark
- **Published**: 2025-11-10
- **Updated**: 2025-11-07
- **Added**: 2025-10-30
- **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