Navbar

Navbars in WeedorUI act as essential navigation components that help users move through your application efficiently. They are versatile and can be used to organize links, menus, and branding elements. Each navbar is customizable in terms of layout, style, and behavior, ensuring seamless integration into your design. Whether it’s a simple top bar or a fully functional multi-level menu, WeedorUI navbars provide both functionality and visual adaptability for any project.

Navbar with title only

Preview

WeedorUI

HTML

<header class="bg-transparent py-8 px-3">
  <nav class="flex justify-between items-center md:px-5 px-3 py-4 bg-slate-100 dark:bg-[#1c232b] rounded-md shadow-xl">
    <a class="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-200 py-2 hover:cursor-pointer rounded-md transition-all duration-200">
      WeedorUI
    </a>
  </nav>
</header>

JSX

<header className="bg-transparent py-8 px-3">
  <nav className="flex justify-between items-center md:px-5 px-3 py-4 bg-slate-100 dark:bg-[#1c232b] rounded-md shadow-xl">
    <a className="text-base text-black dark:text-white font-bold md:px-4 hover:bg-slate-200 py-2 hover:cursor-pointer rounded-md transition-all duration-200">
      WeedorUI
    </a>
  </nav>
</header>

Navbar with title and icon

Preview

WeedorUI

HTML

 <header class="bg-transparent py-8 px-3">
  <nav class="flex justify-between items-center md:px-5 px-3 py-4 bg-slate-100 dark:bg-[#1c232b] rounded-md shadow-xl">
    <a class="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-200 py-2 hover:cursor-pointer rounded-md transition-all duration-200">
      WeedorUI
    </a>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-12 cursor-pointer hover:bg-slate-200 py-1 px-2 hover:cursor-pointer rounded-md transition-all duration-200">
      <path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
    </svg>
  </nav>
</header>

JSX

  <header class="bg-transparent py-8 px-3">
  <nav class="flex justify-between items-center md:px-5 px-3 py-4 bg-slate-100 dark:bg-[#1c232b] rounded-md shadow-xl">
    <a class="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-200 py-2 hover:cursor-pointer rounded-md transition-all duration-200">
      WeedorUI
    </a>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-12 cursor-pointer hover:bg-slate-200 py-1 px-2 hover:cursor-pointer rounded-md transition-all duration-200">
      <path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
    </svg>
  </nav>
</header>
</header>

Navbar with title and and center menu

Preview

LogoHomeAboutBlogJoin Us

HTML

  <header class="bg-transparent py-8 px-3">
  <nav class="flex justify-between items-center md:px-3 px-2 py-4 bg-slate-100 dark:bg-[#1c232b] rounded-md shadow-xl">
    <a class="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-300 py-1 hover:cursor-pointer rounded-md transition-all duration-200"> Logo</a>

   <menu class="hidden md:flex gap-4">
      <a href="#" class="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">Home</a>
      <a href="#" class="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">About</a>
      <a href="#" class="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">Blog</a>
    </menu>

    <button class="py-1 px-5 rounded-md bg-blue-500 text-white hover:shadow-xl">Join Us</button>
  </nav>
</header>

JSX

   <header className="bg-transparent py-8 px-3">
  <nav className="flex justify-between items-center md:px-3 px-2 py-4 bg-slate-100 dark:bg-[#1c232b] rounded-md shadow-xl">
    <a className="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-300 py-1 hover:cursor-pointer rounded-md transition-all duration-200"> Logo</a>

   <menu className="hidden md:flex gap-4">
      <a href="#" className="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">Home</a>
      <a href="#" className="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">About</a>
      <a href="#" className="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">Blog</a>
    </menu>

    <button className="py-1 px-5 rounded-md bg-blue-500 text-white hover:shadow-xl">Join Us</button>
  </nav>
</header>

Navbar with dropdown menu

Preview

WeedorUI

ProfileSettingLogout

HTML

  <header class="bg-transparent py-8 px-3">
   <nav class="flex justify-between items-center md:px-10 px-3 py-4 bg-slate-100 dark:bg-[#1c232b]">
    <a class="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-200 py-2 hover:cursor-pointer rounded-md transition-all duration-200">
      WeedorUI
    </a>
    <div class="relative">
    <div id="popoverDiv" class="bg-red-400 w-12 h-12 rounded-full inline-block cursor-pointer overflow-hidden">
      <img src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="avatar" class="w-full h-full object-cover rounded-full" />
      <ul id="link_popover" class="absolute top-16 -left-24 hidden bg-white shadow-md w-[10rem] px-3 py-2 rounded-md">
        <a class="block text-base pb-1 hover:bg-slate-100 rounded-md p-1">Profile</a>
        <a class="block text-base pb-1 hover:bg-slate-100 rounded-md p-1">Setting</a>
        <a class="block text-base pb-1 hover:bg-slate-100 rounded-md p-1">Logout</a>
      </ul>
    </div>
    </div>
  </nav>
