Magnifying Dock

A CSS-based implementation of a nav bar similar to a MacOS Dock with tons of customization and a directional magnification effect.

Content Tab

A repeater field with a list of items for the nav bar.

Layout: The flex layout of the items
Animation Direction: The direction of the Magnification Effect. If no option is explicitly set, a center magnification effect is applied. Left and Right are for horizontal layout, while Top and Bottom are for vertical layout.

Background: The container’s background color
Border: The container’s borders and box shadow
Padding: The container’s padding
Backdrop Filter Blur: Apply a backdrop filter blur to the container to create Glassmorphism. For the effect to work, the background color needs to have a low alpha channel ( Opacity )

Size: The size of an item
Gap: The gap between items
Maximum Scale: The maximum scale for the magnification effect
Background: The background color of the items
Border: The borders and box shadow of the items
Padding: The padding of the items
Enable Pointer Cursor on Hover: When not using a link on items ( when using the Interactions extension instead for example ), you can use this option to change the mouse cursor on hover.

Color Style: The style to use when applying the color to the SVG icon. Fill, sets the color inside the object drawn while Stroke applies the color around the edge of the drawn object.
Color: The color to use for the icon

Location: The location of the Tooltip relative to the item
Typography: The typography for the tooltips
Background: The background color of the tooltips
Border: The borders and box shadow of the tooltips
Padding: The padding of the tooltips
Position Offset: An offset value to increase the distance of a tooltip from an item