# Navbar components

> Design seamless navigation with 43 navbar components for React, all styled with Tailwind CSS and Next.js-ready.

143 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/navbar.

- [Tubelight Navbar](https://21st.dev/@ayushmxxn_c278bc2d/components/tubelight-navbar.md) — by Ayushmaan Singh
- [Navbar with Dropdowns](https://21st.dev/@shadcnblockscom/components/shadcnblocks-com-navbar1.md) — by Shadcnblocks.com
- [Nav Header](https://21st.dev/@abdulali254/components/nav-header/nav-header.md) — by Abdul D'braun
- [Limelight Nav](https://21st.dev/@easemize/components/limelight-nav.md) — by Hossain Jahed
- [Header](https://21st.dev/@tommyjepsen/components/header.md) — by Tommy Jepsen
- [Floating Navbar](https://21st.dev/@manuarora700/components/floating-navbar.md) — by Manu Arora
- [Floating Header](https://21st.dev/@sshahaider/components/floating-header.md) — by Efferd
- [Mini Navbar](https://21st.dev/@aghasisahakyan1/components/mini-navbar.md) — by Erik X
- [Navbar 1](https://21st.dev/@preetsuthar17/components/navbar-1.md) — by Preet Suthar
- [3D Adaptive Navigation Bar](https://21st.dev/@omrohilla6/components/3d-adaptive-navigation-bar.md) — by Om
- [Navbar](https://21st.dev/@geekles007/components/navbar.md) — by Geekles
- [LumaBar](https://21st.dev/@ruixen.ui/components/futuristic-nav.md) — by Ruixen UI
- [Hover Gradient NavBar](https://21st.dev/@ruixen.ui/components/hover-gradient-nav-bar.md) — by Ruixen UI
- [Menu Hover Effects](https://21st.dev/@minhxthanh/components/menu-hover-effects.md) — by Le Thanh
- [Curved Menu](https://21st.dev/@ishamsu/components/curved-menu.md) — by Shamsu Musthafa
- [Resizable Navbar](https://21st.dev/@manuarora700/components/resizable-navbar.md) — by Manu Arora
- [Navigation Bar](https://21st.dev/@originui/components/navigation-menu-4.md) — by Origin UI
- [Navbar](https://21st.dev/@ruixen.ui/components/navbar.md) — by Ruixen UI
- [Navbar](https://21st.dev/@designali-in/components/navbar.md) — by Ali Imam
- [Navigation Bar](https://21st.dev/@originui/components/navigation-menu-4/navbar3.md) — by Origin UI
- [Navigation Bar](https://21st.dev/@originui/components/navigation-menu-4/navbar1.md) — by Origin UI
- [Navigation Bar](https://21st.dev/@originui/components/navigation-menu-4/navbar2.md) — by Origin UI
- [Navbar 5](https://21st.dev/@shadcnblockscom/components/navbar-5.md) — by Shadcnblocks.com
- [Navbars](https://21st.dev/@arihantcodes_1f7b8c4d/components/navbars/floating-navbar.md) — by Arihant jain
- [Emoji Nav](https://21st.dev/@kaif-ui/components/emoji-nav.md) — by Kaif UI
- [Navbars](https://21st.dev/@arihantcodes_1f7b8c4d/components/navbars/tab-navbar.md) — by Arihant jain
- [Stacking Navbar](https://21st.dev/@chetanverma16/components/stacking-navbar.md) — by Chetan Verma
- [Navbars](https://21st.dev/@arihantcodes_1f7b8c4d/components/navbars/circular-navbar.md) — by Arihant jain
- [Vercel Navbar](https://21st.dev/@designali-in/components/vercel-navbar.md) — by Ali Imam
- [Header-01](https://21st.dev/@designali-in/components/header-01.md) — by Ali Imam
- [Scroll Navigation Menu](https://21st.dev/@spaceboydavey/components/scroll-navigation-menu.md) — by Davey
- [Tube Light Navbar](https://21st.dev/@voxlet-ui/components/tube-light-navbar.md) — by Voxlet UI
- [Glassmorphism Navigation](https://21st.dev/@akashsingh890901-crypto/components/glassmorphism-navigation.md) — by akashsingh890901-crypto
- [Navigation Bar](https://21st.dev/@originui/components/navigation-bar.md) — by Origin UI
- [Core Header Navbar](https://21st.dev/@m.kumailalirajpoot/components/core-header-navbar.md) — by Muhammad Kumail Ali
- [Navbar](https://21st.dev/@AliFarooqDev/components/navbar/navbar-dropdown.md) — by AliFarooqDev
- [Navbar](https://21st.dev/@AliFarooqDev/components/navbar/navbar-switcher.md) — by AliFarooqDev
- [Navbar](https://21st.dev/@AliFarooqDev/components/navbar/navbar-advanced.md) — by AliFarooqDev
- [Navbar](https://21st.dev/@AliFarooqDev/components/navbar/navbar-search.md) — by AliFarooqDev
- [Navbar](https://21st.dev/@AliFarooqDev/components/navbar/navbar-login.md) — by AliFarooqDev
- [Future Navbar](https://21st.dev/@mdafsarx/components/future-navbar.md) — by Md afsar mahmud
- [Navbar](https://21st.dev/@AliFarooqDev/components/navbar/navbar-sections.md) — by AliFarooqDev
- [Navbar](https://21st.dev/@AliFarooqDev/components/navbar/navbar-edges.md) — by AliFarooqDev
- [Navbar](https://21st.dev/@AliFarooqDev/components/navbar.md) — by AliFarooqDev
- [NotchNav](https://21st.dev/@jatin-yadav05/components/notch-nav.md) — by Jatin Yadav
- [Promote Header](https://21st.dev/@ruixen.ui/components/promote-header.md) — by Ruixen UI
- [Truncating Navbar](https://21st.dev/@maxim.bort.devel/components/truncating-navbar.md) — by Maxim Bortnikov
- [Navbar Section 2](https://21st.dev/@solaceui/components/navbar-section-2.md) — by Solace UI
- [Random Letter Swap Navigation](https://21st.dev/@cnippet.dev/components/m-random-letter-swap-1.md) — by Cnippet
- [Variable Font Hover Nav](https://21st.dev/@cnippet.dev/components/m-variable-font-hover-1.md) — by Cnippet
- [Centered Nav Header](https://21st.dev/@7ovr/components/centered-nav-header.md) — by 7Ovr
- [Header Navbar](https://21st.dev/@karthikmudunuri/components/header-02.md) — by Mudunuri bhaskara karthikeya varma
- [Hero Section 1](https://21st.dev/@meschacirung/components/hero-section-1.md) — by Méschac Irung
- [Sign In Flow](https://21st.dev/@aghasisahakyan1/components/sign-in-flow-1.md) — by Erik X
- [Hero](https://21st.dev/@reuno-ui/components/hero.md) — by reuno-ui
- [Hero Odyssey](https://21st.dev/@erikvalencia1/components/hero-odyssey.md) — by Ruben
- [Hero Section 5](https://21st.dev/@meschacirung/components/hero-section-5.md) — by Méschac Irung
- [Header 2](https://21st.dev/@sshahaider/components/header-2.md) — by Efferd
- [Minimalist Hero](https://21st.dev/@ravikatiyar162/components/minimalist-hero.md) — by Ravi Katiyar
- [Hero Section 9](https://21st.dev/@meschacirung/components/hero-section-9.md) — by Méschac Irung

Full component directory: https://21st.dev/llms.txt