FreeNavigation

Floating Build Dock

Use this as a playful section switcher, builder toolbar, product workflow dock, or compact navigation element in interactive pages.

ReactTailwind CSSMotionNavigation

Overview

A compact floating dock with springy hover states for workflow navigation.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<FloatingBuildDock />

Floating Build Dock.tsx

tsx

"use client";

import { motion } from "framer-motion";

const items = ["Scope", "UI", "API", "Ship"];

export function FloatingBuildDock() {
  return (
    <div className="flex items-end justify-center p-6">
      <div className="flex items-end gap-2 rounded-full border border-white/10 bg-zinc-950/90 p-2 shadow-2xl shadow-black/30">
        {items.map((item, index) => (
          <motion.button
            key={item}
            type="button"
            whileHover={{ y: -8, scale: 1.1 }}
            whileTap={{ scale: 0.96 }}
            className={"flex h-12 w-12 items-center justify-center rounded-full text-xs font-bold " + (index === 0 ? "bg-lime-300 text-zinc-950" : "bg-white/10 text-zinc-400")}
            aria-label={item}
          >
            {item.slice(0, 2)}
          </motion.button>
        ))}
      </div>
    </div>
  );
}