PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · BY PIXLIFY
RADIAL · ARC · LINE
Move near it and the button leans in like a magnet. Touch it and the actions bud off as liquid drops, each one magnetic too. The plus turns into a close mark on the same spring.
LIVE PREVIEW - MOVE TOWARD THE BUTTON
TAB TO THE BUTTON · ENTER OPENS · ARROWS MOVE · ESC CLOSES
VARIANTS & PRESETS
01 - LIGHT
Ink drops on paper
Dark liquid on a light page, labels always on.
02 - ARC
Share arc · lime
Five actions on a half circle above the button.
03 - LINE
Toolbar line
Items in a row to the right, labels above.
04 - GLASS
Photo picks · glass
Glass style with image items and the menu icon.
HOW TO USE
01
Insert Magnetic Menu
Drag it onto the canvas. Use about 420 × 420 px for a ring. Smaller frames shrink the button and items.
02
Add the items
Up to 8, each with one of 26 icons or your own image, a label and an optional link.
03
Pick a layout
Radial ring, Arc or Line, plus Direction for arc and line.
04
Choose the trigger
Hover opens when the cursor reaches the button, Click toggles it. Touch screens always open on tap.
05
Style it
Liquid or Glass, colours for button, items, icons and labels, sizes, distance and goo.
06
Tune the magnet
Button pull, field radius and item pull, then stiffness, damping and stagger.
PROPERTY CONTROLS
Items
Icon or image, label and link per item.
Layout / Direction
Radial, Arc or Line, and which way it opens.
Open On / Button Icon / Labels
Hover or click, plus or menu icon, labels on hover, always or off.
Look
Liquid or Glass, button, item, icon, active and label colours, blur, border, shadow.
Shape
Button and item size, distance, arc spread, goo, squircle.
Magnet
Button pull, field radius and item pull.
Spring
Stiffness, damping and stagger.
Close Outside / Close On Pick / New Tab
How and when the menu closes, and where links open.
Canvas / Intro Bloom / Events
Closed or Open on the canvas, a one-time bloom when it scrolls into view, On Open and On Close.
PERFORMANCE
Only transforms and opacity animate, and the loop sleeps when nothing moves.
MOBILE
Tap opens, tap outside closes. The magnet is mouse-only so scrolling stays normal.
ACCESSIBILITY
A real button with aria-expanded, menu items, arrow keys between items, Escape closes. Reduced motion turns off the magnet and bounce.
© 2026 PIXLIFY - MADE IN WARSAW
MAGNETIC MENU · PREMIUM COMPONENT · BY PIXLIFY