Navigation — 562 CSS effects

Live preview Navigation

Morph to X Hamburger

Hamburger menu icon that morphs to X on hover.

Live preview Navigation

Rotate Hamburger

Hamburger with rotating lines on hover.

Live preview Navigation

Square Hamburger

Hamburger inside a square that morphs on hover.

Live preview Navigation

To Arrow Hamburger

Hamburger that becomes an arrow on hover.

Live preview Navigation

To Dots Hamburger

Hamburger that becomes 3 vertical dots on hover.

Live preview Navigation

To Grid Hamburger

Hamburger that becomes a 3x3 grid of dots on hover.

Live preview Navigation

Center Logo Navbar

Navbar with the logo centered and split links.

Live preview Navigation

Color Ripple Hover Navbar

Color ripples outward from each link on hover with a radial gradient.

Live preview Navigation

Keyboard Command Palette

Command palette where each item shows its keyboard shortcut hint.

Live preview Navigation

Recent Commands Palette

Palette grouping commands into Recent and All sections.

Live preview Navigation

Search Command Palette

Command palette with a search input and filtered command rows.

Live preview Navigation

Coupon Clip Corner Nav

Nav items styled as coupons with clipped circular corners.

Live preview Navigation

Filled Arrow Breadcrumbs

Breadcrumbs styled as filled arrow shapes.

Live preview Navigation

Arrow Flow Breadcrumbs

Breadcrumbs with arrow-shaped separators.

Live preview Navigation

Outline Arrow Breadcrumbs

Breadcrumbs with outlined arrow shapes.

Live preview Navigation

Background Highlight Breadcrumbs

Breadcrumbs with hover background highlight.

Live preview Navigation

Chevron Breadcrumbs

Breadcrumbs with chevron separators.

Live preview Navigation

Chevron Fill Breadcrumbs

Breadcrumbs with filled chevron-shaped items.

Live preview Navigation

Circle Background Breadcrumbs

Breadcrumbs with circular item backgrounds.

Live preview Navigation

Color Active Breadcrumbs

Breadcrumbs with color change on active item.

Live preview Navigation

Diagonal Arrow Breadcrumbs

Breadcrumbs with diagonal arrow separators.

Live preview Navigation

Dot Separator Breadcrumbs

Breadcrumbs with dot separators.

Live preview Navigation

Dot Trail Breadcrumbs

Breadcrumbs with a trail of dots leading to active.

Live preview Navigation

Dotted Trail Breadcrumbs

Breadcrumbs with dotted connecting lines.

Live preview Navigation

Floating Arrow Breadcrumbs

Breadcrumbs with floating arrow separators on hover.

Live preview Navigation

Glow Active Breadcrumbs

Breadcrumbs with glow on active item.

Live preview Navigation

Glow Trail Breadcrumbs

Breadcrumbs with a glowing connecting trail.

Live preview Navigation

Gradient Arrow Breadcrumbs

Breadcrumbs with gradient arrow separators.

Live preview Navigation

Home Icon Breadcrumbs

Breadcrumbs starting with a home icon.

Live preview Navigation

Hover Rotate Breadcrumbs

Breadcrumbs that rotate slightly on hover.

Live preview Navigation

Hover Underline Breadcrumbs

Breadcrumbs with animated underline on hover.

Live preview Navigation

Mini Tab Breadcrumbs

Breadcrumbs styled as mini tabs.

Live preview Navigation

Pentagon Shape Breadcrumbs

Breadcrumbs shaped as pentagons with point tips.

Live preview Navigation

Pill Active Breadcrumbs

Breadcrumbs with pill shape on active item.

Live preview Navigation

Pill Background Breadcrumbs

Breadcrumbs with pill-shaped items.

Live preview Navigation

Progress Line Breadcrumbs

Breadcrumbs with a connecting progress line.

Live preview Navigation

Shadow Active Breadcrumbs

Breadcrumbs with shadow on active item.

Live preview Navigation

Slash Separator Breadcrumbs

Breadcrumbs with slash separators.

Live preview Navigation

Square Background Breadcrumbs

Breadcrumbs with square item backgrounds.

Live preview Navigation

Step Counter Breadcrumbs

Breadcrumbs with numbered step counter.

Live preview Navigation

Vertical Line Breadcrumbs

Vertical breadcrumbs with line connectors.

Live preview Navigation

Wavy Trail Breadcrumbs

Breadcrumbs with wavy connecting separators.

Live preview Navigation

Curtain Fall Reveal Nav

Nav links revealed as a curtain falls downward on hover.

Live preview Navigation

Curtain Rise Reveal Nav

Nav links revealed as a curtain rises upward on hover.

Live preview Navigation

Dark Blur Navbar

Dark themed navbar with frosted blur background.

Live preview Navigation

3D Dot Nav

3D extruded dot navigation.

Live preview Navigation

