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).
  • Navbar Design — smaller and newer, but every entry links to the live site and comes with a one-line critique of what the bar is doing.

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

  • 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
  • KandoCross-platform pie menu whose page argues for radial selection, gesture memory and a dedicated menu per application.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Kidus YohannesA dark portfolio that pairs a star-speckled introduction with a horizontal, section-by-section career journey.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • MenubarXMac app that turns the menu bar into a small browser, with per-site user agents, pinned panels and a detachable window.Verdict NicheConditional licence, proprietary paidAgent channels noneReviewed
  • Navbar Design29 hand-picked navbars sorted by 7 types and 9 styles, each with a screenshot, a short note and a link to the live site.Verdict NicheLook only licence, not statedAgent channels llms-txtReviewed
  • 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
  • SSGOIPage transitions for any router, named as a small vocabulary — zoom, drill, sheet, fade — with real apps rebuilt to demonstrate each.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • 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
  • YalqenA macOS developer-browser site with sky-blue editorial type and interactive demonstrations of its keyboard-first interface.Verdict UsefulConditional licence, mixedAgent channels noneReviewed

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.