Motion Dock Navigation
A polished dock navigation component with expandable sliding panels, spring physics transitions, and per-tab content panels for dashboard interfaces.
NavigationReactGSAPTailwind CSS
CSSTailwind
Manual
Create a file and paste the following code into it.
src/components/dock-nav/dock-nav.constants.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import type { Variants } from "motion/react";
import {
House,
Bell,
SlidersHorizontal,
BookOpen,
ShieldCheck,
Kanban,
FileText,
User,
} from "@phosphor-icons/react";
import type { DockItem, TabConfig } from "./dock-nav.types";
export const TABS: TabConfig[] = [
{ id: "dashboard", icon: House, label: "Dashboard" },
{ id: "notifications", icon: Bell, label: "Notifications" },
{ id: "settings", icon: SlidersHorizontal, label: "Settings" },
{ id: "changelog", icon: BookOpen, label: "Changelog" },
{ id: "security", icon: ShieldCheck, label: "Security" },
{ id: "activity", icon: Kanban, label: "Activity" },
{ id: "documents", icon: FileText, label: "Documents" },
{ id: "profile", icon: User, label: "Profile" },
];
export const DOCK_ITEMS: DockItem[] = [
TABS[0], TABS[1], TABS[2],
{ divider: true },
TABS[3], TABS[4], TABS[5],
{ divider: true },
TABS[6], TABS[7],
];
export const TAB_ORDER = TABS.map((tab) => tab.id);
export const HEIGHT_SPRING = {
type: "spring",
stiffness: 280,
damping: 26,
mass: 1.0,
} as const;
export const DOCK_SPRING = {
type: "spring",
stiffness: 540,
damping: 40,
mass: 1,
} as const;
export const SLIDE_SPRING = {
type: "spring",
stiffness: 380,
damping: 34,
mass: 0.95,
} as const;
export const tabVariants: Variants = {
enter: (direction: number) => ({
x: direction >= 0 ? "22%" : "-22%",
opacity: 0,
}),
center: {
x: "0%",
opacity: 1,
transition: SLIDE_SPRING,
},
exit: (direction: number) => ({
x: direction >= 0 ? "-22%" : "22%",
opacity: 0,
transition: SLIDE_SPRING,
}),
};Update the import paths to match your project setup.