---
title: "Dynamic Sidebar — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Sirrah Space · Navigation. Premium dynamic sidebar"
canonical: "https://framer.elliotli.dev/component/dynamic-sidebar"
---

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

# Dynamic Sidebar

Premium dynamic sidebar

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

![Dynamic Sidebar preview image 1](https://framer.elliotli.dev/og/component/dynamic-sidebar/2b053a7c96895740/1600x1200.jpg)

## Summary

Premium dynamic sidebar

## Description

Elevate your dashboard or website navigation with **Crystal Glass Sidebar**. Designed specifically for Framer, this component blends the modern beauty of frosted glass with intelligent menu functionality.

**✨ Key Features:**

-   **True Glassmorphism:** Utilizes backdrop-filter: blur and subtle semi-transparent borders to create a realistic, modern frosted glass effect.
    
-   **Smart Accordion Logic:** Keeps your navigation clean by automatically closing other menus when a new one is opened (One-at-a-time focus).
    
-   **Hybrid Navigation:** Intelligently detects your content. If a menu has 'Sub Items', it becomes a dropdown. If not, it functions as a standard Link button.
    
-   **Stable Array Control:** The property controls have been optimized to ensure a bug-free experience when adding, editing, or removing menu items in the Framer panel.
    
-   **Fully Customizable:** Easily tweak the accent color, corner radius, font styles, and glass opacity to match your brand identity.
    

_Step-by-step guide for users:_

**A. Setting up the Menu Structure:**

1.  Drag the component onto your canvas.
    
2.  Check the properties panel on the right under **"Menus"**.
    
3.  Click **"+ Add"** to create a new parent menu (e.g., "Services").
    
4.  Inside that menu, add **"Sub Items"** (e.g., "Web Design", "SEO").
    
    -   _Note: If you leave "Sub Items" empty, the parent menu will automatically function as a standard direct link._
        

**B. Styling the Look:**

-   **Accent Color:** Sets the color for the active text and arrow icons (Default: Bright Blue).
    
-   **Background:** Controls the base glass color. Keep the opacity low (around 20-30%) to maximize the blur effect.
    
-   **Radius:** Adjusts the curvature of the container and buttons.
    

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

-   All · #7208

## Details

- **Author**: Sirrah Space
- **Price**: $3.00
- **Published**: 2026-01-05
- **Updated**: 2026-07-26
- **Added**: 2025-12-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