Getting Started
Jose Tamu
Sep 22, 2025 /
Beginner /
CSS only

Gooey Nav

How it works

Gooey Nav is a nestable widget. It contains “Gooey Items” that will receive the Gooey effect.

Content tab

Animation group

Merge Distance: how much distance the Items will attract. A negative distance would repel them.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Style tab

Nav’s direction has to be set at the Direction group. It can be column or row. In order to change the direction at mobile or any other breakpoint, you have to set that media pixel at “Switch direction at” control.
Gooey Items styles can be styled at the Gooey Items group at once or individually at each Focus Item element.