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.
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.
Sirrah Space
