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 2 of 6

Live preview Navigation

Split Line Gradient Flow Navbar

Nav links separated by animated gradient line dividers.

#hover #animation #gradient

Live preview Navigation

Stamp Ink Press Nav

Active link stamps down with an inked impression effect.

#hover #transform #shadow

Live preview Navigation

Square Step Indicator

Step indicator with square markers.

#hover #transform

Live preview Navigation

Sticky Note Curl Nav

Nav items styled as sticky notes with curling corners on hover.

#hover #gradient #transform

Live preview Navigation

Pentagon Background Tabs

Tabs with polygon clip-path background morph.

#hover #gradient

Live preview Navigation

Flip Card Tabs

Tabs that flip like cards revealing back face.

#hover #gradient #transform

Live preview Navigation

Morph Square Tabs

Active tab morphs into a square shape.

#hover #shadow

Live preview Navigation

Morph Triangle Tabs

Active tab morphs with triangle clip-path.

#hover #gradient

Live preview Navigation

Neon Active Tabs

Neon glowing active tab indicator.

#hover #transform #shadow

Live preview Navigation

Pill Bounce Tabs

Pill tabs that bounce into place on active.

#hover #transform #shadow

Live preview Navigation

Pill Morph Tabs

Tabs that morph into pill shape on active.

#hover #shadow

Live preview Navigation

Segmented Control Tabs

iOS-style segmented control tabs.

#hover #shadow

Live preview Navigation

Top Border Tabs

Tabs with active top border indicator.

#hover #border

Live preview Navigation

Underline Grow Tabs

Tabs with underline that grows from left on active.

#hover #border

Live preview Navigation

Taffy Pull Navbar

Links stretch like taffy when hovered, with a sticky transition.

#hover #transform

Live preview Navigation

Text Cinematic Glow Navbar

Active link has a wide cinematic soft-glow halo behind the text.

#hover #gradient #shadow

Live preview Navigation

Text Glitch Hover Navbar

Hovered links glitch with a split-color RGB shift effect.

#hover #animation #shadow

Live preview Navigation

Text Glow Pulse Link Navbar

Each link has a pulsing text glow that intensifies on hover.

#hover #animation #shadow

Live preview Navigation

Text Shadow Dance Navbar

Hovered links perform a layered text-shadow dance animation.

#hover #animation #shadow

Live preview Navigation

Uppercase Grow Navbar

Hovered link transforms to uppercase with smooth spacing growth.

#hover #transform #shadow

Live preview Navigation

3D Tilt Hover Navbar

Each link tilts in 3D space responding to hover with depth perspective.

#hover #gradient #transform

Live preview Navigation

Transparent Overlay Navbar

Transparent navbar that turns solid on hover.

#hover #shadow

Live preview Navigation

Chevron Collapsible Treeview

Tree menu where chevrons rotate as the group expands on hover.

#hover #transform

Live preview Navigation

Connector Line Treeview

Tree menu with L-shaped connector lines linking parents to children.

#hover #transform #border

Live preview Navigation

Folder Expand Treeview

Tree menu where folder groups expand their children on hover.

#hover

Live preview Navigation

Vertical Tab Right Arrow Pointer

Vertical tabs with a right-pointing arrow on the active item.

#hover #transform #border

Live preview Navigation

Vertical Tab Left Border Active

Vertical tabs with a glowing left border on the active item.

#hover #shadow #border

Live preview Navigation

Vertical Tab Circle Bg Active

Vertical tabs with a circular active background indicator.

#hover #transform #shadow

Live preview Navigation

Vertical Tab Collapsible Tree

Vertical tabs in a collapsible tree structure with sub-items.

#hover

Live preview Navigation

Vertical Tab Color Shift

Vertical tabs that shift through accent colors on hover.

#hover #shadow

Live preview Navigation

Vertical Tab Counter Badge

Vertical tabs with a counter badge showing item counts.

#hover

Live preview Navigation

Vertical Tab Flip Card

Vertical tabs that flip in 3D when active, revealing content.

#hover #transform #shadow

Live preview Navigation

Vertical Tab Icon Leading

Vertical tabs with leading icons that scale on active.

#hover #transform

Live preview Navigation

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

#hover #animation #transform

Live preview Navigation

Vertical Tab Rounded Soft

Soft rounded vertical tabs with gentle hover transitions.

#hover #shadow

Live preview Navigation

Vertical Tab Square Sharp

Sharp square vertical tabs with brutalist styling.

#hover #transform #border

Live preview Navigation

Vertical Tab Tree Branch

Vertical tabs with a tree branch connector line between levels.

#hover

Live preview Navigation

Vertical Tab Underline Slide

Vertical tab nav where the active underline slides between items.

#hover #transform #shadow

Live preview Navigation

Diagonal Wipe Reveal Nav

Diagonal wipe transitions across the nav when hovering different items.

#hover #gradient #transform

Live preview Navigation

Wipe Left Reveal Nav

Active tab revealed by a leftward wipe that sweeps across the nav.

#hover #gradient #transform

Live preview Navigation

Wobble Jiggle Navbar

Links wobble-jiggle on hover using a keyframe animation.

#hover #animation #transform

Live preview Navigation

3D Perspective Navbar

Navbar with 3D hover lift and perspective transform.

#hover #transform #shadow

Live preview Navigation

3D Tilt X Navbar

Active link tilts on the X-axis with deep perspective.

#hover #transform #shadow

Live preview Navigation

3D Tilt XY Navbar

Active link tilts diagonally on both X and Y axes.

#hover #transform #shadow

Live preview Navigation

3D Tilt Y Navbar

Active link tilts on the Y-axis with deep perspective.

#hover #transform #shadow

Live preview Navigation

Arrow 3D Perspective Navbar

