Navigation & Menus
Animated navigation menus, overlays, and header interactions — patterns for editorial and SaaS marketing sites.
8 indexed demos · 22 total in this collection
Browse other experiment categories
Experiments in this category
- Fullscreen Overlay NavigationAnimated fullscreen navigation menu with SplitType text reveals, diamond indicator, and GSAP-powered open/close transitions. Reusable React navigation with premium open, close, and hover motion.
- Elastic Drawer NavigationSide drawer with elastic overshoot spring physics, staggered text reveals, and responsive bottom sheet on mobile. Reusable React navigation with premium open, close, and hover motion.
- Morphing MenuCircle-to-fullscreen morphing navigation with GSAP timeline, staggered text reveals, and elastic spring physics. Animated navigation menu for interactive UI and landing page headers.
- Radial MenuCircular radial navigation that fans out items from a center trigger with spring physics and selection tracking. Reusable React navigation with premium open, close, and hover motion.
- Floating Action MenumacOS-style FAB that fans out action buttons in an arc with spring animations. Reusable React navigation with premium open, close, and hover motion.
- Break MenuFullscreen menu with clip-path reveal, stacked parallax images, and 3D tilt effect using GSAP. Reusable React navigation with premium open, close, and hover motion.
- Infinite MenuDemoInfinitely scrolling vertical menu with seamless looping and hover image reveals. Animated navigation menu for interactive UI and landing page headers.
- Jam MenuDemoCreative fullscreen menu with animated text reveals and image hover previews. Animated navigation menu for interactive UI and landing page headers.
- Kpverse MenuDemoImmersive fullscreen menu with parallax image backgrounds and text hover effects. Animated navigation menu for interactive UI and landing page headers.
- Liquid Morph Navigation MenuNavigation with liquid morphing indicator that flows between menu items on hover. Animated navigation menu for interactive UI and landing page headers.
- Animated Navigation MenuDemoResponsive navigation menu with animated dropdowns and mobile slide-out panel. Reusable React navigation with premium open, close, and hover motion.
- Navbar Flip TransitionNavbar with 3D flip transitions on navigation items and animated state changes. Animated navigation menu for interactive UI and landing page headers.
- Root Food MenuDemoRestaurant-style menu with category navigation, hover image previews, and animated transitions. Reusable React navigation with premium open, close, and hover motion.
- Full-Page Scroll NavigationDemoFullpage scrolling navigation with section snapping and animated transitions. Animated navigation menu for interactive UI and landing page headers.
- Travel Site Navigation MenuDemoTravel-themed navigation with immersive hover effects and destination previews. Animated navigation menu for interactive UI and landing page headers.
- Boys and Girls Navigation MenuDemoSplit-screen navigation with contrasting themes and animated transitions. Reusable React navigation with premium open, close, and hover motion.
- UI8 Style Navigation MenuDemoUI8-inspired navigation with smooth dropdown reveals and hover animations. Animated navigation menu for interactive UI and landing page headers.
- Micro Front MenuDemoCompact micro navigation with expanding menu panels and staggered reveals. Animated navigation menu for interactive UI and landing page headers.
- Osmo Style Navigation MenuDemoOsmo-inspired navigation with animated menu transitions and hover effects. Animated navigation menu for interactive UI and landing page headers.
- Slide-Out Panel NavigationDemoSlide-out navigation panel with staggered link reveals and overlay backdrop. Animated navigation menu for interactive UI and landing page headers.
- Burger MenuDemoAnimated hamburger menu with morphing icon and fullscreen overlay navigation. Reusable React navigation with premium open, close, and hover motion.
- Elastic Sidebar NavigationDemoSidebar with elastic spring physics and overshoot animation on open and close. Animated navigation menu for interactive UI and landing page headers.
Need a custom build? Contact ZiyadX to adapt these patterns for your brand, SaaS, or e-commerce site.