</header>

 <script>
  document.addEventListener("DOMContentLoaded", () => {
    const popoverDiv = document.getElementById("popoverDiv");
    const popover = document.getElementById("link_popover");

    {/* Toggle the popover when clicking on the div */}
    popoverDiv.addEventListener("click", function (event) {
      event.stopPropagation(); {/* Prevent the event from bubbling up */}
      popover.classList.toggle("hidden"); {/* Toggle visibility of the popover */}
    });

    {/* Hide the popover when clicking anywhere else on the page */}
    document.addEventListener("click", function (event) {
      {/* Check if the popover is open and if the click is outside of the popoverDiv */}
      if (
        !popover.classList.contains("hidden") &&
        !popoverDiv.contains(event.target)
      ) {
        popover.classList.add("hidden"); {/* Hide popover */}
      }
    });
  });
</script>

JSX

   <header class="bg-transparent py-8 px-3">
   <nav class="flex justify-between items-center md:px-10 px-3 py-4 bg-slate-100 dark:bg-[#1c232b]">
    <a class="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-200 py-2 hover:cursor-pointer rounded-md transition-all duration-200">
      WeedorUI
    </a>
    <div class="relative">
    <div id="popoverDiv" class="bg-red-400 w-12 h-12 rounded-full inline-block cursor-pointer overflow-hidden">
      <img src="https://images.pexels.com/photos/2625122/pexels-photo-2625122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="avatar" class="w-full h-full object-cover rounded-full" />
      <ul id="link_popover" class="absolute top-16 -left-24 hidden bg-white shadow-md w-[10rem] px-3 py-2 rounded-md">
        <a class="block text-base pb-1 hover:bg-slate-100 rounded-md p-1">Profile</a>
        <a class="block text-base pb-1 hover:bg-slate-100 rounded-md p-1">Setting</a>
        <a class="block text-base pb-1 hover:bg-slate-100 rounded-md p-1">Logout</a>
      </ul>
    </div>
    </div>
  </nav>
</header>

 <script>
  document.addEventListener("DOMContentLoaded", () => {
    const popoverDiv = document.getElementById("popoverDiv");
    const popover = document.getElementById("link_popover");

    {/* Toggle the popover when clicking on the div */}
    popoverDiv.addEventListener("click", function (event) {
      event.stopPropagation(); {/* Prevent the event from bubbling up */}
      popover.classList.toggle("hidden"); {/* Toggle visibility of the popover */}
    });

    {/* Hide the popover when clicking anywhere else on the page */}
    document.addEventListener("click", function (event) {
      {/* Check if the popover is open and if the click is outside of the popoverDiv */}
      if (
        !popover.classList.contains("hidden") &&
        !popoverDiv.contains(event.target)
      ) {
        popover.classList.add("hidden"); {/* Hide popover */}
      }
    });
  });
</script>

Navbar with colors

Preview

LogoHomeAboutBlogJoin Us

WeedorUI

WeedorUI

HTML

  <header class="bg-transparent py-8 px-3">
  <nav class="flex justify-between items-center md:px-3 px-2 py-4 bg-slate-100 dark:bg-[#1c232b] rounded-md shadow-xl">
    <a class="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-300 py-1 hover:cursor-pointer rounded-md transition-all duration-200"> Logo</a>

   <menu class="hidden md:flex gap-4">
      <a href="#" class="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">Home</a>
      <a href="#" class="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">About</a>
      <a href="#" class="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">Blog</a>
    </menu>

    <button class="py-1 px-5 rounded-md bg-blue-500 text-white hover:shadow-xl">Join Us</button>
  </nav>

  /* -----------------------------------------------------------------------------------------------------------------------*/
  <nav class="flex justify-between items-center md:px-5 px-3 py-4 bg-green-500 rounded-md shadow-xl">
    <a class="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-200 py-2 hover:cursor-pointer rounded-md transition-all duration-200">
      WeedorUI
    </a>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-12 cursor-pointer hover:bg-slate-200 py-1 px-2 hover:cursor-pointer text-white rounded-md transition-all duration-200">
      <path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
    </svg>
  </nav>
</header>

JSX

   <header className="bg-transparent py-8 px-3">
  <nav className="flex justify-between items-center md:px-3 px-2 py-4 bg-slate-100 dark:bg-[#1c232b] rounded-md shadow-xl">
    <a className="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-300 py-1 hover:cursor-pointer rounded-md transition-all duration-200"> Logo</a>

   <menu className="hidden md:flex gap-4">
      <a href="#" className="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">Home</a>
      <a href="#" className="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">About</a>
      <a href="#" className="inline-block px-6 hover:bg-slate-300 no-underline dark:text-white py-1 hover:cursor-pointer rounded-md transition-all duration-300">Blog</a>
    </menu>

    <button className="py-1 px-5 rounded-md bg-blue-500 text-white hover:shadow-xl">Join Us</button>
  </nav>

  /* -----------------------------------------------------------------------------------------------------------------------*/
  <nav className="flex justify-between items-center md:px-5 px-3 py-4 bg-green-500 rounded-md shadow-xl">
    <a className="text-2xl text-black dark:text-white font-bold md:px-4 hover:bg-slate-200 py-2 hover:cursor-pointer rounded-md transition-all duration-200">
      WeedorUI
    </a>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-12 cursor-pointer hover:bg-slate-200 py-1 px-2 hover:cursor-pointer text-white rounded-md transition-all duration-200">
      <path fill-rule="evenodd" d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
    </svg>
  </nav>
</header>