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:
Drag the component onto your canvas.
Check the properties panel on the right under "Menus".
Click "+ Add" to create a new parent menu (e.g., "Services").
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.
Alpheratz
