Navigation & Menu Components

Navigation is the one component every visitor touches, and the one that most quickly betrays a site built from defaults. These components each carry a finished interaction: a dock that magnifies under the cursor, a mega menu that morphs between panels instead of swapping them, a pill that slides to the active link.

11 UI elements, 5 free, no build step

~~£99~~£79.20

Halloween: 20% off the Vault until 31 October. Ends in 15d 15h 17m 04s

UI Elements Pass

£50

Every current and future premium UI element and component kit. Includes all 48 premium UI elements and kits available now, plus every future release in this line.

The Vault

£79.20

All 295 premium items in the Vault library, plus future additions to the library.

ui-001 £10

macOS Dock Navigation

A macOS-style dock menu for app shells and dashboards: icons magnify under the cursor, badges pop, and items drag to reorder.

Flip micro-interaction

ui-002 £10

Animated Mega Menu

An animated mega menu for site headers: the flyout panel morphs between section sizes instead of popping, and its columns stagger in behind it.

micro-interactionmega-menu

ui-003 £10

Animated Pill Navbar

An animated navbar with a sliding pill: it leans toward the cursor, stretches as it travels between links, and keeps the active link in view.

magneticquickTo

ui-010 Free

Fullscreen Hamburger Menu

A fullscreen hamburger menu: the burger icon morphs into an X while the overlay wipes in and the links stagger up, with focus trapping.

micro-interactionmorphing

ui-011 Free

Collapsible Sidebar Menu

A collapsible sidebar menu for docs and admin apps: sections open on a measured height tween and an indicator slides to the current link.

micro-interactionclick-toggle

ui-027 Free

Scrollspy Table of Contents

A scrollspy table of contents for long pages: a marker slides to the section in view and a progress line tracks reading.

ScrollTriggerScrollToPlugin

ui-028 £10

Bottom Navigation Bar

A mobile bottom navigation bar: the indicator stretches between tabs, panels swipe with the finger and the bar hides as you scroll down.

Draggable micro-interaction

ui-047 Free

Animated Tabs

Animated tabs: the indicator slides and stretches between tabs, panels change directionally and the container eases between heights.

tabskeyboard-navigation

ui-052 Free

FAQ Accordion

An accessible FAQ accordion: answers open to their natural height, a plus morphs into a minus, with expand all and #deep links.

click-togglestate-transition

ui-058 £10

PDF Document Viewer

A PDF reader with a page control that expands into visual navigation, searchable documents and a reviewed HTML reading mode for phones.

Flip flip-layout

ui-059 £10

PDF Flipbook

A PDF flipbook: point it at a PDF and read it in two-page spreads, dragging each page over with a real paper curl, momentum and selectable text.

DraggableInertiaPlugin

Browse all 59 UI elements

What makes an animated nav worth shipping

The difference between a nav that feels engineered and one that feels decorated is continuity. A default menu swaps states: hover in, panel appears; hover out, panel vanishes. The menus here interpolate instead, so the mega menu FLIP-morphs its panel size between sections, the pill nav slides its indicator rather than repainting it, and the dock scales icons on a falloff curve from the cursor the way macOS does. Motion carries you from one state to the next instead of announcing a replacement.

Keyboard behaviour is where shared-panel menus usually break, and it is handled deliberately here. A morphing menu that reuses one flyout panel is invisible to natural Tab order, so focus is routed manually: arrow keys and Tab reach every entry, Escape closes without stealing focus mid-move, and the open state follows focus as well as hover. If you have ever tabbed through a beautiful menu that silently skipped its own dropdowns, that is the failure these are built against.

Each component is self-contained: semantic markup, styling in CSS custom properties, behaviour in one commented script that finds its elements by id. There is no framework dependency and no build step, so the same files drop into a static page, a WordPress theme or a React layout effect.

All of them respect prefers-reduced-motion with a complete static fallback, keep focus states mirroring hover states, and clean up their listeners on teardown, so they behave inside single-page apps that mount and unmount the header.

How to add an animated nav to your site

Every component in this family is static files: a stylesheet, a script, and a block of markup. Wiring one in is a copy-paste pass, then a token pass.

