# Navbar Gallery

> Navbar Gallery is the web's only dedicated navigation bar design inspiration resource. It is a curated collection of 450+ real-world navbar designs from live websites, organized by navigation type, visual style, and industry. Created and maintained by Christina Liubynska, a freelance web designer based in Barcelona. New navbars are added regularly.

Navbar Gallery helps designers, developers, and product teams find navigation inspiration for their projects. Every navbar featured is sourced from a real, live website. Each entry includes a screenshot, a link to the original site, navigation type tags, and style tags. The site covers all major navigation patterns: static navbars, dropdown menus, mega menus, sidebars, search bars, announcement bars, full-screen menus, and breadcrumbs.

## Core Pages

- [Homepage](https://www.navbar.gallery/): Full gallery of all 450+ navbars, sorted by recency. Includes filtering by type via top navigation.
- [Browse All Categories](https://www.navbar.gallery/browse): Index of all navigation types and all 118 visual style tags. The best starting point for discovery.
- [Mobile Navigation](https://www.navbar.gallery/mobile-navigation): Curated examples of mobile-specific navigation patterns.
- [Webflow Navbars](https://www.navbar.gallery/webflow-navbars): Navbars built with or suitable for Webflow projects.
- [Framer Navbars](https://www.navbar.gallery/framer-navbars): Navbars built with or suitable for Framer projects.

## Navigation Types

- [Static / Sticky Navbars](https://www.navbar.gallery/type/static): Fixed top navbars with no dropdowns. The most common and refined navigation pattern.
- [Dropdown / Flyout Menus](https://www.navbar.gallery/type/dropdowns): Navbars with secondary panels that expand on hover or click.
- [Mega Menus](https://www.navbar.gallery/type/mega-menu): Large dropdown panels with multiple columns, imagery, and rich content layouts.
- [Sidebar Navigation](https://www.navbar.gallery/type/side-bar): Vertical navigation panels, common in dashboards and content-heavy products.
- [Search Bar Navigation](https://www.navbar.gallery/type/search-bar): Navbars where search is the primary interaction model.
- [Announcement Bars](https://www.navbar.gallery/type/announcement): Slim banner bars for promotions, updates, and key messages, typically above the main nav.
- [Full Screen Menus](https://www.navbar.gallery/type/full-screen): Menus that expand to cover the full viewport, common in creative and portfolio sites.
- [Breadcrumb Navigation](https://www.navbar.gallery/type/breadcrumbs): Secondary navigation trails showing page hierarchy and current location.

## Selected Style Categories

- [Dark Mode Navbars](https://www.navbar.gallery/style/dark): Navigation bars with dark backgrounds and light text.
- [Minimal Navbars](https://www.navbar.gallery/style/minimal): Clean, stripped-back navigation with few elements.
- [Animated Navbars](https://www.navbar.gallery/style/animated): Navbars featuring motion and animation effects.
- [Gradient Navbars](https://www.navbar.gallery/style/gradient): Navigation bars using gradient color treatments.
- [Brutalist Navbars](https://www.navbar.gallery/style/brutalist): Raw, unconventional navigation design with strong typographic choices.
- [Glassmorphism / Blurred Navbars](https://www.navbar.gallery/style/blurred): Navbars using frosted glass and blur effects.
- [SaaS Navbars](https://www.navbar.gallery/style/saas): Navigation designs from SaaS products and B2B tools.
- [AI Navbars](https://www.navbar.gallery/style/ai): Navbars from AI companies and products.
- [Portfolio Navbars](https://www.navbar.gallery/style/portfolio): Navigation bars from personal portfolios and creative sites.
- [Agency Navbars](https://www.navbar.gallery/style/agency): Navigation bars from design and creative agencies.
- [E-Commerce Navbars](https://www.navbar.gallery/style/e-commerce): Navbars from online stores and retail brands.
- [GSAP Navbars](https://www.navbar.gallery/style/gsap): Navigation bars using GSAP-powered animations.
- [Bento Box Navbars](https://www.navbar.gallery/style/bento-box): Navbars using a bento box grid layout pattern.
- [Large Type Navbars](https://www.navbar.gallery/style/large-type): Navigation bars featuring oversized or display-scale typography.

All 118 style categories are listed at: https://www.navbar.gallery/browse

## Blog

- [Best Mega Menu Navigation Designs](https://www.navbar.gallery/blog/best-mega-menu-navigation-designs): Curated real-world mega menu examples with design analysis and takeaways.
- [Best Dropdown Navigation Bar Designs](https://www.navbar.gallery/blog/best-dropdown-navigation-bar-designs): Curated real-world dropdown menu examples with interaction pattern breakdowns.
- [Best Static Navigation Bar Designs](https://www.navbar.gallery/blog/best-static-navigation-bar-designs): Curated real-world static navbar examples with visual and typographic analysis.
- [What is a Mega Menu?](https://www.navbar.gallery/blog/what-is-a-mega-menu): Guide to mega menu navigation, with definitions, benefits, and design best practices.
- [Sidebar Navigation: Examples and Best Practices](https://www.navbar.gallery/blog/sidebar-navigation): Guide to sidebar menus covering design principles and real-world examples.
- [Breadcrumb Navigation: Examples and Best Practices](https://www.navbar.gallery/blog/breadcrumb-navigation): Guide covering breadcrumb types, SEO value, and design implementation.
- [Mobile Navbar Designs](https://www.navbar.gallery/blog/mobile-navbar-designs): Exploration of mobile navigation patterns including hamburger menus, bottom bars, and slide-outs.
- [8 Types of Website Navigation](https://www.navbar.gallery/blog/types-of-website-navigation): Overview of the main navigation patterns used across the web.
- [Best Webflow Navigation Bar Cloneables](https://www.navbar.gallery/blog/best-webflow-navigation-bar-cloneables): Curated list of the best Webflow cloneable navbar templates.
- [How to Change Navbar Color on Scroll with GSAP](https://www.navbar.gallery/blog/how-to-change-navbar-color-on-scroll): Step-by-step technical tutorial using GSAP ScrollTrigger with Webflow cloneable included.

## About

Navbar Gallery was created in November 2023 by Christina Liubynska (@suupercharged on X/Twitter), inspired by the existence of footer.design and the lack of any equivalent resource focused on navigation. The site was built in public on Twitter and has grown to become the primary reference resource for navbar design inspiration on the web, with over 1 million pageviews.

Each navbar is hand-curated. Submissions can be made at: https://www.navbar.gallery (submit form in the footer).

- Creator: Christina Liubynska
- Website: https://www.supercharged.design
- X/Twitter: https://twitter.com/navbargallery
- Newsletter: https://suupercharged.substack.com/subscribe