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

Live preview Navigation

Floating Bottom Nav

Floating bottom navigation with pill design.

#hover #gradient #shadow

Live preview Navigation

Horizontal Bottom Dot Nav

Horizontal dot navigation at bottom.

#hover #transform #shadow

Live preview Navigation

Color Shift Navbar

Navbar with hue-shifting links on hover.

#hover #animation #gradient

Live preview Navigation

3D Chevron Breadcrumbs

Breadcrumbs with 3D chevron separators.

#hover #gradient #transform

Live preview Navigation

Arrow Curve Bend Navbar

Nav with curve-bent arrow separators between items.

#hover

Live preview Navigation

Neon Active Drawer Navbar

Drawer with a pulsing neon active indicator on the active link.

#hover #animation #shadow

Live preview Navigation

Float Rise Navbar

Hovered links gently rise and float with a soft glow underneath.

#hover #gradient #transform

Live preview Navigation

Arrow Hexagon Shape Navbar

Nav links shaped as hexagons with arrow flow.

#hover

Live preview Navigation

Underline Active Breadcrumbs

Breadcrumbs with underline on active item.

#hover #transform

Live preview Navigation

Elevated Card Navbar

Navbar styled as an elevated card with deep shadow.

#hover #shadow

Live preview Navigation

Floating Dock Navbar

macOS-style floating dock navbar with bouncy hover.

#hover #gradient #transform

Live preview Navigation

Glass Light Navbar

Light glass navbar with subtle backdrop tint.

#hover #gradient #shadow

Live preview Navigation

Vertical Tab Gradient Bg Flow

Vertical tabs with an animated gradient background flow on the active.

#hover #animation #gradient

Live preview Navigation

3D Arrow Breadcrumbs

Breadcrumbs with 3D arrow separators.

#hover #gradient #transform

Live preview Navigation

Curve Arrow Breadcrumbs

Breadcrumbs with curved arrow separators.

#hover #transform

Live preview Navigation

Icon Text Breadcrumbs

Breadcrumbs with icons and text.

#hover

Live preview Navigation

Line Separator Breadcrumbs

Breadcrumbs with vertical line separators.

#hover #transform

Live preview Navigation

Pipe Separator Breadcrumbs

Breadcrumbs with pipe separators.

#hover

Live preview Navigation

Multi Level Drawer Navbar

Multi-level drawer with progressively indented sub-sections.

#hover #border

Live preview Navigation

Stack Cards Drawer Navbar

Drawer with stacked card-style links that fan out on hover.

#hover #transform #shadow

Live preview Navigation

Magnetic Pull Navbar

Links magnetically grow toward the hovered item while neighbors shrink back.

#hover #transform #shadow

Live preview Navigation

Neon Edge Navbar

Navbar with neon glowing edges.

#hover #transform #shadow

Live preview Navigation

Dark Fade Overlay Navbar

Side panel nav with a fading dark overlay backdrop.

#hover #animation #gradient

Live preview Navigation

Aurora Gradient Overlay Navbar

Modal nav over an aurora gradient animated background.

#hover #animation #gradient

Live preview Navigation

Light Fade Overlay Navbar

Side panel nav with a fading light translucent backdrop.

#hover #animation #gradient

Live preview Navigation

Active Flip Pagination

Active page flips on Y axis.

#hover #transform #shadow

Live preview Navigation

Pulse Throb Navbar

Active link throbs with a pulsing scale animation.

#hover #animation #transform

Live preview Navigation

Square Active Tabs

Square-shaped active tab indicator.

#hover

Live preview Navigation

Thick Underline Tabs

Tabs with a thick underline indicator.

#hover #border

Live preview Navigation

Text Blur Focus Navbar

All links blur except the hovered one which comes into sharp focus.

#hover #filter

Live preview Navigation

Text Reveal Mask Navbar

Hovered link text reveals through a vertical wipe mask.

#hover

Live preview Navigation

Text Slide Down Mask Navbar

Link text slides down, replaced by a duplicate from above.

#hover

Live preview Navigation

Vertical Tab Glow Active

Vertical tabs with a glowing active item casting ambient light.

#hover #shadow

Live preview Navigation

Circle Hamburger

Hamburger inside a circle that morphs on hover.

#hover #transform #border

Live preview Navigation

Flip Hamburger

Hamburger that flips on Y axis.

#hover #transform #border

Live preview Navigation

Spin Hamburger

Hamburger that spins 180 degrees on hover.

#hover #transform #border

Live preview Navigation

To Close Hamburger

Hamburger that becomes an X close icon on hover.

#hover #transform #border

Live preview Navigation

To Minus Hamburger

Hamburger that becomes a minus line on hover.

#hover #transform #border

Live preview Navigation

To Plus Hamburger

Hamburger that becomes a plus sign on hover.

#hover #transform #border

Live preview Navigation

Claymorphism Navbar

Soft clay-style navbar with rounded pill links.

#hover #transform #shadow

Live preview Navigation

Fuzzy Match Palette

Command palette that highlights matched letters in the query string.

#hover #border

Live preview Navigation

Animated Arrow Breadcrumbs

Breadcrumbs with animated moving arrows.

#hover #animation #transform

Live preview Navigation

Chevron Outline Breadcrumbs

Breadcrumbs with outlined chevron shapes.

