Shadcn.io is not affiliated with official shadcn/ui
Navbar Mobile Fullscreen
A mobile navbar that opens a full-screen overlay menu built with React, Next.js, shadcn/ui, Tailwind CSS, and framer-motion. Background fills the viewport with large centered nav links, social links at the bottom, and smooth scale plus fade animations for the overlay with a close button in the top-right corner.
Transform your mobile navigation into a full-screen experience. This navbar overlay fills the entire viewport with large, centered navigation links and social icons anchored at the bottom. The overlay enters with a smooth scale and fade animation, creating a premium feel that elevates your mobile UX. Built with framer-motion for cinematic transitions and shadcn/ui for consistent design tokens. Ideal for creative portfolios, agency sites, and brand-forward applications.
Related Components
Animated Hamburger Navbar
Hamburger icon with morphing animation
Mobile Drawer Navbar
Slide-out mobile drawer menu
Mobile Bottom Navbar
Bottom navigation bar for mobile
Minimal Navbar
Ultra-clean single-row navbar
Icon-Only Navbar
Minimal icon-based navigation
Floating Pill Navbar
Pill-shaped floating navigation
FAQ
Was this page helpful?
Sign in to leave feedback.
Mobile Drawer
A navbar with animated hamburger menu and slide-out drawer for React, Next.js, shadcn/ui, and Tailwind CSS. Shows a clean desktop navigation that transforms into a mobile-friendly Sheet drawer with navigation links, call-to-action button, and social links on hamburger click.
Multi Tenant
A multi-tenant SaaS navigation bar built with React, Next.js, shadcn/ui, and Tailwind CSS. Features an organization avatar with dropdown switcher for multiple tenants, standard nav links, user avatar menu, and framer-motion animated transitions for the org selector panel.