Live preview Navigation
Navigation — 562 CSS effects
Menus, tabs, breadcrumbs, and navigation components.
Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.
Page 4 of 6
Live preview Navigation
Iris Aperture Spin Nav
Iris aperture blades that spin open like a camera shutter on hover.
Live preview Navigation
Iris Aperture Zoom Nav
Iris aperture that zooms open to reveal nav links in the center.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
3D Perspective Modal Navbar
Modal nav that flies in from depth using perspective translateZ.
Live preview Navigation
Blurred Backdrop Modal Navbar
Centered modal nav over a heavily blurred colored backdrop.
Live preview Navigation
3D Flip In Modal Navbar
Centered modal nav that flips in on the Y axis with 3D depth.
Live preview Navigation
Fullscreen Modal Cover Navbar
Fullscreen modal cover with large centered nav links.
Live preview Navigation
Glass Popup Modal Navbar
Glassmorphism modal popup nav with frosted translucent surface.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
OKLCH Menu Bar
Bar, hover and active layers are three color-mix steps off a single OKLCH accent.
Live preview Navigation
Circular Orbit Menu
Center button with menu items orbiting in a circle around it.
Live preview Navigation
Planet Rotation Menu
Center sun with planet items rotating around it on a continuous orbit path.
Live preview Navigation
Ring Spin Menu
Menu items arranged on a ring that continuously rotates with hover-pause.
Live preview Navigation
Solar System Menu
Solar system layout with planets on concentric orbit rings of different speeds.
Live preview Navigation
Dark Blurred Overlay Navbar
Dark overlay with heavy backdrop blur covering the page content.
Live preview Navigation
Bottom Sheet Handle Navbar
Bottom sheet with a draggable handle and pull-up indicator.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Perspective Tilt Navbar
Active link lifts forward in 3D perspective with translateZ.
Live preview Navigation
Pill Highlight Nav
A rounded highlight sits behind the hovered item and scales in from its centre.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Polaroid Tilt Stack Nav
Polaroid-photo style nav items stacked at alternating tilts.
Live preview Navigation