001 • Dock-like nav

August 16, 2023

Share

>_

Hi, today begins my journey with #dailyremix and our first remix is a dock-like navigation bar. It took me some time to create the perfect interactive and responsive solution, but I finally got there.

Quick intro

Component works especially well on one-page websites, where all the content is contained on a single page. In such a case, we can fully utilize the interactivity of the dock panel, using hover and clicked state.

However, if we plan to use this component on multi-page websites, there's also a variant designed for such use, called "Desktop - Multipage". In this version, the button itself doesn't have animation on hover or click.

This is a consequence of the dock panel rendering separately on each page, which could lead to undesirable effects with animations. Hence, in the multipage version, our focus is on maintaining consistency and stability in navigation between pages.

Component works especially well on one-page websites, where all the content is contained on a single page. In such a case, we can fully utilize the interactivity of the dock panel, using hover and clicked state.

However, if we plan to use this component on multi-page websites, there's also a variant designed for such use, called "Desktop - Multipage". In this version, the button itself doesn't have animation on hover or click.

This is a consequence of the dock panel rendering separately on each page, which could lead to undesirable effects with animations. Hence, in the multipage version, our focus is on maintaining consistency and stability in navigation between pages.

Component works especially well on one-page websites, where all the content is contained on a single page. In such a case, we can fully utilize the interactivity of the dock panel, using hover and clicked state.

However, if we plan to use this component on multi-page websites, there's also a variant designed for such use, called "Desktop - Multipage". In this version, the button itself doesn't have animation on hover or click.

This is a consequence of the dock panel rendering separately on each page, which could lead to undesirable effects with animations. Hence, in the multipage version, our focus is on maintaining consistency and stability in navigation between pages.

How to use?

Position - Fixed (Bottom pinned)
One-page website - Variant: "Desktop"
Multipage website - Variant: "Desktop - Multipage"
Mobile/tablet - Variant: "Mobile"

Newsletter

Thanks

for

watching!

Sign

up

to

newsletter

and

receive

updates

on

new

Framer

tips

& freebies.

Daily Remix

Build by

kacper

Proudly built in Framer.