Basic Example
Use this example to create a navigation bar with a user profile or button to toggle a dropdown menu.
<!-- Main navigation container -->
<nav
class="flex-no-wrap relative flex w-full items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4">
<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-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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-twe-collapse-item>
<!-- Logo -->
<a
class="mb-4 me-5 ms-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="TE Logo"
loading="lazy" />
</a>
<!-- Left navigation links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:flex-row"
data-twe-navbar-nav-ref>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<!-- Dashboard link -->
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Dashboard</a
>
</li>
<!-- Team link -->
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Team</a
>
</li>
<!-- Projects link -->
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Projects</a
>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Right elements -->
<div class="relative flex items-center">
<!-- Icon -->
<a class="me-4 text-neutral-600 dark:text-white" href="#">
<span class="[&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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>
<!-- First dropdown container -->
<div
class="relative"
data-twe-dropdown-ref
data-twe-dropdown-alignment="end">
<!-- First dropdown trigger -->
<a
class="me-4 flex items-center text-neutral-600 dark:text-white"
href="#"
id="dropdownMenuButton1"
role="button"
data-twe-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">
<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-4 ms-2.5 rounded-full bg-danger px-[0.35em] py-[0.15em] text-[0.6rem] font-bold leading-none text-white"
>1</span
>
</a>
<!-- First dropdown menu -->
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<!-- First dropdown menu items -->
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
<!-- Second dropdown container -->
<div
class="relative"
data-twe-dropdown-ref
data-twe-dropdown-alignment="end">
<!-- Second dropdown trigger -->
<a
class="flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
href="#"
id="dropdownMenuButton2"
role="button"
data-twe-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 z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton2"
data-twe-dropdown-menu-ref>
<!-- Second dropdown menu items -->
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
</div>
<!-- Right elements -->
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown });
Supported content
Navbars support a wide range of content, including branding, text, links, components like dropdowns, breadcrumbs, forms, buttons, icons, flags, avatars, badges, and a few more.
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.
<!-- First navbar -->
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#">Navbar</a>
</div>
</div>
</nav>
<!-- Second navbar -->
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<span class="text-xl font-medium text-black dark:text-white"
>Navbar</span
>
</div>
</div>
</nav>
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.
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div>
<a class="mx-2 my-1 flex items-center lg:mb-0 lg:mt-0" href="#">
<img
src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
style="height: 20px"
alt="TE Logo"
loading="lazy" />
</a>
</div>
</div>
</nav>
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div>
<a class="mx-2 my-1 flex items-center lg:mb-0 lg:mt-0" href="#">
<img
class="me-2"
src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
style="height: 20px"
alt="TE Logo"
loading="lazy" />
<span class="text-black dark:text-white">TW Elements</span>
</a>
</div>
</div>
</nav>
Nav
Navbar navigations links are styled with the Tailwind CSS classes. They will grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 text-neutral-500 shadow-dark-mild hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#">Navbar</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent2"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Features link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Features</a
>
</li>
<!-- Pricing link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Pricing</a
>
</li>
<!-- Disabled link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
You can avoid the list-based approach entirely if you like.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 text-neutral-500 shadow-dark-mild hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#">Navbar</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent3"
aria-controls="navbarSupportedContent3"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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-twe-collapse-item>
<!-- Left links -->
<div
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<div
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</div>
<!-- Features link -->
<div
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Features</a
>
</div>
<!-- Pricing link -->
<div
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Pricing</a
>
</div>
<!-- Disabled link -->
<div
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</div>
</div>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
Forms
Place various form controls and components within a navbar:
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="ms-5 flex w-[30%] items-center justify-between">
<input
type="search"
class="relative m-0 block w-[1px] min-w-0 flex-auto rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-1.5 text-base font-normal text-surface transition duration-300 ease-in-out focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none motion-reduce:transition-none dark:border-white/10 dark:bg-body-dark dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon2" />
<!--Search icon-->
<span
class="flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-gray-600 dark:text-white [&>svg]:w-5"
id="basic-addon2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" />
</svg>
</span>
</div>
</nav>
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<span class="ms-2 text-xl text-black dark:text-white">Navbar</span>
<div class="ms-5 flex w-[30%] items-center justify-between">
<input
type="search"
class="relative m-0 block w-[1px] min-w-0 flex-auto rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-1.5 text-base font-normal text-surface transition duration-300 ease-in-out focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none motion-reduce:transition-none dark:border-white/10 dark:bg-body-dark dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon2" />
<!--Search icon-->
<span
class="flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-gray-600 dark:text-white [&>svg]:w-5"
id="basic-addon2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" />
</svg>
</span>
</div>
</div>
</nav>
Buttons
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div>
<a class="mx-2 my-1 flex items-center lg:mb-0 lg:mt-0" href="#">
<img
class="me-2"
src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
style="height: 20px"
alt="TE Logo"
loading="lazy" />
</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent4"
aria-controls="navbarSupportedContent4"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent4"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Dashboard</a
>
</li>
</ul>
<div class="flex items-center">
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="me-3 inline-block rounded px-2 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700 dark:text-secondary-600 dark:hover:text-secondary-500 dark:focus:text-secondary-500 dark:active:text-secondary-500">
Login
</button>
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="me-3 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Sign up for free
</button>
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="me-3 inline-block rounded bg-neutral-800 px-3 py-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-dark-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
<span class="[&>svg]:w-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</span>
</button>
</div>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
Text
Navbars may contain bits of text.
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<span class="ms-2 text-black/60 dark:text-white/60"
>Navbar text with an inline element</span
>
</div>
</nav>
Mix and match with other components and utilities as needed.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#"
>Navbar w/ text</a
>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent3"
aria-controls="navbarSupportedContent3"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Features link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Features</a
>
</li>
<!-- Pricing link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Pricing</a
>
</li>
</ul>
<span class="ms-2 text-black/60 dark:text-white/60"
>Navbar text with an inline element</span
>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
Dropdown
You can also use dropdowns in your navbar nav. Learn more about dropdowns in our dropdown docs.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 text-neutral-500 shadow-dark-mild hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-700 lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<!-- Dropdown -->
<div class="relative ms-2" data-twe-dropdown-ref>
<a
class="flex items-center px-6 pb-2 pt-2.5 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
type="button"
id="dropdownMenuButton2"
data-twe-dropdown-toggle-ref
aria-expanded="false">
Dropdown link
<span class="ms-2 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Dropdown });
Breadcrumb
Very common use case - breadcrumb in the navbar.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<nav class="w-full rounded-md" aria-label="breadcrumb">
<ol class="list-reset ms-2 flex">
<li>
<a
href="#"
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
>Home</a
>
</li>
<li>
<span class="mx-2 text-black/60 dark:text-white/60">/</span>
</li>
<li>
<a
href="#"
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
>Library</a
>
</li>
<li>
<span class="mx-2 text-black/60 dark:text-white/60">/</span>
</li>
<li>
<a
href="#"
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
>Data</a
>
</li>
</ol>
</nav>
</div>
</nav>
Icons
Choose from hundreds of icons and simply add them to the navbar.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="relative flex items-center">
<!-- Cart Icon -->
<a
class="ps-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#">
<span class="[&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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>
<!-- Twitter Icon -->
<a
class="ps-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#">
<span class="[&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
</svg>
</span>
</a>
<!-- Dropdown -->
<div class="relative" data-twe-dropdown-ref>
<a
class="flex items-center px-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
type="button"
id="dropdownMenuButton2"
data-twe-dropdown-toggle-ref
aria-expanded="false">
<span class="[&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
stroke-width="1.5">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
</span>
<span class="[&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Dropdown });
Badges
Badges can be very useful for presenting counters, for example in the shopping cart.
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="relative flex items-center">
<span
class="ms-3 rounded-md bg-danger px-[0.85em] py-[0.6em] text-[0.6rem] font-bold leading-none text-white"
>1</span
>
<!-- Cart Icon -->
<a
class="ms-1 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#">
<span class="[&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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>
</div>
</div>
</nav>
Notifications
You can mix icon with dropdown and create a notification dropdown to indicate important news for visitors.
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<!-- Dropdown -->
<div class="relative ms-3" data-twe-dropdown-ref>
<!-- First dropdown trigger -->
<a
class="me-4 flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
id="dropdownMenuButton1"
role="button"
data-twe-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">
<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-4 ms-2.5 rounded-full bg-danger px-[0.35em] py-[0.15em] text-[0.6rem] font-bold leading-none text-white"
>1</span
>
</a>
<!-- First dropdown menu -->
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<!-- First dropdown menu items -->
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Dropdown });
Flags
Use dropdown together with flags to create a language switch.
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-neutral-100 py-2 text-neutral-500 shadow-dark-mild hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-700 lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<!-- Icon dropdown -->
<div class="relative ms-4" data-twe-dropdown-ref>
<a
class="me-4 flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
id="navbarDropdown"
role="button"
data-twe-dropdown-toggle-ref
aria-expanded="false">
<span
class="relative inline-block h-[11px] w-4 overflow-hidden bg-gray-200 leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background-position:-36px_-26px_!important] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px]"></span>
</span>
<span class="ps-1 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<ul
class="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-[10rem] list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="navbarDropdown"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background-position:-36px_-26px_!important] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px]"></span>
</span>
<span class="me-4">English</span>
<span
class="inline-block text-success-600 dark:text-success-500 [&>svg]:h-3.5 [&>svg]:w-3.5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m4.5 12.75 6 6 9-13.5" />
</svg>
</span>
</a>
</li>
<li>
<hr class="my-2 border-neutral-100 dark:border-white/10" />
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-72px_-572px_!important]"></span>
</span>
Polski</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:0px_-1196px_!important]"></span>
</span>
中文</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-36px_-910px_!important]"></span>
</span>
日本語</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:0px_-1430px_!important]"></span>
</span>
Deutsch</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:0px_-1976px_!important]"></span>
</span>
Français</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-0px_-1742px_!important]"></span>
</span>
Español</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-72px_-884px_!important]"></span>
</span>
Русский</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref>
<span
class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
<span
class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-72px_-702px_!important]"></span>
</span>
Português</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Dropdown });
Avatar
By combining simple image and dropdown you can create an avatar with typical user options.
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-neutral-100 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<!-- Avatar -->
<div class="relative ms-3" data-twe-dropdown-ref>
<a
class="flex items-center whitespace-nowrap text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-twe-dropdown-toggle-ref
aria-expanded="false">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img (31).webp"
class="rounded-full"
style="height: 22px; width: 22px"
alt="Avatar"
loading="lazy" />
<span class="ps-1 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<ul
class="dark:bg-surfa absolute left-0 right-auto z-[1000] float-left m-0 hidden min-w-[10rem] list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton2"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>My profile</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-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Settings</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-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Logout</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Dropdown });
Content alignment
To align navbar content to the right or left use me-auto or
ms-auto classes. For content centering use flexbox utilities.
Left aligned
Add me-auto class to the ul element to align the
content to the left.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-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-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent5"
aria-controls="navbarSupportedContent5"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent5"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Link</a
>
</li>
<!-- Dropdown link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref
data-twe-dropdown-ref>
<!-- Dropdown -->
<a
class="flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
type="button"
id="dropdownMenuButton2"
data-twe-dropdown-toggle-ref
aria-expanded="false">
Dropdown
<span class="ms-1 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</li>
<!-- Disabled link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown });
Right aligned
Add ms-auto class to the ul element to align the
content to the right.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-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-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent7"
aria-controls="navbarSupportedContent7"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent7"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none ms-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Link</a
>
</li>
<!-- Dropdown link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref
data-twe-dropdown-ref>
<!-- Dropdown -->
<a
class="flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
type="button"
id="dropdownMenuButton2"
data-twe-dropdown-toggle-ref
aria-expanded="false">
Dropdown
<span class="ms-1 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</li>
<!-- Disabled link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown });
Centered
Remove .ms-auto or .me-auto class and add
justify-center class to the collapsible wrapper
div to center the content.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-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-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent8"
aria-controls="navbarSupportedContent8"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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 justify-center lg:mt-0 lg:!flex lg:basis-auto"
id="navbarSupportedContent8"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Link</a
>
</li>
<!-- Dropdown link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref
data-twe-dropdown-ref>
<!-- Dropdown -->
<a
class="flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
type="button"
id="dropdownMenuButton2"
data-twe-dropdown-toggle-ref
aria-expanded="false">
Dropdown
<span class="ms-1 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</li>
<!-- Disabled link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown });
Colors
Theming the navbar has never been easier thanks to the combination of
theming classes and background-color utilities. Let's customize
navbar with .bg-* utilities.
See also our colors docs to learn more about colors.
Sample colors
<!-- First navbar -->
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-primary py-2 shadow-dark-mild lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="mx-2">
<a class="text-xl text-neutral-100" href="#">Navbar</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-neutral-300 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-twe-collapse-init
data-twe-target="#navbarSupportedContent9"
aria-controls="navbarSupportedContent9"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent9"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-neutral-300 transition duration-200 hover:text-neutral-200 hover:ease-in-out focus:text-neutral-200 active:text-black/80 motion-reduce:transition-none lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Features link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-neutral-300 transition duration-200 hover:text-neutral-200 hover:ease-in-out focus:text-neutral-200 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>Features</a
>
</li>
<!-- Pricing link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-neutral-300 transition duration-200 hover:text-neutral-200 hover:ease-in-out focus:text-neutral-200 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>Pricing</a
>
</li>
<!-- About link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-neutral-300 transition duration-200 hover:text-neutral-200 hover:ease-in-out focus:text-neutral-200 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<br />
<!-- Second navbar -->
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-[#332D2D] py-2 shadow-dark-mild lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="mx-2">
<a class="text-xl text-neutral-100" href="#">Navbar</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-neutral-300 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-twe-collapse-init
data-twe-target="#navbarSupportedContent10"
aria-controls="navbarSupportedContent10"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent10"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-neutral-300 transition duration-200 hover:text-neutral-200 hover:ease-in-out focus:text-neutral-200 active:text-black/80 motion-reduce:transition-none lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Features link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-neutral-300 transition duration-200 hover:text-neutral-200 hover:ease-in-out focus:text-neutral-200 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>Features</a
>
</li>
<!-- Pricing link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-neutral-300 transition duration-200 hover:text-neutral-200 hover:ease-in-out focus:text-neutral-200 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>Pricing</a
>
</li>
<!-- About link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-neutral-300 transition duration-200 hover:text-neutral-200 hover:ease-in-out focus:text-neutral-200 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<br />
<!-- Third navbar -->
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-sky-100 py-2 shadow-dark-mild lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="mx-2">
<a class="text-xl text-black" href="#">Navbar</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-black/50 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
type="button"
data-twe-collapse-init
data-twe-target="#navbarSupportedContent11"
aria-controls="navbarSupportedContent11"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span class="[&>svg]:w-7 [&>svg]:stroke-black/50">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent11"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 active:text-black/80 motion-reduce:transition-none lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Features link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>Features</a
>
</li>
<!-- Pricing link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>Pricing</a
>
</li>
<!-- About link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 active:text-black/80 motion-reduce:transition-none lg:px-2"
href="#"
data-twe-nav-link-ref
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown });
Secondary icons
The secondary icons on a white background give a light, soft look. They are also helpful in keeping the navbar and sidenav appear consistent as they are the same color as the icons in sidenav.
<!-- Main navigation container -->
<nav
class="flex-no-wrap relative flex w-full items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-surface-dark lg:flex-wrap lg:justify-start lg:py-4">
<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-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent12"
aria-controls="navbarSupportedContent12"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent12"
data-twe-collapse-item>
<!-- Logo -->
<a
class="mb-4 me-5 ms-2 mt-3 flex items-center lg:mb-0 lg:mt-0"
href="#">
<img
src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
style="height: 15px"
alt="TE Logo"
loading="lazy" />
</a>
<!-- Left navigation links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:flex-row"
data-twe-navbar-nav-ref>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<!-- Dashboard link -->
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Dashboard</a
>
</li>
<!-- Team link -->
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Team</a
>
</li>
<!-- Projects link -->
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Projects</a
>
</li>
</ul>
</div>
<!-- Right elements -->
<div class="relative flex items-center">
<!-- Cart Icon -->
<a
class="me-4 text-secondary-500 transition duration-200 hover:text-secondary-600/70 hover:ease-in-out focus:text-secondary-600/70 active:text-secondary-600/70 motion-reduce:transition-none dark:text-secondary-500 dark:hover:text-secondary-500/80 dark:focus:text-secondary-500/80 dark:active:text-secondary-500/80"
href="#">
<span class="[&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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-twe-dropdown-ref
data-twe-dropdown-alignment="end">
<!-- First dropdown trigger -->
<a
class="me-4 flex items-center text-secondary-500 transition duration-200 hover:text-secondary-600/70 hover:ease-in-out focus:text-secondary-600/70 active:text-secondary-600/70 motion-reduce:transition-none dark:text-secondary-500 dark:hover:text-secondary-500/80 dark:focus:text-secondary-500/80 dark:active:text-secondary-500/80"
href="#"
id="dropdownMenuButton1"
role="button"
data-twe-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">
<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-4 ms-2.5 rounded-full bg-danger px-[0.35em] py-[0.15em] text-[0.6rem] font-bold leading-none text-white"
>1</span
>
</a>
<!-- First dropdown menu -->
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<!-- First dropdown menu items -->
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
<!-- Second dropdown container -->
<div
class="relative"
data-twe-dropdown-ref
data-twe-dropdown-alignment="end">
<!-- Second dropdown trigger -->
<a
class="flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
href="#"
id="dropdownMenuButton2"
role="button"
data-twe-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 z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton2"
data-twe-dropdown-menu-ref>
<!-- Second dropdown menu items -->
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown });
Containers
Although it’s not required, you can wrap a navbar in a
.container to center it on a page–though note that an inner
container is still required. Or you can add a container inside the navbar to
only center the contents of a
fixed or static top navbar.
<div class="container">
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="container ms-2">
<a class="text-xl text-black dark:text-white" href="#">Navbar</a>
</div>
</div>
</nav>
</div>
Use the responsive breakpoints, e.g. md:, to change how wide
the content in your navbar is presented.
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2 w-1/4 md:w-full">
<a class="text-xl text-black dark:text-white" href="#">Navbar</a>
</div>
</div>
</nav>
Placement
Use Tailwind CSS position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there).
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#">Default</a>
</div>
</div>
</nav>
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<nav
class="fixed top-0 flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#">Fixed top</a>
</div>
</div>
</nav>
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<nav
class="fixed bottom-0 flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#"
>Fixed bottom</a
>
</div>
</div>
</nav>
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<nav
class="sticky top-0 flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#"
>Sticky top</a
>
</div>
</div>
</nav>
Responsive behaviors
Navbars can use responsive breakpoints sm, md, lg, xl, 2xl to
determine when their content collapses behind a button. In combination with
other utilities, you can easily choose when to show or hide particular
elements.
Toggler
Below are examples of different toggle styles.
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-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-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent13"
aria-controls="navbarSupportedContent13"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent13"
data-twe-collapse-item>
<div class="ms-2">
<a class="text-xl text-black dark:text-white" href="#"
>Hidden brand</a
>
</div>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Link</a
>
</li>
<!-- Disabled link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</li>
</ul>
<div class="w-[300px] lg:pe-2">
<div class="relative flex w-full flex-wrap items-stretch">
<input
type="search"
class="relative m-0 -me-0.5 block w-[1px] min-w-0 flex-auto rounded-s border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-1 text-base font-normal leading-[1.6] text-surface outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/10 dark:bg-body-dark dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon3" />
<!--Search button-->
<button
class="relative z-[2] rounded-e border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 motion-reduce:transition-none dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950"
type="button"
id="button-addon3"
data-twe-ripple-init>
Search
</button>
</div>
</div>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
With a brand name shown on the left and toggler on the right:
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="ms-2 md:me-2">
<a class="text-xl text-black dark:text-white" href="#">Navbar</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent14"
aria-controls="navbarSupportedContent14"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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="navbarSupportedContent14"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Link</a
>
</li>
<!-- Disabled link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</li>
</ul>
<div class="w-[300px] lg:pe-2">
<div class="relative flex w-full flex-wrap items-stretch">
<input
type="search"
class="relative m-0 -me-0.5 block w-[1px] min-w-0 flex-auto rounded-s border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-1 text-base font-normal leading-[1.6] text-surface outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none motion-reduce:transition-none dark:border-white/10 dark:bg-body-dark dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon3" />
<!--Search button-->
<button
class="relative z-[2] rounded-e border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 motion-reduce:transition-none dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950"
type="button"
id="button-addon3"
data-twe-ripple-init>
Search
</button>
</div>
</div>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
With a toggler on the left and brand name on the right:
<!-- Main navigation container -->
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start lg:py-4"
data-twe-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-black/50 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-twe-collapse-init
data-twe-target="#navbarSupportedContent15"
aria-controls="navbarSupportedContent15"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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>
<div class="ms-2 md:me-2">
<a class="text-xl text-black dark:text-white" href="#">Navbar</a>
</div>
<!-- Collapsible navbar container -->
<div
class="!visible mt-2 hidden flex-grow basis-[100%] items-center lg:mt-0 lg:!flex lg:basis-auto"
id="navbarSupportedContent15"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white lg:px-2"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Link</a
>
</li>
<!-- Disabled link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</li>
</ul>
<div class="w-[300px] lg:pe-2">
<div class="relative flex w-full flex-wrap items-stretch">
<input
type="search"
class="relative m-0 -me-0.5 block w-[1px] min-w-0 flex-auto rounded-s border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-1 text-base font-normal leading-[1.6] text-surface outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/10 dark:bg-body-dark dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon3" />
<!--Search button-->
<button
class="relative z-[2] rounded-e border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 motion-reduce:transition-none dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950"
type="button"
id="button-addon3"
data-twe-ripple-init>
Search
</button>
</div>
</div>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
External content
Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the navbar.
Collapsed content
Toggleable via the navbar brand.
<div
class="!visible hidden"
id="navbarToggleExternalContent"
data-twe-collapse-item>
<div class="block bg-[#332D2D] p-6 dark:text-neutral-50">
<p class="text-2xl text-white">Collapsed content</p>
<span class="text-neutral-400"
>Toggleable via the navbar brand.</span
>
</div>
</div>
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-[#332D2D] py-2 shadow-dark-mild lg:flex-wrap lg:justify-start lg:py-4"
data-twe-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"
type="button"
data-twe-collapse-init
data-twe-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span class="[&>svg]:w-7 [&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="1.3">
<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>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
initTWE,
} from "tw-elements";
initTWE({ Collapse });
Advanced Examples
Advanced examples of navbars usage.
Facebook style
A typical example of Facebook navbar usage - 3 columns with icons and distinctive notifications plus a search field on the left.
<nav
class="relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:py-4">
<div class="flex w-full flex-wrap items-center justify-between px-3">
<!-- Left elements -->
<div class="flex">
<!-- Brand -->
<a class="mx-2 my-1 flex items-center lg:mb-0 lg:mt-0" href="#">
<img
class="me-2"
src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
style="height: 20px"
alt="TE Logo"
loading="lazy" />
</a>
<form class="hidden md:flex">
<div class="flex w-[30%] items-center justify-between">
<input
type="search"
class="relative m-0 block flex-auto rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-1.5 text-base font-normal text-surface transition duration-300 ease-in-out focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none motion-reduce:transition-none dark:border-white/10 dark:bg-body-dark dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon2" />
<!--Search icon-->
<span
class="flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-gray-600 dark:text-white [&>svg]:w-5"
id="basic-addon2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd" />
</svg>
</span>
</div>
</form>
</div>
<!-- Left elements -->
<!-- Center elements -->
<ul
class="list-style-none mx-auto hidden flex-row ps-0 md:flex"
data-twe-navbar-nav-ref>
<li class="px-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
data-twe-nav-link-ref>
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
clip-rule="evenodd" />
</svg>
</span>
<!-- Notification counter -->
<span
class="absolute -mt-7 ms-4 rounded-full bg-danger px-[0.50em] py-[0.25em] text-[0.6rem] font-bold leading-none text-white"
>1</span
>
</a>
</li>
<li class="px-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
data-twe-nav-link-ref
><span class="[&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
d="M3.5 2.75a.75.75 0 00-1.5 0v14.5a.75.75 0 001.5 0v-4.392l1.657-.348a6.449 6.449 0 014.271.572 7.948 7.948 0 005.965.524l2.078-.64A.75.75 0 0018 12.25v-8.5a.75.75 0 00-.904-.734l-2.38.501a7.25 7.25 0 01-4.186-.363l-.502-.2a8.75 8.75 0 00-5.053-.439l-1.475.31V2.75z" />
</svg>
</span>
</a>
</li>
<li class="px-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
data-twe-nav-link-ref
><span class="[&>svg]:h-6 [&>svg]:w-6"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
d="M3.25 4A2.25 2.25 0 001 6.25v7.5A2.25 2.25 0 003.25 16h7.5A2.25 2.25 0 0013 13.75v-7.5A2.25 2.25 0 0010.75 4h-7.5zM19 4.75a.75.75 0 00-1.28-.53l-3 3a.75.75 0 00-.22.53v4.5c0 .199.079.39.22.53l3 3a.75.75 0 001.28-.53V4.75z" />
</svg>
</span>
</a>
</li>
<li class="px-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
data-twe-nav-link-ref>
<span class="[&>svg]:h-6 [&>svg]:w-6"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M6 5v1H4.667a1.75 1.75 0 00-1.743 1.598l-.826 9.5A1.75 1.75 0 003.84 19H16.16a1.75 1.75 0 001.743-1.902l-.826-9.5A1.75 1.75 0 0015.333 6H14V5a4 4 0 00-8 0zm4-2.5A2.5 2.5 0 007.5 5v1h5V5A2.5 2.5 0 0010 2.5zM7.5 10a2.5 2.5 0 005 0V8.75a.75.75 0 011.5 0V10a4 4 0 01-8 0V8.75a.75.75 0 011.5 0V10z"
clip-rule="evenodd" />
</svg>
</span>
</a>
</li>
<li class="px-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
data-twe-nav-link-ref
><span class="[&>svg]:h-6 [&>svg]:w-6"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
d="M10 9a3 3 0 100-6 3 3 0 000 6zM6 8a2 2 0 11-4 0 2 2 0 014 0zM1.49 15.326a.78.78 0 01-.358-.442 3 3 0 014.308-3.516 6.484 6.484 0 00-1.905 3.959c-.023.222-.014.442.025.654a4.97 4.97 0 01-2.07-.655zM16.44 15.98a4.97 4.97 0 002.07-.654.78.78 0 00.357-.442 3 3 0 00-4.308-3.517 6.484 6.484 0 011.907 3.96 2.32 2.32 0 01-.026.654zM18 8a2 2 0 11-4 0 2 2 0 014 0zM5.304 16.19a.844.844 0 01-.277-.71 5 5 0 019.947 0 .843.843 0 01-.277.71A6.975 6.975 0 0110 18a6.974 6.974 0 01-4.696-1.81z" />
</svg>
</span>
<span
class="absolute -mt-7 ms-5 rounded-full bg-danger px-[0.50em] py-[0.25em] text-[0.6rem] font-bold leading-none text-white"
>2</span
>
</a>
</li>
</ul>
<!-- Center elements -->
<!-- Right elements -->
<ul
class="list-style-none ms-auto flex flex-row ps-0 md:ps-4"
data-twe-navbar-nav-ref>
<li class="px-2" data-twe-nav-item-ref>
<a
class="flex text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
data-twe-nav-link-ref
><img
src="https://tecdn.b-cdn.net/img/new/avatars/1.jpg"
class="rounded-full"
style="height: 25px; width: 25px"
alt="TE Avatar"
loading="lazy" />
<strong class="ms-1 hidden sm:block">John</strong>
</a>
</li>
<li class="px-2" data-twe-nav-item-ref>
<a
class="text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
data-twe-nav-link-ref
><span class="[&>svg]:h-6 [&>svg]:w-6"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
clip-rule="evenodd" />
</svg>
</span>
</a>
</li>
<li class="relative px-2" data-twe-dropdown-ref>
<!-- First dropdown trigger -->
<a
class="hidden-arrow flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
id="dropdownMenuButton1"
role="button"
data-twe-dropdown-toggle-ref
aria-expanded="false">
<!-- Dropdown trigger icon -->
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
d="M3.505 2.365A41.369 41.369 0 019 2c1.863 0 3.697.124 5.495.365 1.247.167 2.18 1.108 2.435 2.268a4.45 4.45 0 00-.577-.069 43.141 43.141 0 00-4.706 0C9.229 4.696 7.5 6.727 7.5 8.998v2.24c0 1.413.67 2.735 1.76 3.562l-2.98 2.98A.75.75 0 015 17.25v-3.443c-.501-.048-1-.106-1.495-.172C2.033 13.438 1 12.162 1 10.72V5.28c0-1.441 1.033-2.717 2.505-2.914z" />
<path
d="M14 6c-.762 0-1.52.02-2.271.062C10.157 6.148 9 7.472 9 8.998v2.24c0 1.519 1.147 2.839 2.71 2.935.214.013.428.024.642.034.2.009.385.09.518.224l2.35 2.35a.75.75 0 001.28-.531v-2.07c1.453-.195 2.5-1.463 2.5-2.915V8.998c0-1.526-1.157-2.85-2.729-2.936A41.645 41.645 0 0014 6z" />
</svg>
</span>
<!-- Notification counter -->
<span
class="absolute -mt-6 ms-5 rounded-full bg-danger px-[0.50em] py-[0.25em] text-[0.6rem] font-bold leading-none text-white"
>6</span
>
</a>
<!-- Dropdown menu -->
<ul
class="absolute z-[1000] float-left 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-surface-dark data-[twe-dropdown-show]:block"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<!-- Dropdown menu items -->
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Some news</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another news</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</li>
<li
class="relative px-2"
data-twe-dropdown-ref
data-twe-dropdown-alignment="end">
<!-- Second dropdown trigger -->
<a
class="hidden-arrow mr flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
id="dropdownMenuButton1"
role="button"
data-twe-dropdown-toggle-ref
aria-expanded="false">
<!-- Dropdown trigger icon -->
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<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-6 ms-3 rounded-full bg-danger px-[0.50em] py-[0.25em] text-[0.6rem] font-bold leading-none text-white"
>12</span
>
</a>
<!-- Dropdown menu -->
<ul
class="absolute z-[1000] float-left 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-surface-dark data-[twe-dropdown-show]:block"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<!-- Dropdown menu items -->
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Some news</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another news</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</li>
<li
class="relative px-2"
data-twe-dropdown-ref
data-twe-dropdown-alignment="end">
<!-- Third dropdown trigger -->
<a
class="hidden-arrow mr flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80"
href="#"
id="dropdownMenuButton1"
role="button"
data-twe-dropdown-toggle-ref
aria-expanded="false">
<!-- Dropdown trigger icon -->
<span class="[&>svg]:h-6 [&>svg]:w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<!-- Dropdown menu -->
<ul
class="absolute z-[1000] float-left 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-surface-dark data-[twe-dropdown-show]:block"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<!-- Dropdown menu items -->
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Some news</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another news</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</li>
</ul>
<!-- Right elements -->
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown });
Related resources
Tutorials:
navbar
containers
colors
icons
navbar icons and logo
dark mode
arbitrary values
flexbox
spacing
buttons
advanced grid
reorder columns
sizing
inputs
footer
Extended Docs:
colors
hover effects
icons
typography
breadcrumbs
mega menu
scrollspy
sidenav
tabs
avatar
buttons
dropdown
link
notifications
social buttons
search
ripple
breakpoints
dark theme
display flex
icons
position
spacing
sticky header
text color
tree view
z index