# Navigation & Menu Components

> Copy-paste GSAP navigation components: macOS-style docks, morphing mega menus, magnetic pill navs, full-screen overlays, scrollspy rails and mobile tab bars.

Canonical: https://gsapvault.com/ui-elements/category/navigation-menus

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.

## 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.

```css
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

| Component | What it does | Built with | Price |
| --- | --- | --- | --- |
| [Floating Dock Navigation](https://gsapvault.com/ui-elements/floating-dock-nav) | macOS-style floating dock: cosine magnification on quickTo setters, a running-app dot that springs between icons, badge counts that pop, and drag-to-reorder with the neighbours opening a gap via Flip. | Flip | £5 |
| [FLIP Morphing Mega Menu](https://gsapvault.com/ui-elements/morphing-mega-menu) | Header navigation whose flyout container morphs between panel sizes with GSAP Flip instead of popping, with staggered card reveals. | Flip | £5 |
| [Magnetic Pill Navigation](https://gsapvault.com/ui-elements/magnetic-pill-nav) | Tab bar whose pill is genuinely magnetic: it leans toward the cursor inside a link, stretches in proportion to how far it travels, and scrolls narrow bars to keep the active link in view. | GSAP core | £5 |
| [Hamburger Fullscreen Menu](https://gsapvault.com/ui-elements/hamburger-fullscreen-menu) | A hamburger button that morphs into an X while a full-screen overlay menu wipes in from the top and its links stagger up. | GSAP core | £5 |
| [Accordion Sidebar Nav](https://gsapvault.com/ui-elements/accordion-sidebar-nav) | Docs-style sidebar with collapsible sections that open on a measured height tween, rotating chevrons and a sliding indicator rail on the active link. | GSAP core | £5 |
| [Scrollspy Table of Contents Rail](https://gsapvault.com/ui-elements/scrollspy-toc-rail) | Sticky table of contents beside a long article, with a marker that slides to the section in view and a reading-progress line down the rail. | ScrollTrigger, ScrollToPlugin | £5 |
| [Bottom Tab Bar](https://gsapvault.com/ui-elements/bottom-tab-bar) | Mobile app tab bar with an indicator that slides and stretches between tabs, an icon that springs up on selection, and a notification badge that pops. | GSAP core | £5 |

## Components in This Category

### Floating Dock Navigation

macOS-style floating dock: cosine magnification on quickTo setters, a running-app dot that springs between icons, badge counts that pop, and drag-to-reorder with the neighbours opening a gap via Flip.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/floating-dock-nav)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/floating-dock-nav.md)

### FLIP Morphing Mega Menu

Header navigation whose flyout container morphs between panel sizes with GSAP Flip instead of popping, with staggered card reveals.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/morphing-mega-menu)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/morphing-mega-menu.md)

### Magnetic Pill Navigation

Tab bar whose pill is genuinely magnetic: it leans toward the cursor inside a link, stretches in proportion to how far it travels, and scrolls narrow bars to keep the active link in view.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/magnetic-pill-nav)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/magnetic-pill-nav.md)

### Hamburger Fullscreen Menu

A hamburger button that morphs into an X while a full-screen overlay menu wipes in from the top and its links stagger up.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/hamburger-fullscreen-menu)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/hamburger-fullscreen-menu.md)

### Accordion Sidebar Nav

Docs-style sidebar with collapsible sections that open on a measured height tween, rotating chevrons and a sliding indicator rail on the active link.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/accordion-sidebar-nav)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/accordion-sidebar-nav.md)

### Scrollspy Table of Contents Rail

Sticky table of contents beside a long article, with a marker that slides to the section in view and a reading-progress line down the rail.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/scrollspy-toc-rail)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/scrollspy-toc-rail.md)

### Bottom Tab Bar

Mobile app tab bar with an indicator that slides and stretches between tabs, an icon that springs up on selection, and a notification badge that pops.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/bottom-tab-bar)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/bottom-tab-bar.md)

## Related Guides

- [35 animated UI components built with GSAP (2026)](https://gsapvault.com/blog/gsap-ui-components) ([Markdown](https://gsapvault.com/blog/gsap-ui-components.md)): 35 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Two 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.

## Related Categories

- [Overlay & Dialog Components](https://gsapvault.com/ui-elements/category/overlays-dialogs)
- [Search & Command Components](https://gsapvault.com/ui-elements/category/search-command)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects, UI components and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt