LIVE NOW

Visual Configurator is now active — Customize 50+ professional animations Visual Configurator is live!

Get Started
Dynamic Menu Island Configurator

How to use in Bricks Builder

  1. Customize your dynamic menu island using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Bricks Builder, add a Code element and paste the JavaScript
  4. Add the attribute
    data-menu-island📋
    to any container element
  5. Optional: Enable "Relative to Container" to position the island within the container instead of the viewport
This tool creates a customized script with your settings built-in. All your menu configurations are included in the generated code - you don't need to add any additional attributes!
Home
Profile
Settings
Notifications
BricksFusion Exclusive Get Your Dynamic Menu Island

Add an elegant dynamic menu island to your website with this customized JavaScript snippet, inspired by Apple's Dynamic Island.

  • Simple implementation with a single data attribute
  • Fully responsive design that adapts to any screen size
  • Customizable appearance, animations, and menu items
  • Beautiful expandable menu with grid layout
  • Interactive animations with smooth transitions
  • Works on all modern browsers and devices
Configure Your Dynamic Island
Basic Settings
Appearance
Menu Items
Animation
Position
Relative to Container
Edge Margin 20px
Initial Width 120px
Island Size
Button Text
Hide After Inactivity
Hide Delay 3s
Island Background
Background Opacity 0.8
Text Color
Show Icons
Icon Color
Icon Size 24px
Menu Item Background
Menu Background Opacity 0.1
Border Radius (Initial) 20px
Border Radius (Expanded) 24px
Blur Effect Strength 10px
Box Shadow 4px
Menu Layout
Menu Item 1
Icon
Label
URL
Show Icon
Menu Item 2
Icon
Label
URL
Show Icon
Menu Item 3
Icon
Label
URL
Show Icon
Menu Item 4
Icon
Label
URL
Show Icon
Animation Duration 0.3s
Animation Easing
Scale on Hover
Hover Scale Factor 1.05x
Menu Item Transition Delay 0.05s
Opening Animation
Close on Outside Click
Mobile Compatibility
Background Blur Effect
Background Blur Strength 8px
Background Overlay Opacity 0.3

JavaScript Code