Navigation Effects
50+ top nav, bottom nav, and alternative navigation patterns
Shrinking Header
Compresses on scroll
Brand
HomeAboutContact
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Content 8
Transparent to Solid
Background appears on scroll
Logo
HomeShopBlog
Section 1
Section 2
Section 3
Section 4
Section 5
Section 6
Hide on Scroll
Disappears when scrolling down
HeaderScroll to hide ↓
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Content 8
Expanding Search
Search bar expands on click
Site
Split Header
Two-tier navigation
Free shipping over $50
HelpTrack Order
Store
ShopSaleNew
Floating Header
Detached from edges
HomeFeaturesPricing
Animated Underline
Sliding indicator
Glass Header
Frosted glass effect
Glass
HomeAboutContact
Side Drawer
Slide-in menu
Slide-Over Panel
Right side panel
Modal Popup
Centered overlay
Bottom Sheet
Slides up from bottom
Command Palette
Spotlight-style search
Press ⌘K or click button
Animated Tab Bar
Sliding pill indicator
