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
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
Home Services Contact

Underline Slide

Line that slides from right to left.

CSS Slide
Home Services Contact

Background Fill

Background that fills on hover.

CSS Fill
Home Services Contact

Bracket Hover

Brackets that appear on hover.

CSS Text

Click to animate

Hamburger Menu

Hamburger to cross animation.

CSS Toggle
Home About Work

Pill Indicator

Animated indicator that follows the selection.

JS Tab
Menu
Option 1
Option 2
Option 3

Dropdown Reveal

Dropdown menu with fade/slide animation.

CSS Dropdown

Click to animate

Morphing Hamburger

Hamburger icon that morphs into an X with smooth animation.

CSS Morph
Dashboard Analytics Settings

Tab Slider

Tabs with sliding indicator that follows the active tab.

JS Slider

Breadcrumb Animated

Animated breadcrumb with interactive chevrons.

CSS Breadcrumb

Scroll to see the sticky header effect with intersection detection.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.

Sticky Header Detection

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

JS Sticky Observer
Home Services Contact

Custom Bezier Transition

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

CSS Bezier Smooth
Overview Features Pricing

Floating Indicator

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

JS Nav Smooth

Hover to reveal

Dashboard Analytics Settings Logout

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
Only one section can be open at a time.
Opening this section closes the others.
Perfect for FAQs and menus.

Accordion Single

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

CSS JS Exclusive
Welcome to the home page. The indicator slides smoothly.
Your user profile. Smooth animation between tabs.
Application settings. Elegant transition.

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
✎ Edit
♥ Favorites
↗ Share

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
CSS anchor positioning allows you to link an element Note: anchor-name in CSS to another in the DOM. This replaces manual JavaScript calculations Note: getBoundingClientRect() with a declarative solution featuring automatic fallbacks Note: position-try-fallbacks .

Annotation Layer

Floating annotations anchored to specific content areas with smart stacking.

CSS Hover Annotation
👤 3 Online
👤 12 Busy
👤 99+ Away

Dynamic Badge Positioning

Notification badges anchored to avatar corners, adapting to resize.

CSS Badge Responsive
Profile
Messages
Settings
Step 1/3
Access your profile and customize your avatar.

Guided Tour Spotlight

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

JS Tour Anchor
🖱 Right-click here

Context Menu

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

JS Click Position
CSS anchoring is a recent specification 1 [1] CSS Anchor Positioning, W3C Working Draft, 2024. that allows positioning an element relative to another 2 [2] Uses anchor-name and position-anchor in native CSS. without JavaScript. Browser support is growing 3 [3] Chrome 125+, Edge 125+. Firefox and Safari in progress. .

Footnote Popover

Academic footnotes appearing as popovers near reference markers.

CSS Hover Popover
72%
Mon
53%
Tue
91%
Wed
38%
Thu
65%
Fri

Chart Data Labels

Data labels anchored to chart points with automatic overlap avoidance.

CSS Hover DataViz

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