Nav with 3D perspective arrow-shaped active indicator.

#hover #transform #shadow

Live preview Navigation

Arrow Asterisk Spin Navbar

Nav with spinning asterisk arrow accent on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Bounce Drop Navbar

Nav with arrow indicators that bounce-drop on hover.

#hover #animation #transform

Live preview Navigation

Arrow Chevron Point Navbar

Nav with chevron-pointed active indicators.

#hover #transform

Live preview Navigation

Arrow Circle Dot Navbar

Nav with circular dot arrow indicators on active items.

#hover #shadow #border

Live preview Navigation

Arrow Cross Mark Navbar

Nav with cross-mark arrow accent on the active item.

#hover #transform

Live preview Navigation

Arrow Diagonal Travel Navbar

Nav links travel diagonally on hover with arrow accents.

#hover #transform

Live preview Navigation

Arrow Diamond Shape Navbar

Nav with diamond-shaped arrow indicators on active items.

#hover

Live preview Navigation

Arrow Double Pointer Navbar

Nav with double-pointer arrow indicators on the active item.

#hover

Live preview Navigation

Arrow Filled Bg Navbar

Nav with arrow-shaped filled background on the active item.

#hover

Live preview Navigation

Arrow Flip 3D Navbar

Nav arrow indicators flip in 3D on hover.

#hover #transform #3d

Live preview Navigation

Arrow Floating Bob Navbar

Nav links with floating arrow indicators that bob up and down.

#hover #animation #transform

Live preview Navigation

Arrow Flow Down Drop Navbar

Vertical nav with arrow indicators flowing downward.

#hover

Live preview Navigation

Arrow Flow Left Slide Navbar

Nav with arrow-shaped active indicator sliding left on hover.

#hover

Live preview Navigation

Arrow Flow Right Slide Navbar

Nav with arrow-shaped active indicator sliding right on hover.

#hover

Live preview Navigation

Arrow Flow Up Rise Navbar

Vertical nav with arrow indicators rising upward.

#hover

Live preview Navigation

Arrow Glow Active Navbar

Nav with glowing arrow accent on the active item.

#hover #shadow

Live preview Navigation

Arrow Gradient Flow Navbar

Nav with gradient animated arrow indicators.

#hover #animation #gradient

Live preview Navigation

Arrow Grow Expand Navbar

Nav arrow indicators grow and expand on hover.

#hover #transform

Live preview Navigation

Arrow Heart Beat Navbar

Nav with heart-beat arrow accent on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Neon Active Navbar

Nav with neon glowing arrow on the active item.

#hover #animation #shadow

Live preview Navigation

Arrow Outline Draw Navbar

Nav with arrow outline drawn on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Pentagon Shape Navbar

Nav links shaped as pentagons with arrow flow.

#hover

Live preview Navigation

Arrow Pill Shape Navbar

Nav with pill-shaped arrow indicators on active items.

#hover

Live preview Navigation

Arrow Pulse Throb Navbar

Nav arrow indicators pulse and throb on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Rotate Spin Navbar

Nav arrow indicators rotate-spin when hovered.

#hover #transform

Live preview Navigation

Arrow Shrink Compress Navbar

Nav links compress and shrink with arrow accent on hover.

#hover #transform

Live preview Navigation

Arrow Slide Track Navbar

Nav links slide along a track with arrow indicator.

#hover #transform

Live preview Navigation

Arrow Square Dot Navbar

Nav with square dot arrow indicators on active items.

#hover #shadow #border

Live preview Navigation

Arrow Star Burst Navbar

Nav with star-burst arrow accent on the active item.

#hover #transform

Live preview Navigation

Arrow Triangle Point Navbar

Nav with triangle-pointed active indicators.

#hover

Live preview Navigation

Arrow Triple Stack Navbar

Nav with triple-stacked arrow indicators on the active item.

#hover #transform

Live preview Navigation

Arrow Wave Flow Navbar

Nav with wavy arrow flow separators between items.

#hover #animation #transform

Live preview Navigation

Arrow Zigzag Flow Navbar

Nav with zigzag-shaped arrow flow separators.

#hover #animation #transform

Live preview Navigation

Aurora Background Navbar

Navbar with aurora-like animated gradient blobs.

#hover #animation #gradient

Live preview Navigation

Blurred Glass Navbar

Navbar with heavy backdrop blur and gradient border.

#hover #gradient #shadow

Live preview Navigation

Bob Buoyant Navbar

Links bob up and down buoyantly on hover.

#hover #animation #gradient

Live preview Navigation

Bordered Bottom Navbar

Navbar with thick gradient bottom border.

#hover #gradient #shadow

Live preview Navigation

Bordered Top Navbar

Navbar with thick gradient top border.

#hover #gradient #shadow

Live preview Navigation

Fixed Bottom Nav

Fixed bottom navigation bar with icons.

#hover #transform

Live preview Navigation

Glass Bottom Nav

Glassmorphism bottom navigation.

#hover #shadow #border

Live preview Navigation

Glow Bottom Nav

Bottom nav with glowing active item.

#hover #shadow #border

Live preview Navigation

Gradient Bottom Nav

Bottom nav with gradient active icon.

#hover #gradient #transform

Live preview Navigation

Bounce Drop Navbar

Hovered links drop and bounce in from above with an overshoot.

#hover #transform

Live preview Navigation

Breathe Glow Navbar

Active link breathes with a soft expanding glow halo.

#hover #animation #shadow

Live preview Navigation

Brutalist Navbar

Raw brutalist navbar with thick borders and offset shadow.

#hover #transform #shadow

Live preview Navigation

3D Rotate Hamburger

Hamburger with full 3D rotation on hover.

#hover #transform #border

Live preview Navigation

Bounce Hamburger

Hamburger that bounces on hover.

#hover #animation #transform