search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips

    Mega Menu

    Tailwind CSS Mega Menu

    Use responsive mega-menu component with helper examples for mega menu dropdown, megamenu with submenu on hover & more. Free download, open-source license.


    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.

    • Regular link
    • Mega menu
      Lorem ipsum Dolor sit Amet consectetur Cras justo odio Adipisicing elit
      Explicabo voluptas Perspiciatis quo Cras justo odio Laudantium maiores Provident dolor
      Iste quaerato Cras justo odio Est iure Praesentium Laboriosam
      Cras justo odio Saepe Vel alias Sunt doloribus Cum dolores
    • HTML
    • javascript
            
                
          <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 });
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Bolded headings

    Use headings to describe each column in the mega menu.

    • Regular link
    • Mega menu

      Lorem ipsum

      Dolor sit Amet consectetur Cras justo odio Adipisicing elit

      Explit voluptas

      Perspiciatis quo Cras justo odio Laudantium maiores Provident dolor

      Iste quaerato

      Cras justo odio Est iure Praesentium Laboriosam

      Cras justo odio

      Saepe Vel alias Sunt doloribus Cum dolores
    • HTML
    • javascript
            
                
          <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.

    • Regular link
    • Mega menu

      Lorem ipsum

      Dolor sit Amet consectetur Cras justo odio Adipisicing elit

      Explit voluptas

      Perspiciatis quo Cras justo odio Laudant maiores Provident dolor

      Iste quaerato

      Cras justo odio Est iure Praesentium Laboriosam

      Cras justo odio

      Saepe Vel alias Sunt doloribus Cum dolores
    • HTML
    • javascript
            
                
          <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.

    • Regular link
    • Mega menu

      Lorem ipsum

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Explit voluptas

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Iste quaerato

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Cras justo odio

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

      Hollywood Sign on The Hill

      Sed ut perspiciatis unde omnis

      15.07.2021

    • HTML
    • javascript
            
                
          <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.

    • Regular link
    • Mega menu

      Lorem ipsum

      Louvre

      Travels

      15.07.2021

      This is title of the news

      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.

      Explicabo voluptas

      Louvre

      Business

      15.07.2021

      This is title of the news

      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.

      Cras justo odio

      Louvre

      Technology

      15.07.2021

      This is title of the news

      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.

    • HTML
    • javascript
            
                
          <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

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction less is more power of visual hierarchy art of prioritization de emphasize with no mercy lowering contrast low contrast vs low aesthetics beyond borders let it breathe user experience do not start with the roof project personality principles tips and tricks
    • Basic example
    • Bolded headings
    • Punctation
    • Media list
    • Big news
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO