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 6 of 6
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Sticky Shrink Navbar
Navbar that shrinks padding on hover simulating sticky state.
Live preview Navigation
Live preview Navigation
Swing Pendulum Navbar
Links swing like a pendulum anchored at the top on hover.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Live preview Navigation
Icon Tab Bar
A mobile style tab bar where the selected item lifts and reveals its caption.
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
Text 3D Shadow Stack Navbar
Active link text projects a stacked 3D shadow forming extruded depth.
Live preview Navigation
Live preview Navigation
Text Gradient Shift Link Navbar
Hovered links shift a gradient text fill smoothly across the letters.
Live preview Navigation
Letter Spacing Grow Navbar
Hovered link expands its letter spacing for a refined editorial feel.
Live preview Navigation
Letter Spacing Shrink Navbar
Links have wide letter spacing that compresses on hover.
Live preview Navigation
Live preview Navigation
Text Rainbow Flow Navbar
Active link text flows through a rainbow gradient animation.
Live preview Navigation
Text Scramble Hover Navbar
Hovered links scramble their letters via a positional jitter animation.
Live preview Navigation
Live preview Navigation
Text Stroke Draw Navbar
Active link text has its stroke drawn animatedly via dash-offset.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Ticket Stub Perforate Nav
Nav styled as ticket stubs with perforated edges between items.
Live preview Navigation
Ticket Stub Tear Nav
Active ticket stub torn along its perforation edge on hover.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Sliding Underline Nav
Each link grows its own underline from the left as the pointer passes over it.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Vertical Tab Left Arrow Pointer
Vertical tabs with a left-pointing arrow on the active item.
Live preview Navigation
Vertical Tab Right Border Active
Vertical tabs with a right accent border on the active item.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Vertical Tab Dot Indicator
Vertical tabs with a glowing dot indicator on the active item.
Live preview Navigation
Vertical Tab Fill Bg
Vertical tabs with a sliding colored fill background on hover.
Live preview Navigation
Vertical Tab Icon Trailing
Vertical tabs with trailing right-side icons that pop on active.
Live preview Navigation
Live preview Navigation
Live preview Navigation
Vertical Tab Pill Morph
Vertical tabs where the active pill morphs smoothly between items.
Live preview Navigation
Vertical Tab Progress Bar
Vertical tabs with an active progress bar fill on the active item.
Live preview Navigation
Live preview Navigation
Vertical Tab Slide Content
Vertical tabs that slide horizontally revealing content offset.
Live preview Navigation
Vertical Tab Step Marker
Vertical tabs with numbered step markers like a wizard.
Live preview Navigation
Circle Mask Wipe Nav
Active indicator revealed by a circle that expands outward from the link.
Live preview Navigation
Wipe Right Reveal Nav
Active tab revealed by a rightward wipe sweeping across the nav bar.