search results:

    License Free hosting Learn Playground Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue
    • ResourcesNew
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    Navbar

    Tailwind CSS Navbar

    Use responsive navbar component with helper examples for sticky navbar, fixed navbar, navbar with dropdown & more. Free download, open-source license.


    Basic

    Use this example to create a navigation bar with a user profile or button to toggle a dropdown menu.

    • Dashboard
    • Team
    • Projects
    1
    • Action
    • Another action
    • Something else here
    • Action
    • Another action
    • Something else here
    • HTML
    • javascript
            
                
          <!-- Main navigation container -->
          <nav
            class="flex-no-wrap relative flex w-full items-center justify-between bg-neutral-100 py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4"
            data-te-navbar-ref>
            <div class="flex w-full flex-wrap items-center justify-between px-3">
              <!-- Hamburger button for mobile view -->
              <button
                class="block border-0 bg-transparent px-2 text-neutral-500 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
                type="button"
                data-te-collapse-init
                data-te-target="#navbarSupportedContent1"
                aria-controls="navbarSupportedContent1"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <!-- Hamburger icon -->
                <span class="[&>svg]:w-7">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-7 w-7">
                    <path
                      fill-rule="evenodd"
                      d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
              </button>
    
              <!-- Collapsible navigation container -->
              <div
                class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
                id="navbarSupportedContent1"
                data-te-collapse-item>
                <!-- Logo -->
                <a
                  class="mb-4 mr-2 mt-3 flex items-center text-neutral-900 hover:text-neutral-900 focus:text-neutral-900 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:mb-0 lg:mt-0"
                  href="#">
                  <img
                    src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
                    style="height: 15px"
                    alt=""
                    loading="lazy" />
                </a>
                <!-- Left navigation links -->
                <ul
                  class="list-style-none mr-auto flex flex-col pl-0 lg:flex-row"
                  data-te-navbar-nav-ref>
                  <li class="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
                    <!-- Dashboard link -->
                    <a
                      class="text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
                      href="#"
                      data-te-nav-link-ref
                      >Dashboard</a
                    >
                  </li>
                  <!-- Team link -->
                  <li class="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
                    <a
                      class="text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      href="#"
                      data-te-nav-link-ref
                      >Team</a
                    >
                  </li>
                  <!-- Projects link -->
                  <li class="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
                    <a
                      class="text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      href="#"
                      data-te-nav-link-ref
                      >Projects</a
                    >
                  </li>
                </ul>
              </div>
    
              <!-- Right elements -->
              <div class="relative flex items-center">
                <!-- Cart Icon -->
                <a
                  class="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                  href="#">
                  <span class="[&>svg]:w-5">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      class="h-5 w-5">
                      <path
                        d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" />
                    </svg>
                  </span>
                </a>
    
                <!-- Container with two dropdown menus -->
                <div class="relative" data-te-dropdown-ref>
                  <!-- First dropdown trigger -->
                  <a
                    class="hidden-arrow mr-4 flex items-center text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                    href="#"
                    id="dropdownMenuButton1"
                    role="button"
                    data-te-dropdown-toggle-ref
                    aria-expanded="false">
                    <!-- Dropdown trigger icon -->
                    <span class="[&>svg]:w-5">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        class="h-5 w-5">
                        <path
                          fill-rule="evenodd"
                          d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
                          clip-rule="evenodd" />
                      </svg>
                    </span>
                    <!-- Notification counter -->
                    <span
                      class="absolute -mt-2.5 ml-2 rounded-[0.37rem] bg-danger px-[0.45em] py-[0.2em] text-[0.6rem] leading-none text-white"
                      >1</span
                    >
                  </a>
                  <!-- First dropdown menu -->
                  <ul
                    class="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
                    aria-labelledby="dropdownMenuButton1"
                    data-te-dropdown-menu-ref>
                    <!-- First dropdown menu items -->
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Action</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Another action</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Something else here</a
                      >
                    </li>
                  </ul>
                </div>
    
                <!-- Second dropdown container -->
                <div class="relative" data-te-dropdown-ref>
                  <!-- Second dropdown trigger -->
                  <a
                    class="hidden-arrow flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
                    href="#"
                    id="dropdownMenuButton2"
                    role="button"
                    data-te-dropdown-toggle-ref
                    aria-expanded="false">
                    <!-- User avatar -->
                    <img
                      src="https://tecdn.b-cdn.net/img/new/avatars/2.jpg"
                      class="rounded-full"
                      style="height: 25px; width: 25px"
                      alt=""
                      loading="lazy" />
                  </a>
                  <!-- Second dropdown menu -->
                  <ul
                    class="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
                    aria-labelledby="dropdownMenuButton2"
                    data-te-dropdown-menu-ref>
                    <!-- Second dropdown menu items -->
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Action</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Another action</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Something else here</a
                      >
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </nav>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Collapse,
            Dropdown,
            initTE,
          } from "tw-elements";
          
          initTE({ Collapse, Dropdown });
          
            
        

    Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    Brand

    Navbar is a page element where you can place your branding, which will be seen by the user first and will indicate what page the user is on.

    Navbar

    Navbar
    • HTML
            
                
          <!--First navbar-->
          <nav
            class="relative flex w-full flex-wrap items-center justify-between bg-neutral-100 py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 lg:py-4">
            <div class="flex w-full flex-wrap items-center justify-between px-3">
              <div>
                <a class="text-xl text-neutral-800 dark:text-neutral-200" href="#"
                  >Navbar</a
                >
              </div>
            </div>
          </nav>
    
          <!--Second navbar-->
          <nav
            class="relative flex w-full flex-wrap items-center justify-between bg-neutral-100 py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 lg:py-4">
            <div class="flex w-full flex-wrap items-center justify-between px-3">
              <div>
                <a
                  class="text-xl font-semibold text-neutral-800 dark:text-neutral-200"
                  href="#"
                  >Navbar</a
                >
              </div>
            </div>
          </nav>
          
            
        

    Brand with image

    You can use logo images instead of plain text in the navigation bar. However, the height of the logo must be adjusted manually so that it fits the navigation bar correctly.


    MDBootstrap
    • HTML
            
                
          <!--First navbar-->
          <nav
            class="relative flex w-full flex-wrap items-center justify-between bg-neutral-100 py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 lg:py-4">
            <div class="flex w-full flex-wrap items-center justify-between px-3">
              <div>
                <a
                  class="my-1 mr-2 flex items-center text-neutral-900 hover:text-neutral-900 focus:text-neutral-900 lg:mb-0 lg:mt-0"
                  href="#">
                  <img
                    src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
                    style="height: 20px"
                    alt=""
                    loading="lazy" />
                </a>
              </div>
            </div>
          </nav>
    
          <!--Second navbar-->
          <nav
            class="relative flex w-full flex-wrap items-center justify-between bg-neutral-100 py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 lg:py-4">
            <div class="flex w-full flex-wrap items-center justify-between px-3">
              <div>
                <a
                  class="my-1 mr-2 flex items-center text-neutral-900 hover:text-neutral-900 focus:text-neutral-900 lg:mb-0 lg:mt-0"
                  href="#">
                  <img
                    class="mr-2"
                    src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
                    style="height: 20px"
                    alt=""
                    loading="lazy" />
                  <span class="font-medium dark:text-neutral-200">MDBootstrap</span>
                </a>
              </div>
            </div>
          </nav>
          
            
        

    Nav

    Navbar
    • Home
    • Features
    • Pricing
    • Disabled
    • HTML
    • javascript
            
                
          <!-- Main navigation container -->
          <nav
            class="relative flex w-full flex-nowrap items-center justify-between bg-neutral-100 py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 lg:flex-wrap lg:justify-start lg:py-4"
            data-te-navbar-ref>
            <div class="flex w-full flex-wrap items-center justify-between px-3">
              <!-- Hamburger button for mobile view -->
              <button
                class="block border-0 bg-transparent px-2 text-neutral-500 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
                type="button"
                data-te-collapse-init
                data-te-target="#navbarSupportedContent3"
                aria-controls="navbarSupportedContent3"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <!-- Hamburger icon -->
                <span class="[&>svg]:w-7">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-7 w-7">
                    <path
                      fill-rule="evenodd"
                      d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
              </button>
    
              <!-- Collapsible navbar container -->
              <div
                class="!visible mt-2 hidden flex-grow basis-[100%] items-center lg:mt-0 lg:!flex lg:basis-auto"
                id="navbarSupportedContent3"
                data-te-collapse-item>
                <!-- Navbar title -->
                <a class="pr-2 text-xl text-black dark:text-neutral-200" href="#"
                  >Navbar</a
                >
                <!-- Left links -->
                <ul
                  class="list-style-none mr-auto flex flex-col pl-0 lg:flex-row"
                  data-te-navbar-nav-ref>
                  <!-- Home link -->
                  <li class="my-4 lg:my-0 lg:pr-2" data-te-nav-item-ref>
                    <a
                      class="active disabled:text-black/30 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      aria-current="page"
                      href="#"
                      data-te-nav-link-ref
                      >Home</a
                    >
                  </li>
                  <!-- Features link -->
                  <li class="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
                    <a
                      class="p-0 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      href="#"
                      data-te-nav-link-ref
                      >Features</a
                    >
                  </li>
                  <!-- Pricing link -->
                  <li class="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
                    <a
                      class="p-0 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      href="#"
                      data-te-nav-link-ref
                      >Pricing</a
                    >
                  </li>
                  <!-- Disabled link -->
                  <li class="lg:pr-2" data-te-nav-link-ref>
                    <a
                      class="text-black/30 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      >Disabled</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Collapse,
            initTE,
          } from "tw-elements";
          
          initTE({ Collapse });
          
            
        

    Navbar dark

    You can change the color of the navbar to dark by using the .bg-neutral-900 class.

    Navbar
    • Dashboard
    • Team
    • Projects
    1
    • Action
    • Another action
    • Something else here
    • Action
    • Another action
    • Something else here
    • HTML
    • javascript
            
                
          <!-- Main navigation container -->
          <nav
            class="relative flex w-full flex-wrap items-center justify-between bg-neutral-900 py-2 text-neutral-200 shadow-lg lg:flex-wrap lg:justify-start lg:py-4"
            data-te-navbar-ref>
            <div class="flex w-full flex-wrap items-center justify-between px-3">
              <!-- Hamburger button for mobile view -->
              <button
                class="block border-0 bg-transparent px-2 text-neutral-200 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
                type="button"
                data-te-collapse-init
                data-te-target="#navbarSupportedContent4"
                aria-controls="navbarSupportedContent4"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <!-- Hamburger icon -->
                <span class="[&>svg]:w-7">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-7 w-7">
                    <path
                      fill-rule="evenodd"
                      d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
              </button>
    
              <!-- Collapsible navigation container -->
              <div
                class="!visible mt-2 hidden flex-grow basis-[100%] items-center lg:mt-0 lg:!flex lg:basis-auto"
                id="navbarSupportedContent4"
                data-te-collapse-item>
                <!-- Navbar title -->
                <a class="pr-2 text-xl font-semibold text-white" href="#">Navbar</a>
                <!-- Left navigation links -->
                <ul
                  class="list-style-none mr-auto flex flex-col pl-0 lg:flex-row"
                  data-te-navbar-nav-ref>
                  <!-- Dashboard link -->
                  <li class="my-4 lg:my-0 lg:pr-2" data-te-nav-item-ref>
                    <a
                      class="text-white disabled:text-black/30 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      href="#"
                      data-te-nav-link-ref
                      >Dashboard</a
                    >
                  </li>
                  <!-- Team link -->
                  <li class="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
                    <a
                      class="p-0 text-white opacity-60 hover:opacity-80 focus:opacity-80 disabled:text-black/30 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      href="#"
                      data-te-nav-link-ref
                      >Team</a
                    >
                  </li>
                  <!-- Projects link -->
                  <li class="mb-4 lg:mb-0 lg:pr-2" data-te-nav-item-ref>
                    <a
                      class="p-0 text-white opacity-60 hover:opacity-80 focus:opacity-80 disabled:text-black/30 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
                      href="#"
                      data-te-nav-link-ref
                      >Projects</a
                    >
                  </li>
                </ul>
              </div>
    
              <!-- Right elements -->
              <div class="relative flex items-center">
                <!-- Cart Icon -->
                <a
                  class="mr-4 text-white opacity-60 hover:opacity-80 focus:opacity-80"
                  href="#">
                  <span class="[&>svg]:w-5">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      class="h-5 w-5">
                      <path
                        d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" />
                    </svg>
                  </span>
                </a>
    
                <!-- Container with two dropdown menus -->
                <div class="relative" data-te-dropdown-ref>
                  <!-- First dropdown trigger -->
                  <a
                    class="hidden-arrow mr-4 flex items-center text-white opacity-60 hover:opacity-80 focus:opacity-80"
                    href="#"
                    id="dropdownMenuButton1"
                    role="button"
                    data-te-dropdown-toggle-ref
                    aria-expanded="false">
                    <!-- Dropdown trigger icon -->
                    <span class="[&>svg]:w-5">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        class="h-5 w-5">
                        <path
                          fill-rule="evenodd"
                          d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
                          clip-rule="evenodd" />
                      </svg>
                    </span>
                    <!-- Notification counter -->
                    <span
                      class="absolute -mt-2.5 ml-2 rounded-full bg-red-700 px-1.5 py-0 text-xs text-white"
                      >1</span
                    >
                  </a>
                  <!-- First dropdown menu -->
                  <ul
                    class="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
                    aria-labelledby="dropdownMenuButton1"
                    data-te-dropdown-menu-ref>
                    <!-- First dropdown menu items -->
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Action</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Another action</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Something else here</a
                      >
                    </li>
                  </ul>
                </div>
    
                <!-- Second dropdown container -->
                <div class="relative" data-te-dropdown-ref>
                  <!-- Second dropdown trigger -->
                  <a
                    class="hidden-arrow flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
                    href="#"
                    id="dropdownMenuButton2"
                    role="button"
                    data-te-dropdown-toggle-ref
                    aria-expanded="false">
                    <!-- User avatar -->
                    <img
                      src="https://tecdn.b-cdn.net/img/new/avatars/2.jpg"
                      class="rounded-full"
                      style="height: 25px; width: 25px"
                      alt=""
                      loading="lazy" />
                  </a>
                  <!-- Second dropdown menu -->
                  <ul
                    class="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
                    aria-labelledby="dropdownMenuButton2"
                    data-te-dropdown-menu-ref>
                    <!-- Second dropdown menu items -->
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Action</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Another action</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-white/30"
                        href="#"
                        data-te-dropdown-item-ref
                        >Something else here</a
                      >
                    </li>
                  </ul>
                </div>
              </div>
              <!-- Right elements -->
            </div>
          </nav>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Dropdown,
            Collapse,
            initTE,
          } from "tw-elements";
          
          initTE({ Dropdown, Collapse });
          
            
        

    Related resources

    Side Navbar Jumbotron Hamburger Menu Nested Dropdown How to make Bootstrap Navbar transparent How to center Bootstrap Navbar How to change Bootstrap Navbar color Breadcrumbs Bootstrap Navbar Tutorial

    If you are looking for more advanced options, try Bootstrap Footer from MDBootstrap.

    • Basic example
    • Brand
    • Brand with image
    • Nav
    • Navbar dark
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com