Shadcn.io is not affiliated with official shadcn/ui
Navbar Segmented Control
A navigation bar with iOS-style segmented control built with React, Next.js, shadcn/ui, and Tailwind CSS. Nav items sit inside a bg-muted container with the active segment highlighted by a sliding white card background animated with framer-motion layoutId transitions.
Bring native-app navigation patterns to the web with this segmented control navbar. The active segment slides between items with a smooth framer-motion animation, backed by a contrasting card background inside a muted container. Inspired by iOS and macOS segmented controls, this pattern feels instantly familiar to users and works beautifully for switching between top-level views.
Related Components
Pill Links Navbar
Navbar with pill-shaped active indicators
Condensed Navbar
Ultra-compact single-line navigation
Stacked Double Navbar
Two-row navbar with tabs and utility links
Split Layout Navbar
Navbar with left nav and right actions
Minimal Navbar
Clean minimal navigation bar
Breadcrumb Navbar
Navbar with breadcrumb navigation
FAQ
Was this page helpful?
Sign in to leave feedback.
Search Overlay
A navigation bar with a full-screen search overlay built with React, Next.js, shadcn/ui, and Tailwind CSS. Click the search icon or press Cmd+K to open a dimmed overlay with a large centered search input, recent searches, and popular suggestions.
Settings Header
A settings page header navigation bar built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a Settings page title with icon, horizontal tab navigation with animated active underline for General, Security, Billing, Notifications, API, and Team tabs, and a Save Changes button that enables when changes are detected, animated with framer-motion.