BLACK FRIDAY
25% OFF Lifetime · Ends Dec 2nd

Ready to enhance your Breakdance experience?

Add premium elements that enhance user experience.

Quick Started

Ready to enhance your Bricks Builder experience?

Unlock Breakfusion. Make today your launch day.

Interactive Dock Configurator - Breakfusion
data-interactive-dock

Interactive Dock

Apple-style magnification dock for Breakdance Builder

How to Use & Code Information
▼
  1. Customize your advanced dock using the controls below
  2. Configure magnification effect, distance, and spring physics
  3. Choose from 50+ built-in icons or upload your own SVG icons
  4. Toggle labels on/off for each dock item
  5. Click Copy JS to copy the JavaScript code to clipboard
  6. In Breakdance Builder, add a Code element
  7. Paste the JavaScript code
  8. To add the effect to any section: go to Section → Settings → Advanced → Attributes, add data-interactive-dock with value true
Home
Settings
Profile
Dock Items
Magnification Settings
Distance (Effect Radius) ℹ
150px
Magnification Size ℹ
80px
Panel Height (Base Size) ℹ
48px
Spring Physics
0.1
150
12
Style Settings
HEX
HSL
HEX
HSL
HEX
HSL
Container Border Radius ℹ
16px
Item Border Radius ℹ
12px
Items Gap ℹ
8px
Labels & Interaction
Show Labels
Display tooltips on hover
Container Padding ℹ
12px
Position Settings
Respect Container Position
Position dock relative to its container instead of viewport
Fixed Position
Use fixed positioning at bottom of viewport (when not respecting container)
Distance from Bottom ℹ
2rem
Z-Index ℹ
1000

Select an Icon

Upload Custom SVG

📄
Click to upload or drag & drop
SVG files only