Design Atlas

← Atlas

Navigation ​

Navbars, menus and wayfinding patterns — how to structure the thing every page needs.

Start here ​

  • Navbar Gallery — the current source for this topic; classifies navigation into 9 real patterns (sticky, mega menu, sidebar, full-screen, breadcrumbs, tabs, and more).

All sources ​

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • Butter NavMega-menu that is one card morphing between menus, with a full rebuild prompt; no licence published.Verdict UsefulLook only licence, not statedAgent channels registry, promptsReviewed
  • Droppy CodeA native Mac coding-agent app presented through detailed interface walkthroughs and a Liquid Glass visual system.Verdict NicheConditional licence, open source copyleftAgent channels noneReviewed
  • Hover StatesAn archive of about 1,775 experimental sites since 2012, each with a short note on its interaction and credits.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Navbar GalleryReal examples of every major navbar pattern (sticky, mega menu, sidebar, tabs and more), plus a blog on when to use each.Verdict NicheLook only licence, not statedAgent channels llms-txtReviewed
  • POP IS YOU SAKAEA Nagoya event microsite that links pop-culture listings to a calendar and a filterable map of Sakae venues.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Rare UIAbout 20 unusual Motion and Tailwind React components via the shadcn CLI; MIT + Commons Clause + visible attribution.Verdict UsefulConditional licence, source availableAgent channels llms-txt, registryReviewed
  • RewampUIAbout 75 animated React navbars, backgrounds, toggles and cursors with a copy CLI and per-component prompts; designs are admitted remixes.Verdict NicheLook only licence, not statedAgent channels cli, promptsReviewed
  • ShiftBarA small macOS menu-bar utility with an interactive browser demo for hiding and restoring a chosen span of status icons.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Shochiku GamesJapanese publisher site pairing a green-framed game carousel with a categorized catalog and image-led title pages.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • UIWTFRauno Freiberg's seven classic experiments (command menu, copy source, link preview, minimap), each with a rationale.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • unlumen UIAnimated React registry forked from Animate UI, with motion primitives, copyable components and a paid Pro set.Verdict UsefulConditional licence, mixedAgent channels llms-txt, registryReviewed

Patterns worth reusing ​

  • Classify navigation by pattern type (mega menu, sidebar, full-screen, sticky) rather than only by industry — it maps directly to a concrete UX decision.
  • Pair a pattern gallery with a short explanation of when to use each type, not just a picture of it.
  • Note explicitly what collapses into a hamburger menu, and at which breakpoint, when describing a reference to an agent.
  • A validated niche (like footers) can be cloned into a neighboring one (navbars) with the same filtering approach.
  • Let a sidebar's active marker travel between items on a spring instead of jumping, and grow items as the pointer approaches to hint that they're interactive (Rare UI).
  • Turn a reading-progress indicator into a jump menu of sections on tap (Rare UI).

Pitfalls ​

  • Screenshots come from real products with their own branding — copy the structural pattern, not the visual identity.
  • A single source with no advanced filters (just "load more") should be paired with another for industry- or style-specific search.
  • No licence or pricing information is typically stated for this kind of gallery.
  • Rare UI's components are free but not plain MIT: shipped projects must show a visible credit link, and redistributing the components is not allowed.