Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
Back to catalog

Navigation & UI

Animated menus, UI components and anchor positioning.

How to create navigation that impresses? These 36 navigation components cover all modern patterns: animated hamburgers, mega-menus, sliding sidebars, interactive tabs and breadcrumbs. Each component is responsive, keyboard-accessible and comes with its source code.

Home Services Contact

Underline Expand

Line that extends from the center.

CSS Center

Underline Slide

Line that slides from right to left.

CSS Slide

Background Fill

Background that fills on hover.

CSS Fill

Bracket Hover

Brackets that appear on hover.

CSS Text

Hamburger Menu

Hamburger to cross animation.

CSS Toggle

Pill Indicator

Animated indicator that follows the selection.

JS Tab

Dropdown Reveal

Dropdown menu with fade/slide animation.

CSS Dropdown

Morphing Hamburger

Hamburger icon that morphs into an X with smooth animation.

CSS Morph

Tab Slider

Tabs with sliding indicator that follows the active tab.

JS Slider

Breadcrumb Animated

Animated breadcrumb with interactive chevrons.

CSS Breadcrumb

Sticky Header Detection

Sticky header with Intersection Observer that detects scroll and changes style.

JS Sticky Observer

Custom Bezier Transition

Color transition with custom cubic-bezier curve for smooth movement.

CSS Bezier Smooth

Floating Indicator

Floating indicator with smooth cubic-bezier transition. Inspired by CTA Gallery.

JS Nav Smooth

Stagger Menu Reveal

Menu with staggered animation - each item appears with a progressive delay.

CSS Stagger Reveal
Content of the first section with smooth height animation.
Second section with different content.
Third and final section.

Accordion Basic

Expandable sections with smooth height animation. Multiple sections can be open.

CSS JS Interactive

Accordion Single

Only one section open at a time. Others close automatically.

CSS JS Exclusive

Tabs Animated

Tabs with indicator that slides between selections.

CSS JS Transition

Toast Success

Green success notification with slide animation. Disappears after 3 seconds.

JS Animation Feedback

Toast Error

Red error notification to alert the user. Auto-dismiss after 3 seconds.

JS Animation Alert

Toast Stack

Multiple toasts stack up with elegant spacing.

JS Stack Queue

Skeleton Card

Card placeholder with shimmer effect during loading.

CSS Loading Shimmer

Skeleton Text

Text placeholder with elegant loading animation.

CSS Loading Placeholder

Tooltip Fade

Tooltip that fades in on hover.

CSS Hover Fade

Tooltip Arrow

Tooltip with arrow pointer and rise animation.

CSS Hover Arrow

Modal Slide

Modal that slides from the bottom of the screen with blur overlay.

CSS JS Overlay

Dropdown Animated

Dropdown menu with cascading reveal animation.

CSS JS Stagger

Smart Tooltip System

Tooltips that automatically flip based on viewport position using position-try-fallbacks.

CSS JS Anchor
A
B
C
D

Connected Nodes

Draggable nodes connected by SVG lines that update in real time.

SVG JS Drag

Floating Action Labels

Floating labels anchored to action buttons that appear on hover with scroll-aware repositioning.

CSS Hover Position

Popover Menu Chain

Chained popover menus with submenus positioned relative to their parent using the Popover API pattern.

JS Popover Menu

Annotation Layer

Floating annotations anchored to specific content areas with smart stacking.

CSS Hover Annotation

Dynamic Badge Positioning

Notification badges anchored to avatar corners, adapting to resize.

CSS Badge Responsive

Guided Tour Spotlight

Step-by-step onboarding with spotlight anchored to UI elements and arrow indicator.

JS Tour Anchor

Context Menu

Context menu positioned at cursor with edge-of-viewport flip logic.

JS Click Position

Footnote Popover

Academic footnotes appearing as popovers near reference markers.

CSS Hover Popover

Chart Data Labels

Data labels anchored to chart points with automatic overlap avoidance.

CSS Hover DataViz

Command Palette ⌘K

⌘K command palette built on the native popover API: filtering search, keyboard navigation, light-dismiss. The modern SaaS pattern, without the JS overhead.

💡 Perfect for: fast SaaS app navigation, global search, power-user shortcuts, action menu, back-office.

Popover API ⌘K Navigation Premium

Frequently Asked Questions

How to create an animated hamburger menu in CSS? +

Use 3 spans inside a button. On click, apply transforms: the middle span disappears (opacity:0), the first rotates 45deg and the third -45deg. Use transition: all 0.3s for a smooth animation.

How to build a CSS mega-menu? +

Place the mega-menu in absolute position below the parent item. Use an invisible div (pseudo-element ::before) between the link and the menu to prevent the hover from being lost. Animate the appearance with opacity and transform.

What is the best practice for a mobile menu? +

Use a side panel (sidebar) that slides in from the left or right with transform: translateX(). Add a semi-transparent overlay. Close on overlay click, close button, and Escape key. Lock the body scroll.

How to make a keyboard-accessible menu? +

Each item must be navigable with Tab. Submenus open with Enter or Arrow Down. Escape closes the submenu. Add aria-expanded on toggle buttons and role=navigation on the nav element.

How to create animated CSS tabs? +

Use hidden radio buttons (:checked) or JavaScript to manage the active state. Animate an indicator (pseudo-element) under the active tab with transition on left and width. Content changes with a fade or slide.

Similar Categories

🔘

Buttons

27 effects

 📝

Forms

20 effects

 🔧

Utilities

40 effects