#hover #border

Live preview Navigation

Curve Line Breadcrumbs

Breadcrumbs with curved SVG-like line separators.

#hover #transform

Live preview Navigation

Dashed Trail Breadcrumbs

Breadcrumbs with dashed connecting lines.

#hover #transform #border

Live preview Navigation

Greater Than Breadcrumbs

Breadcrumbs with > separators.

#hover

Live preview Navigation

Hover Glow Breadcrumbs

Breadcrumbs with glow on hover.

#hover #shadow

Live preview Navigation

Hover Grow Breadcrumbs

Breadcrumbs that grow on hover.

#hover #gradient #transform

Live preview Navigation

Hover Shift Breadcrumbs

Breadcrumbs that shift right on hover.

#hover #transform

Live preview Navigation

Neon Separator Breadcrumbs

Dark mode breadcrumbs with neon separators.

#hover #transform #shadow

Live preview Navigation

Progress Bar Breadcrumbs

Breadcrumbs with a progress bar underneath.

#hover #gradient

Live preview Navigation

Text Only Breadcrumbs

Minimal text-only breadcrumbs.

#hover

Live preview Navigation

Triangle Tip Breadcrumbs

Breadcrumbs with triangle pointed tips.

#hover #gradient #transform

Live preview Navigation

Zigzag Trail Breadcrumbs

Breadcrumbs with zigzag pattern separators.

#hover #transform

Live preview Navigation

Curtain Split Reveal Nav

Two curtains split apart horizontally to reveal the nav links.

#hover #gradient #transform

Live preview Navigation

Curved Bottom Navbar

Navbar with a curved bottom edge using border-radius.

#hover #shadow

Live preview Navigation

Dark Minimal Navbar

Minimal dark navbar with subtle hover underlines.

#hover #transform #border

Live preview Navigation

Deep Shadow Navbar

Navbar with deep layered shadow for elevation.

#hover #transform #shadow

Live preview Navigation

Horizontal Top Dot Nav

Horizontal dot navigation at top.

#hover #transform #shadow

Live preview Navigation

Accordion Collapse Drawer Navbar

Drawer with collapsible accordion groups using details/summary.

#hover

Live preview Navigation

Fixed Edge Drawer Navbar

Drawer fixed to the viewport edge with a sharp vertical layout.

#hover #transform #border

Live preview Navigation

Glass Panel Drawer Navbar

Drawer with frosted glass panel styling over a colored background.

#hover #shadow #border

Live preview Navigation

Gradient Panel Drawer Navbar

Drawer with a gradient panel background and active indicator.

#hover #gradient #border

Live preview Navigation

Light Panel Drawer Navbar

Light panel drawer with clean card-style spacing.

#hover #shadow #border

Live preview Navigation

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

#hover #animation #border

Live preview Navigation

Push Content Right Drawer Navbar

Right drawer pushes the main content leftward when opening.

#hover #animation #border

Live preview Navigation

Rounded Pill Drawer Navbar

Drawer with rounded pill-style links and soft pink palette.

#hover #border

Live preview Navigation

Sticky Side Drawer Navbar

Sticky left drawer that stays in place during scroll.

#hover #transform #shadow

Live preview Navigation

Tree Nested Drawer Navbar

Vertical drawer with nested tree-style sub-links indentation.

#hover #border

Live preview Navigation

Elastic Snap Navbar

Links snap up elastically on hover and settle with a bounce.

#hover #transform

Live preview Navigation

Forest Green Navbar

Forest green navbar with earthy tones.

#hover #gradient #shadow

Live preview Navigation

Glass Dark Navbar

Dark glass navbar with white border highlight.

#hover #shadow #border

Live preview Navigation

Glass Tint Navbar

Glass navbar with colored tint overlay.

#hover #gradient #shadow

Live preview Navigation

Glow Line Navbar

Navbar with neon glowing line under active link.

#hover #animation #shadow

Live preview Navigation

Gradient Flow Navbar

Navbar with an animated gradient background flowing across links.

#hover #animation #gradient

Live preview Navigation

3D Icon Nav

3D extruded icon navigation.

#hover #gradient #transform

Live preview Navigation

Jello Wiggle Navbar

Links wiggle like jello with a skew-based animation on hover.

#hover #animation #transform

Live preview Navigation

Liquid Morph Tab Navbar

Active tab morphs between links like a liquid blob.

#hover #shadow

Live preview Navigation

3D Pagination

Pagination with 3D extruded active button.

#hover #transform #shadow

Live preview Navigation

Active Glow Pagination

Active page has glowing aura.

#hover #shadow #border

Live preview Navigation

Arrow Circle Pagination

Pagination with circular arrow buttons.

#hover #transform

Live preview Navigation

Number Glow Pagination

Active number has glowing aura.

#hover #shadow

Live preview Navigation

Step Bar Fill Nav

Horizontal stepper where each segment fills a progress bar on hover.

#hover #gradient #transform

Live preview Navigation

Underline Segmented Control

Segmented control with an underline indicator that slides between items.

#hover #transform #border

Live preview Navigation

Slant Perspective 3D Navbar

Nav with a perspective tilt creating a 3D slanted look.

#hover #transform #shadow

Live preview Navigation

Split Divider Line Navbar

Nav links separated by thin vertical divider lines.

#hover #shadow