Navigation Dock for Bricks Builder

Customize your advanced dock using the controls below
Configure magnification effect, distance, and spring physics
Choose from 50+ built-in icons or upload your own SVG icons
Toggle labels on/off for each dock item
Click Copy JS to copy the JavaScript code to clipboard
In Bricks Builder, add a Code element
Paste or upload the JavaScript code
To add the effect to any section: go to Section → Style → Attributes, add data-interactive-dock as attribute name (leave value empty)

Home

Settings

Profile

Dock Items

Magnification Settings

Distance (Effect Radius)

150px

Magnification Size

80px

Panel Height (Base Size)

48px

Spring Physics

Mass

0.1

Stiffness

150

Damping

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

Documentation

GETTING STARTED

MENU ANIMATIONS

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

INSTANT MOTION

SURECART

BUTTONS

TRANSITION PAGES

Interactive Dock

Select an Icon

Upload Custom SVG

Your Custom Icons