Navigation
Floating Nav Dock
A pill-shaped navigation dock with translucent depth and compact labels.
navdockglass
Installation
Copy and paste the code into your project.
Accessibility notes
Keep an aria-label on the nav and use real links for each destination.
Preview accent
TypeScript
const items = ["Home", "UI", "AI", "Docs"];
export function FloatingNavDock() {
return (
<nav aria-label="Preview navigation" className="rounded-full border border-white/12 bg-[#0b0f14]/78 p-1 shadow-2xl backdrop-blur">
<ul className="flex gap-1">
{items.map((item) => (
<li key={item}>
<button className="block rounded-full px-3 py-2 text-xs font-medium text-slate-300 transition hover:bg-white/10 hover:text-white" type="button">
{item}
</button>
</li>
))}
</ul>
</nav>
);
}Usage
<FloatingNavDock />Related components
Navigation
Workflow Breadcrumb
A pill breadcrumb for agent workspaces, release flows, and nested product tools.
breadcrumbworkflownav
Navigation
Context Menu Panel
A floating action menu for editor surfaces, AI workspaces, and command-rich tools.
menuactionsfloating
- 1Brief
- 2Design
- 3Code
Navigation
Progress Stepper
A horizontal stepper for onboarding, generation pipelines, and design workflows.
stepsprogressworkflow