Basic example
Mega menus are a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. They are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.
Basic example includes full-width dropdown menu in a navigation bar with clickable items.
<nav
class="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"
data-twe-navbar-ref>
<div class="px-6">
<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">
<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="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContent1"
data-twe-collapse-item>
<ul class="me-auto flex flex-row" data-twe-navbar-nav-ref>
<li data-twe-nav-item-ref>
<a
class="block py-2 pe-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 lg:px-2"
href="#!"
>Regular link</a
>
</li>
<li class="static" data-twe-nav-item-ref data-twe-dropdown-ref>
<a
class="flex items-center whitespace-nowrap py-2 pe-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 lg:px-2"
href="#"
type="button"
id="dropdownMenuButtonX"
data-twe-dropdown-toggle-ref
aria-expanded="false"
data-twe-nav-link-ref
>Mega menu
<span class="ms-2 [&>svg]:h-5 [&>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>
<div
class="absolute left-0 right-0 top-full z-[1000] mt-0 hidden w-full border-none bg-white bg-clip-padding shadow-lg data-[twe-dropdown-show]:block dark:bg-neutral-700"
aria-labelledby="dropdownMenuButtonX"
data-twe-dropdown-menu-ref>
<div class="px-6 py-5 lg:px-8">
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
<div>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Lorem ipsum</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Dolor sit</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Amet consectetur</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Cras justo odio</a
>
<a
href="#!"
aria-current="true"
class="block w-full bg-white px-6 py-2 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"
>Adipisicing elit</a
>
</div>
<div>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Explicabo voluptas</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Perspiciatis quo</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Cras justo odio</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Laudantium maiores</a
>
<a
href="#!"
aria-current="true"
class="block w-full bg-white px-6 py-2 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"
>Provident dolor</a
>
</div>
<div>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Iste quaerato</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Cras justo odio</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Est iure</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Praesentium</a
>
<a
href="#!"
aria-current="true"
class="block w-full bg-white px-6 py-2 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"
>Laboriosam</a
>
</div>
<div>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Cras justo odio</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Saepe</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Vel alias</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Sunt doloribus</a
>
<a
href="#!"
aria-current="true"
class="block w-full bg-white px-6 py-2 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"
>Cum dolores</a
>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown, Ripple });
Bolded headings
Use headings to describe each column in the mega menu.
<nav
class="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"
data-twe-navbar-ref>
<div class="px-6">
<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">
<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="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContent2"
data-twe-collapse-item>
<ul class="me-auto flex flex-row" data-twe-navbar-nav-ref>
<li data-twe-nav-item-ref>
<a
class="block py-2 pe-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 lg:px-2"
href="#!"
>Regular link</a
>
</li>
<li class="static" data-twe-nav-item-ref data-twe-dropdown-ref>
<a
class="flex items-center whitespace-nowrap py-2 pe-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 lg:px-2"
href="#"
type="button"
id="dropdownMenuButton1"
data-twe-dropdown-toggle-ref
aria-expanded="false"
data-twe-nav-link-ref
>Mega menu
<span class="ms-2 [&>svg]:h-5 [&>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>
<div
class="absolute left-0 right-0 top-full z-[1000] mt-0 hidden w-full border-none bg-white bg-clip-padding data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<div class="px-6 py-5 lg:px-8">
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Lorem ipsum
</p>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Dolor sit</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Amet consectetur</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Cras justo odio</a
>
<a
href="#!"
aria-current="true"
class="block w-full bg-white px-6 py-2 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"
>Adipisicing elit</a
>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Explit voluptas
</p>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Perspiciatis quo</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Cras justo odio</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Laudantium maiores</a
>
<a
href="#!"
aria-current="true"
class="block w-full bg-white px-6 py-2 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"
>Provident dolor</a
>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Iste quaerato
</p>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Cras justo odio</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Est iure</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Praesentium</a
>
<a
href="#!"
aria-current="true"
class="block w-full bg-white px-6 py-2 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"
>Laboriosam</a
>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Cras justo odio
</p>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Saepe</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Vel alias</a
>
<a
href="#!"
aria-current="true"
class="block w-full border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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"
>Sunt doloribus</a
>
<a
href="#!"
aria-current="true"
class="block w-full bg-white px-6 py-2 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"
>Cum dolores</a
>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown, Ripple });
Punctuation
Use punctuation to more clearly mark clickable items in the mega menu.
<nav
class="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"
data-twe-navbar-ref>
<div class="px-6">
<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">
<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="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContent3"
data-twe-collapse-item>
<ul class="me-auto flex flex-row" data-twe-navbar-nav-ref>
<li data-twe-nav-item-ref>
<a
class="block py-2 pe-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 lg:px-2"
href="#!"
>Regular link</a
>
</li>
<li class="static" data-twe-nav-item-ref data-twe-dropdown-ref>
<a
class="flex items-center whitespace-nowrap py-2 pe-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 lg:px-2"
href="#"
type="button"
id="dropdownMenuButtonX"
data-twe-dropdown-toggle-ref
aria-expanded="false"
data-twe-nav-link-ref
>Mega menu
<span class="ms-2 [&>svg]:h-5 [&>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>
<div
class="absolute left-0 right-0 top-full z-[1000] mt-0 hidden w-full border-none bg-white bg-clip-padding shadow-lg data-[twe-dropdown-show]:block dark:bg-neutral-700"
aria-labelledby="dropdownMenuButtonX"
data-twe-dropdown-menu-ref>
<div class="px-6 py-5 lg:px-8">
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Lorem ipsum
</p>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Dolor sit
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Amet consectetur
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Cras justo odio
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center bg-white px-6 py-2 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Adipisicing elit
</a>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Explit voluptas
</p>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Perspiciatis quo
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Cras justo odio
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Laudant maiores
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center bg-white px-6 py-2 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Provident dolor
</a>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Iste quaerato
</p>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Cras justo odio
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Est iure
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Praesentium
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center bg-white px-6 py-2 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Laboriosam
</a>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Cras justo odio
</p>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Saepe
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Vel alias
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Sunt doloribus
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center bg-white px-6 py-2 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">
<span class="me-1.5 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd" />
</svg>
</span>
Cum dolores
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown, Ripple });
Media list
Use media lists to add images to each section, bolded headers and different text styles to your mega menu.
<nav
class="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"
data-twe-navbar-ref>
<div class="px-6">
<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">
<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="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContent4"
data-twe-collapse-item>
<ul class="me-auto flex flex-row" data-twe-navbar-nav-ref>
<li data-twe-nav-item-ref>
<a
class="block py-2 pe-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 lg:px-2"
href="#!"
>Regular link</a
>
</li>
<li class="static" data-twe-nav-item-ref data-twe-dropdown-ref>
<a
class="flex items-center whitespace-nowrap py-2 pe-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 lg:px-2"
href="#"
type="button"
id="dropdownMenuButtonY"
data-twe-dropdown-toggle-ref
aria-expanded="false"
data-twe-nav-link-ref
>Mega menu
<span class="ms-2 [&>svg]:h-5 [&>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>
<div
class="absolute left-0 right-0 top-full z-[1000] mt-0 hidden w-full border-none bg-white bg-clip-padding shadow-lg data-[twe-dropdown-show]:block dark:bg-neutral-700"
aria-labelledby="dropdownMenuButtonY"
data-twe-dropdown-menu-ref>
<div class="px-6 py-5 lg:px-8">
<div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Lorem ipsum
</p>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center bg-white px-6 py-3 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Explit voluptas
</p>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center bg-white px-6 py-3 text-neutral-700 transition duration-150 ease-in-out 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Iste quaerato
</p>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center bg-white px-6 py-3 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
</div>
<div>
<p
class="block w-full border-b border-neutral-100 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-white/10 dark:text-white">
Cras justo odio
</p>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center border-b border-neutral-100 bg-white px-6 py-2 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:border-white/10 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
<a
href="#!"
aria-current="true"
class="flex w-full items-center bg-white px-6 py-3 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">
<div class="shrink-0">
<img
src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
class="w-20 rounded shadow-lg dark:shadow-black/10"
alt="Hollywood Sign on The Hill" />
</div>
<div class="ms-4 grow">
<p class="mb-1 font-semibold">
Sed ut perspiciatis unde omnis
</p>
<p><u>15.07.2021</u></p>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown, Ripple });
Big news
Mega menu can even accommodate full-size sections with images and short descriptions.
<nav
class="relative flex w-full items-center justify-between bg-neutral-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start"
data-twe-navbar-ref>
<div class="px-6">
<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">
<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="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContent5"
data-twe-collapse-item>
<ul class="me-auto flex flex-row" data-twe-navbar-nav-ref>
<li data-twe-nav-item-ref>
<a
class="block py-2 pe-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 lg:px-2"
href="#!"
>Regular link</a
>
</li>
<li class="static" data-twe-nav-item-ref data-twe-dropdown-ref>
<a
class="flex items-center whitespace-nowrap py-2 pe-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 lg:px-2"
href="#"
type="button"
id="dropdownMenuButtonU"
data-twe-dropdown-toggle-ref
aria-expanded="false"
data-twe-nav-link-ref
>Mega menu
<span class="ms-2 [&>svg]:h-5 [&>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>
<div
class="absolute left-0 right-0 top-full z-[1000] mt-0 hidden w-full border-none bg-white bg-clip-padding shadow-lg data-[twe-dropdown-show]:block dark:bg-neutral-700"
aria-labelledby="dropdownMenuButtonU"
data-twe-dropdown-menu-ref>
<div class="px-6 py-5 lg:px-8">
<div class="grid gap-6 md:grid-cols-3">
<div>
<p
class="block w-full pt-2 font-semibold uppercase text-neutral-700 dark:text-white">
Lorem ipsum
</p>
<div
class="relative my-4 overflow-hidden bg-cover bg-no-repeat"
data-twe-ripple-init
data-twe-ripple-color="light">
<img
src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
class="w-full rounded-md shadow-lg dark:shadow-black/10"
alt="Louvre" />
<a href="#!">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden rounded-md bg-zinc-50/20 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
</a>
</div>
<div
class="mb-3 mt-1 flex items-center justify-between">
<p
class="flex items-center text-primary-700 dark:text-primary-500">
<span class="me-2 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<path
d="M21.721 12.752a9.711 9.711 0 00-.945-5.003 12.754 12.754 0 01-4.339 2.708 18.991 18.991 0 01-.214 4.772 17.165 17.165 0 005.498-2.477zM14.634 15.55a17.324 17.324 0 00.332-4.647c-.952.227-1.945.347-2.966.347-1.021 0-2.014-.12-2.966-.347a17.515 17.515 0 00.332 4.647 17.385 17.385 0 005.268 0zM9.772 17.119a18.963 18.963 0 004.456 0A17.182 17.182 0 0112 21.724a17.18 17.18 0 01-2.228-4.605zM7.777 15.23a18.87 18.87 0 01-.214-4.774 12.753 12.753 0 01-4.34-2.708 9.711 9.711 0 00-.944 5.004 17.165 17.165 0 005.498 2.477zM21.356 14.752a9.765 9.765 0 01-7.478 6.817 18.64 18.64 0 001.988-4.718 18.627 18.627 0 005.49-2.098zM2.644 14.752c1.682.971 3.53 1.688 5.49 2.099a18.64 18.64 0 001.988 4.718 9.765 9.765 0 01-7.478-6.816zM13.878 2.43a9.755 9.755 0 016.116 3.986 11.267 11.267 0 01-3.746 2.504 18.63 18.63 0 00-2.37-6.49zM12 2.276a17.152 17.152 0 012.805 7.121c-.897.23-1.837.353-2.805.353-.968 0-1.908-.122-2.805-.353A17.151 17.151 0 0112 2.276zM10.122 2.43a18.629 18.629 0 00-2.37 6.49 11.266 11.266 0 01-3.746-2.504 9.754 9.754 0 016.116-3.985z" />
</svg>
</span>
Travels
</p>
<p><u>15.07.2021</u></p>
</div>
<a href="#!">
<h5 class="mb-2 text-xl font-semibold">
This is title of the news
</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Odit, iste aliquid. Sed id nihil magni, sint
vero provident esse numquam perferendis ducimus
dicta adipisci iusto nam temporibus modi animi
laboriosam.
</p>
</a>
</div>
<div>
<p
class="block w-full pt-2 font-semibold uppercase text-neutral-700 dark:text-white">
Explicabo voluptas
</p>
<div
class="relative my-4 overflow-hidden bg-cover bg-no-repeat"
data-twe-ripple-init
data-twe-ripple-color="light">
<img
src="https://tecdn.b-cdn.net/img/new/fluid/city/011.webp"
class="w-full rounded-md shadow-lg dark:shadow-black/10"
alt="Louvre" />
<a href="#!">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden rounded-md bg-zinc-50/20 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
</a>
</div>
<div
class="mb-3 mt-1 flex items-center justify-between">
<p
class="flex items-center text-danger-700 dark:text-danger-500">
<span class="me-2 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<path
fill-rule="evenodd"
d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
clip-rule="evenodd" />
<path
fill-rule="evenodd"
d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
clip-rule="evenodd" />
</svg>
</span>
Business
</p>
<p><u>15.07.2021</u></p>
</div>
<a href="#!">
<h5 class="mb-2 text-xl font-semibold">
This is title of the news
</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Odit, iste aliquid. Sed id nihil magni, sint
vero provident esse numquam perferendis ducimus
dicta adipisci iusto nam temporibus modi animi
laboriosam.
</p>
</a>
</div>
<div>
<p
class="block w-full pt-2 font-semibold uppercase text-neutral-700 dark:text-white">
Cras justo odio
</p>
<div
class="relative my-4 overflow-hidden bg-cover bg-no-repeat"
data-twe-ripple-init
data-twe-ripple-color="light">
<img
src="https://tecdn.b-cdn.net/img/new/fluid/city/018.webp"
class="w-full rounded-md shadow-lg dark:shadow-black/10"
alt="Louvre" />
<a href="#!">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden rounded-md bg-zinc-50/20 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
</a>
</div>
<div
class="mb-3 mt-1 flex items-center justify-between">
<p
class="flex items-center text-warning-800 dark:text-warning-500">
<span class="me-2 [&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<path
fill-rule="evenodd"
d="M14.447 3.027a.75.75 0 01.527.92l-4.5 16.5a.75.75 0 01-1.448-.394l4.5-16.5a.75.75 0 01.921-.526zM16.72 6.22a.75.75 0 011.06 0l5.25 5.25a.75.75 0 010 1.06l-5.25 5.25a.75.75 0 11-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 010-1.06zm-9.44 0a.75.75 0 010 1.06L2.56 12l4.72 4.72a.75.75 0 11-1.06 1.06L.97 12.53a.75.75 0 010-1.06l5.25-5.25a.75.75 0 011.06 0z"
clip-rule="evenodd" />
</svg>
</span>
Technology
</p>
<p><u>15.07.2021</u></p>
</div>
<a href="#!">
<h5 class="mb-2 text-xl font-semibold">
This is title of the news
</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Odit, iste aliquid. Sed id nihil magni, sint
vero provident esse numquam perferendis ducimus
dicta adipisci iusto nam temporibus modi animi
laboriosam.
</p>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Collapse,
Dropdown,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Dropdown, Ripple });
Related resources
Tutorials:
grid system
responsiveness
navbar
hover state
dark mode
spacing
buttons
rounded corners
shadows
lists
advanced grid
reorder columns
sizing
Extended Docs:
colors
dividers
hover effects
icons
images
breadcrumbs
navbar
pills
tabs
accordion
button group
buttons
dropdown
link
list group
breakpoints
center grid items
display block
display flex
flexbox
grid columns
grid gap
grid span
paragraph spacing
tree view