UINEXA SNIPPET

Floating Dock Navigation

A responsive floating dock navigation with clear interaction feedback and reusable accessible navigation markup.

CSS HTML easy FREE

Snippet Details

Difficulty: easy

Type: Frontend Effect

Status: Copy & Paste Ready

Live Preview

Test the effect before copying.

Source Code

Copy the code into your project.

<nav class="ux-floating-dock-navigation" aria-label="Quick actions"><a href="#home">⌂<span>Home</span></a><a href="#search">⌕<span>Search</span></a><a href="#save">♡<span>Saved</span></a><a href="#profile">◎<span>Profile</span></a></nav>

Installation

How to use this snippet

1. Add an HTML widget in Elementor.

2. Paste the HTML code into the widget.

3. Add the CSS code to Elementor Custom CSS or your website stylesheet.

4. Update the example anchor links so they point to your real pages or sections.

5. Replace example text, links and labels with your own content.

6. Test the navigation on desktop, tablet and mobile.

Elementor Note

Elementor usage

The effect works without JavaScript. Review keyboard focus order after inserting the navigation into your header.

Browser Support

Works in modern browsers.

Chrome ✓

Firefox ✓

Safari ✓

Edge ✓