1

Copy the three includes

Each download ships a stylesheet, the GSAP CDN tag it was built against, and its own script. Paste them in that order; the script finds its elements by id on load.
2

Paste the nav markup and keep the ids

Copy the component markup from index.html into your header. Keep the ids, or update the selectors at the top of the script; either works, mixing the two does not.
3

Swap the links for your own

The items are plain anchors. Change labels and hrefs freely; counts and widths are measured at runtime, so the layout and the indicator maths adjust themselves.
4

Pick a variant, then retune its tokens

Each element ships several looks selected by one data-variant attribute. Every colour, radius and shadow the component uses is a custom property in that variant block, so restyling never means hunting selectors.

The variant block you edit

body[data-variant="glass"] {
  --surface: rgba(18, 18, 22, 0.72);
  --ink: #f4f1ea;
  --accent: #c8ff00;   /* active link, indicator */
  --radius: 14px;
}

Navigation & Menus at a glance

Compare the 11 components in this category by what they do, what they are built with, and price.
Component	What it does	Built with	Price
macOS Dock Navigation	A macOS-style dock menu for app shells and dashboards: icons magnify under the cursor, badges pop, and items drag to reorder.	Flip	£10
Animated Mega Menu	An animated mega menu for site headers: the flyout panel morphs between section sizes instead of popping, and its columns stagger in behind it.	GSAP core	£10
Animated Pill Navbar	An animated navbar with a sliding pill: it leans toward the cursor, stretches as it travels between links, and keeps the active link in view.	GSAP core	£10
Fullscreen Hamburger Menu	A fullscreen hamburger menu: the burger icon morphs into an X while the overlay wipes in and the links stagger up, with focus trapping.	GSAP core	Free
Collapsible Sidebar Menu	A collapsible sidebar menu for docs and admin apps: sections open on a measured height tween and an indicator slides to the current link.	GSAP core	Free
Scrollspy Table of Contents	A scrollspy table of contents for long pages: a marker slides to the section in view and a progress line tracks reading.	ScrollTrigger, ScrollToPlugin	Free
Bottom Navigation Bar	A mobile bottom navigation bar: the indicator stretches between tabs, panels swipe with the finger and the bar hides as you scroll down.	Draggable	£10
Animated Tabs	Animated tabs: the indicator slides and stretches between tabs, panels change directionally and the container eases between heights.	GSAP core	Free
FAQ Accordion	An accessible FAQ accordion: answers open to their natural height, a plus morphs into a minus, with expand all and #deep links.	GSAP core	Free
PDF Document Viewer	A PDF reader with a page control that expands into visual navigation, searchable documents and a reviewed HTML reading mode for phones.	Flip	£10
PDF Flipbook	A PDF flipbook: point it at a PDF and read it in two-page spreads, dragging each page over with a real paper curl, momentum and selectable text.	Draggable, InertiaPlugin	£10

Related guides

59 animated UI components built with GSAP (2026)

59 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven are completely free to download.

Frequently asked questions

Do the menus work with keyboard navigation and screen readers?

Yes, and it is done manually where it has to be. Menus that share one flyout panel are unreachable by natural Tab order, so these route focus themselves: Tab and arrow keys reach every entry, Escape closes the panel, and open state follows focus as well as hover. Markup is semantic nav/ul/anchor structure with ARIA where the pattern calls for it.

Will a dock or mega menu work on touch screens?

Each component declares its mobile behaviour rather than pretending hover exists. The dock falls back to plain taps without the magnification, the mega menu opens on tap and closes on outside-tap or Escape, and the bottom tab bar is mobile-first to begin with.

Can I use these in React, Vue or Astro?

Yes. Each nav is vanilla JavaScript with an init that runs on load and a teardown path, so it mounts cleanly inside a framework lifecycle hook. Nothing assumes a bundler; GSAP loads from a CDN.

Can I use one on a client project?

Yes. The standard license covers unlimited personal and commercial projects, including client work. The only restrictions are no redistribution of the component itself and no building a competing component library from it.

Browse all UI elements What GSAP UI elements are