---
name: Navbar Gallery
slug: navbar-gallery
url: "https://dontmakeitugly.com/resources/navbar-gallery"
website: "https://www.navbar.gallery"
type: gallery
categories:
  - inspiration
tags:
  - navigation
  - navbar
  - mega-menu
  - sidebar
  - breadcrumbs
  - tabs
  - gallery
  - patterns
pricing: free
agentFriendly: limited
agentAccessMethods:
  - public_web
difficulty: any
dateAdded: "2026-09-03"
lastVerified: "2026-09-03"
---

# Navbar Gallery

550+ real website navbars, sorted by type: mega menus, sidebars, tabs and the rest.

- Type: Gallery
- Categories: Inspiration
- Pricing: Free

## What it is

Navbar Gallery collects navigation from real websites and organises it by pattern: static navbars, dropdowns, mega menus, sidebars, search bars, announcement bars, full-screen menus, breadcrumbs and tabs. Each site gets its own page with a preview, and there's a short blog explaining the patterns. Made by Christina Liubynska, built in public, sponsored by Mobbin.

## Why it's here

Navigation is where agent-built sites most often look generic, because the default is a logo, four links and a button. Seeing fifty announcement bars or sidebars side by side is the quickest way to find a better shape for yours. Narrow, but that's why it works.

## Best for

- navigation patterns
- mega menus and sidebars
- header design

## Links

- Website: https://www.navbar.gallery

## Can my agent use this?

As a reference only. Pick a pattern page, screenshot two or three examples and tell your agent the structure you want: how many levels, what collapses on mobile, where search lives. It will do better with a described structure than with a screenshot alone.

Agent friendliness: Limited. Mainly a visual reference. Great for humans and for describing a direction, but there's little an agent can read or install.
Access methods: Public website.

## Prompt to hand your agent

```text
Use Navbar Gallery as a visual and design reference for this project.

What it is: 550+ real website navbars, sorted by type: mega menus, sidebars, tabs and the rest.

Website: https://www.navbar.gallery

Use it specifically for:
- navigation patterns
- mega menus and sidebars
- header design

How you can access it: Public website.

Study the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements.
```

## Related

- [CTA Gallery](https://dontmakeitugly.com/resources/cta-gallery.md): Real calls to action, sorted into buttons, forms, modals, pricing and newsletters.
- [Supahero](https://dontmakeitugly.com/resources/supahero.md): Hundreds of website hero sections from real sites, nothing else.
- [SaaS Landing Page](https://dontmakeitugly.com/resources/saas-landing-page.md): Landing page examples organised by the exact section you're stuck on.
- [Collect UI](https://dontmakeitugly.com/resources/collect-ui.md): Daily UI inspiration sorted by the exact screen you're designing.

## In collections

- [Make your landing page better](https://dontmakeitugly.com/collections/better-landing-pages.md)

Navbar Gallery is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.