Circle Dot Nav

Dot navigation in a circle container.

Live preview Navigation

Floating Bottom Dot Nav

Floating dot navigation at bottom.

Live preview Navigation

Floating Left Dot Nav

Floating dot navigation on left with shadow.

Live preview Navigation

Floating Right Dot Nav

Floating dot navigation with shadow.

Live preview Navigation

Floating Top Dot Nav

Floating dot navigation at top.

Live preview Navigation

Glow Dot Nav

Dot nav with glowing active dot.

Live preview Navigation

Gradient Dot Nav

Dot nav with gradient active dot.

Live preview Navigation

Neon Dot Nav

Neon themed dot navigation.

Live preview Navigation

Square Dot Nav

Dot nav with square-shaped dots.

Live preview Navigation

Vertical Left Dot Nav

Vertical dot navigation fixed to left side.

Live preview Navigation

Vertical Right Dot Nav

Vertical dot navigation fixed to right side.

Live preview Navigation

3D Perspective Drawer Navbar

Drawer with a 3D perspective active link lifting forward.

Live preview Navigation

Brutalist Block Drawer Navbar

Drawer with raw brutalist block styling, sharp borders, and offset shadow.

Live preview Navigation

Cascading Multi Drawer Navbar

Multi-level cascading drawer with progressively indented levels.

Live preview Navigation

Collapsible Arrow Drawer Navbar

Drawer with collapsible sections toggled by an arrow indicator.

Live preview Navigation

Dark Panel Drawer Navbar

Dark panel drawer with subtle border accents.

#hover #animation #transform

Live preview Navigation

Floating Overlay Drawer Navbar

Floating drawer that overlays content without pushing it.

Live preview Navigation

Glow Edge Drawer Navbar

Drawer with a glowing active edge in indigo neon.

Live preview Navigation

Nested Accordion Drawer Navbar

Accordion drawer with expandable sections revealing sub-links.

Live preview Navigation

Neumorphic Panel Drawer Navbar

Drawer with soft neumorphic embossed styling.

Live preview Navigation

Blur Overlay Drawer Navbar

Drawer over a frosted blurred backdrop.

#hover #animation #transform

Live preview Navigation

Dim Overlay Drawer Navbar

Drawer over a dimmed dark overlay backdrop.

Live preview Navigation

Pin Sticky Drawer Navbar

Drawer with a pinned sticky header that stays at the top.

Live preview Navigation

Pinned Side Drawer Navbar

Pinned left-side drawer that persists beside the main content.

Live preview Navigation

3D Left Drawer Navbar

Left drawer with 3D perspective slide revealing main nav beside it.

Live preview Navigation

3D Right Drawer Navbar

Right drawer with 3D perspective slide.

Live preview Navigation

Square Sharp Drawer Navbar

Drawer with sharp square corners and bold contrast.

Live preview Navigation

3D Flip Card Navbar

Each link is a 3D flip card revealing a back face on hover.

#hover #transform #3d

Live preview Navigation

Horizontal Flip Navbar

Links flip horizontally (Y-axis) on hover for a side reveal.

#hover #transform #3d

Live preview Navigation

Vertical Flip Navbar

Links flip vertically (X-axis) on hover for a top-down reveal.

#hover #transform #3d

Live preview Navigation

Floating Action Navbar

Navbar with floating action-style buttons.

Live preview Navigation

Floating Glass Navbar

Detached floating glass navbar with strong blur.

Live preview Navigation

Floating Pill Navbar

Floating rounded pill navbar with a sliding active indicator.

Live preview Navigation

Frosted Edge Navbar

Frosted navbar with crystal edge highlight.

Live preview Navigation

Glassmorphism Navbar

Frosted glass navbar with backdrop blur and translucent background.

#hover #animation #shadow

Live preview Navigation

Glow Pulse Navbar

Navbar with pulsing glow around active link.

Live preview Navigation

Gradient Border Navbar

Navbar with animated gradient border around active link.

Live preview Navigation

Hamburger Morph Button

Three bars rotate and collapse into a clean cross when the menu is opened.

#transform #menu

Live preview Navigation

Has-Selector Active Nav

Selecting a radio marks the item active and shifts the whole bar accent with :has().

Live preview Navigation

Holographic Navbar

Navbar with holographic gradient overlay.

Live preview Navigation

Circle Icon Nav

Icon nav with circular icons.

Live preview Navigation

Floating Icon Nav

Floating icon navigation with shadow.

Live preview Navigation

Glow Icon Nav

Icon nav with glowing active icon.

Live preview Navigation

Gradient Icon Nav

Icon nav with animated gradient background.

Live preview Navigation

Horizontal Icon Nav

Horizontal icon-only navigation.

Live preview Navigation

Neon Icon Nav

Neon themed icon navigation.

Live preview Navigation

Vertical Icon Nav

Vertical icon navigation.