---
title: "Compact Navigation — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Geometry Craft Studio · Navigation. A customizable control layout"
canonical: "https://framer.elliotli.dev/component/compact-navigation"
---

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

# Compact Navigation

A customizable control layout

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

![Compact Navigation preview image 1](https://framer.elliotli.dev/og/component/compact-navigation/93e93f634e2b0434/1600x1200.jpg)

## Summary

A customizable control layout

## Description

**Compact Navigaton** is a fully customizable hexagon-based navigation component designed for clean layouts, interactive experiences, and responsive behavior across devices. Easily control layout, styling, and content directly from the properties panel - no coding required.

### Settings

-   **Additional ID** Required **only when using multiple instances on the same breakpoint**. Ensures each component works independently without conflicts.
    
-   **Mobile Layout** Switch between desktop and mobile layout behavior.
    
-   **Preset** Select a predefined visual style (e.g. _Cyber-Noir_).
    
-   **Font Size** Adjust the size of text inside cells.
    
-   **Base Color** Defines the primary accent color of the grid.
    
-   **Text Color** Controls the color of labels and content.
    
-   **Show Animation** Toggle hover and transition effects.
    
-   **Hide Decorative Cells** Show or hide non-interactive visual cells for a cleaner layout.
    

### Content

-   **Responsive Items** Add and configure up to **9 navigation cells**:
    
    -   Text labels
        
    -   Internal anchor links
        
    -   Icon
        
    -   External links
        

### **Search Keywords:**

hexagonal grid, honeycomb layout, bento grid, framer component, interactive hover, svg filters, cyberpunk ui, tech portfolio grid, glowing effects, custom layout, dark mode component.

### Notes

-   Fully responsive by default
    
-   Works in both simple and complex layouts
    
-   Optimized for performance and smooth interactions
    

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

-   All · #8751

## Details

- **Author**: Geometry Craft Studio
- **Price**: $10.00
- **Published**: 2026-07-14
- **Updated**: 2026-07-22
- **Added**: 2026-07-14
- **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