Navigation

Navigation Showcase

Explore navigation patterns from expandable tabs to macOS-style docks. Every pattern is accessible, responsive, and beautifully animated.

Expandable Tabs

Animated tabs that expand to reveal labels when selected

Click any tab to see the expand animation. Labels smoothly reveal with spring physics while the active indicator transitions between items.

macOS Dock

Realistic dock with fish-eye magnification effect on hover

Hover over the dock to see the fish-eye magnification effect. Click apps to toggle their “running” indicator. The dock uses requestAnimationFrame for buttery-smooth animation.

Navigation Menu

Dropdown navigation with content panels and smooth transitions

Hover over menu items to see animated dropdown panels. The navigation menu supports rich content, icons, and multi-column layouts.

Breadcrumbs

Navigation trails that show hierarchy and current location

Simple Path

Deep Hierarchy

With Icons

Floating Navbar

A centered, pill-shaped navbar with animated active indicator

Click nav items to see the shared layout animation. The active indicator smoothly transitions between items using Framer Motion's layoutId.

Sidebar Navigation

Different sidebar styles for different use cases

Collapsible Sidebar

Full sidebar with collapse/expand animation

UnQWeb

dashboard

dashboard Page

This is a demo sidebar navigation. Click items to switch, and toggle the collapse button.

Icon-Only Sidebar

Minimal icon sidebar with active indicator

Icon-only sidebar style

Top Navbar Variants

Different top navigation bar styles for various layouts

Minimal Top Bar

UnQWeb

Centered Navigation

Glassmorphism Bar

UnQWeb