search results:

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

    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-neutral-50 py-2 text-neutral-600 shadow-lg dark:bg-neutral-700 dark:text-neutral-300 dark:shadow-black/5 lg:flex-wrap lg:justify-start"
            data-te-navbar-ref>
            <div class="px-6">
              <button
                class="border-0 bg-transparent py-3 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:hidden"
                type="button"
                data-te-collapse-init
                data-te-target="#navbarSupportedContentX"
                aria-controls="navbarSupportedContentX"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="[&>svg]:w-8">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="h-8 w-8">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                  </svg>
                </span>
              </button>
              <div
                class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
                id="navbarSupportedContentX"
                data-te-collapse-item>
                <ul class="mr-auto flex flex-row" data-te-navbar-nav-ref>
                  <li data-te-nav-item-ref>
                    <a
                      class="block py-2 pr-2  transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#!"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      >Regular link</a
                    >
                  </li>
                  <li class="static" data-te-nav-item-ref data-te-dropdown-ref>
                    <a
                      class="flex items-center whitespace-nowrap py-2 pr-2  transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      type="button"
                      id="dropdownMenuButtonX"
                      data-te-dropdown-toggle-ref
                      aria-expanded="false"
                      data-te-nav-link-ref
                      >Mega menu
                      <span class="ml-2 w-2">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                          class="h-5 w-5">
                          <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 text-neutral-600 shadow-lg dark:bg-neutral-700 dark:text-neutral-200 [&[data-te-dropdown-show]]:block"
                      aria-labelledby="dropdownMenuButtonX"
                      data-te-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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Lorem ipsum</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Dolor sit</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Amet consectetur</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cras justo odio</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Adipisicing elit</a
                            >
                          </div>
                          <div>
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Explicabo voluptas</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Perspiciatis quo</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cras justo odio</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Laudantium maiores</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Provident dolor</a
                            >
                          </div>
                          <div>
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Iste quaerato</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cras justo odio</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Est iure</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Praesentium</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Laboriosam</a
                            >
                          </div>
                          <div>
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cras justo odio</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Saepe</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Vel alias</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Sunt doloribus</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cum dolores</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Collapse,
            Dropdown,
            Ripple,
            initTE,
          } from "tw-elements";
          
          initTE({ Collapse, Dropdown, Ripple });
          
            
        

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

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

    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-neutral-50 py-2 text-neutral-600 shadow-lg dark:bg-neutral-700 dark:text-neutral-300 dark:shadow-black/5 lg:flex-wrap lg:justify-start"
            data-te-navbar-ref>
            <div class="px-6">
              <button
                class="border-0 bg-transparent py-3 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:hidden"
                type="button"
                data-te-collapse-init
                data-te-target="#navbarSupportedContentY"
                aria-controls="navbarSupportedContentY"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="[&>svg]:w-8">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="h-8 w-8">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                  </svg>
                </span>
              </button>
              <div
                class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
                id="navbarSupportedContentY"
                data-te-collapse-item>
                <ul class="mr-auto flex flex-row" data-te-navbar-nav-ref>
                  <li data-te-nav-item-ref>
                    <a
                      class="block py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#!"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      >Regular link</a
                    >
                  </li>
                  <li class="static" data-te-nav-item-ref data-te-dropdown-ref>
                    <a
                      class="flex items-center whitespace-nowrap py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      type="button"
                      id="dropdownMenuButtonX"
                      data-te-dropdown-toggle-ref
                      aria-expanded="false"
                      data-te-nav-link-ref
                      >Mega menu
                      <span class="ml-2 w-2">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                          class="h-5 w-5">
                          <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 text-neutral-600 shadow-lg dark:bg-neutral-700 dark:text-neutral-200 [&[data-te-dropdown-show]]:block"
                      aria-labelledby="dropdownMenuButtonY"
                      data-te-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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Lorem ipsum
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Dolor sit</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Amet consectetur</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cras justo odio</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Adipisicing elit</a
                            >
                          </div>
                          <div>
                            <p
                              class="block w-full border-b border-neutral-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Explit voluptas
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Perspiciatis quo</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cras justo odio</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Laudantium maiores</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Provident dolor</a
                            >
                          </div>
                          <div>
                            <p
                              class="block w-full border-b border-neutral-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Iste quaerato
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cras justo odio</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Est iure</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Praesentium</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Laboriosam</a
                            >
                          </div>
                          <div>
                            <p
                              class="block w-full border-b border-neutral-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Cras justo odio
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Saepe</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Vel alias</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Sunt doloribus</a
                            >
                            <a
                              href="#!"
                              aria-current="true"
                              class="block w-full px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white"
                              >Cum dolores</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Collapse,
            Dropdown,
            Ripple,
            initTE,
          } from "tw-elements";
          
          initTE({ 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-neutral-50 py-2 text-neutral-600 shadow-lg dark:bg-neutral-700 dark:text-neutral-300 dark:shadow-black/5 lg:flex-wrap lg:justify-start"
            data-te-navbar-ref>
            <div class="px-6">
              <button
                class="border-0 bg-transparent py-3 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:hidden"
                type="button"
                data-te-collapse-init
                data-te-target="#navbarSupportedContentZ"
                aria-controls="navbarSupportedContentZ"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="[&>svg]:w-8">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="h-8 w-8">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                  </svg>
                </span>
              </button>
              <div
                class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
                id="navbarSupportedContentZ"
                data-te-collapse-item>
                <ul class="mr-auto flex flex-row" data-te-navbar-nav-ref>
                  <li data-te-nav-item-ref>
                    <a
                      class="block py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#!"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      >Regular link</a
                    >
                  </li>
                  <li class="static" data-te-nav-item-ref data-te-dropdown-ref>
                    <a
                      class="flex items-center whitespace-nowrap py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      type="button"
                      id="dropdownMenuButtonX"
                      data-te-dropdown-toggle-ref
                      aria-expanded="false"
                      data-te-nav-link-ref
                      >Mega menu
                      <span class="ml-2 w-2">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                          class="h-5 w-5">
                          <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 text-neutral-600 shadow-lg dark:bg-neutral-700 dark:text-neutral-200 [&[data-te-dropdown-show]]:block"
                      aria-labelledby="dropdownMenuButtonZ"
                      data-te-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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Lorem ipsum
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="flex w-full items-center border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Explit voluptas
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="flex w-full items-center border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Iste quaerato
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="flex w-full items-center border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Cras justo odio
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="flex w-full items-center border-b border-neutral-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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-200 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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 px-6 py-2 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <span class="mr-1.5">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="currentColor"
                                  class="h-5 w-5">
                                  <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,
            initTE,
          } from "tw-elements";
          
          initTE({ 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-neutral-50 py-2 text-neutral-600 shadow-lg dark:bg-neutral-700 dark:text-neutral-200 dark:shadow-black/5 lg:flex-wrap lg:justify-start"
            data-te-navbar-ref>
            <div class="px-6">
              <button
                class="border-0 bg-transparent py-3 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:hidden"
                type="button"
                data-te-collapse-init
                data-te-target="#navbarSupportedContentQ"
                aria-controls="navbarSupportedContentQ"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="[&>svg]:w-8">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="h-8 w-8">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                  </svg>
                </span>
              </button>
              <div
                class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
                id="navbarSupportedContentQ"
                data-te-collapse-item>
                <ul class="mr-auto flex flex-row" data-te-navbar-nav-ref>
                  <li data-te-nav-item-ref>
                    <a
                      class="block py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#!"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      >Regular link</a
                    >
                  </li>
                  <li class="static" data-te-nav-item-ref data-te-dropdown-ref>
                    <a
                      class="flex items-center whitespace-nowrap py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      type="button"
                      id="dropdownMenuButtonQ"
                      data-te-dropdown-toggle-ref
                      aria-expanded="false"
                      data-te-nav-link-ref
                      >Mega menu
                      <span class="ml-2 w-2">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                          class="h-5 w-5">
                          <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 dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
                      aria-labelledby="dropdownMenuButtonY"
                      data-te-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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Lorem ipsum
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="flex w-full items-center border-b border-neutral-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Explit voluptas
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="flex w-full items-center border-b border-neutral-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Iste quaerato
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="flex w-full items-center border-b border-neutral-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-2 font-semibold uppercase text-neutral-700 dark:border-neutral-500 dark:text-white">
                              Cras justo odio
                            </p>
                            <a
                              href="#!"
                              aria-current="true"
                              class="flex w-full items-center border-b border-neutral-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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-200 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:border-neutral-500 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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 px-6 py-3 transition duration-150 ease-in-out hover:bg-neutral-50 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-white">
                              <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="ml-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,
            initTE,
          } from "tw-elements";
          
          initTE({ 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 text-neutral-600 shadow-lg dark:bg-neutral-700 dark:text-neutral-200 dark:shadow-black/5 lg:flex-wrap lg:justify-start"
            data-te-navbar-ref>
            <div class="px-6">
              <button
                class="leading-nonetransition-shadow border-0 bg-transparent py-3 text-xl duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:hidden"
                type="button"
                data-te-collapse-init
                data-te-target="#navbarSupportedContentU"
                aria-controls="navbarSupportedContentU"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="[&>svg]:w-8">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="h-8 w-8">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                  </svg>
                </span>
              </button>
              <div
                class="!visible hidden flex-grow basis-[100%] items-center lg:!flex lg:basis-auto"
                id="navbarSupportedContentU"
                data-te-collapse-item>
                <ul class="mr-auto flex flex-row" data-te-navbar-nav-ref>
                  <li data-te-nav-item-ref>
                    <a
                      class="block py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#!"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      >Regular link</a
                    >
                  </li>
                  <li class="static" data-te-nav-item-ref data-te-dropdown-ref>
                    <a
                      class="flex items-center whitespace-nowrap py-2 pr-2 transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:px-2"
                      href="#"
                      data-te-ripple-init
                      data-te-ripple-color="light"
                      type="button"
                      id="dropdownMenuButtonU"
                      data-te-dropdown-toggle-ref
                      aria-expanded="false"
                      data-te-nav-link-ref
                      >Mega menu
                      <span class="ml-2 w-2">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                          class="h-5 w-5">
                          <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 text-neutral-700 shadow-lg dark:bg-neutral-700 dark:text-neutral-200 [&[data-te-dropdown-show]]:block"
                      aria-labelledby="dropdownMenuButtonU"
                      data-te-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">
                              Lorem ipsum
                            </p>
                            <div
                              class="relative my-4 overflow-hidden bg-cover bg-no-repeat"
                              data-te-ripple-init
                              data-te-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-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
                                  style="background-color: rgba(251, 251, 251, 0.2)"></div>
                              </a>
                            </div>
                            <div
                              class="mb-3 mt-1 flex items-center justify-between">
                              <p
                                class="flex items-center text-primary dark:text-primary-400">
                                <span class="mr-2 w-4">
                                  <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24"
                                    fill="currentColor"
                                    class="h-5 w-5">
                                    <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">
                              Explicabo voluptas
                            </p>
                            <div
                              class="relative my-4 overflow-hidden bg-cover bg-no-repeat"
                              data-te-ripple-init
                              data-te-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-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
                                  style="background-color: rgba(251, 251, 251, 0.2)"></div>
                              </a>
                            </div>
                            <div
                              class="mb-3 mt-1 flex items-center justify-between">
                              <p
                                class="flex items-center text-danger dark:text-danger-400">
                                <span class="mr-2 w-4">
                                  <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24"
                                    fill="currentColor"
                                    class="h-5 w-5">
                                    <path
                                      fill-rule="evenodd"
                                      d="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">
                              Cras justo odio
                            </p>
                            <div
                              class="relative my-4 overflow-hidden bg-cover bg-no-repeat"
                              data-te-ripple-init
                              data-te-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-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
                                  style="background-color: rgba(251, 251, 251, 0.2)"></div>
                              </a>
                            </div>
                            <div
                              class="mb-3 mt-1 flex items-center justify-between">
                              <p class="flex items-center text-warning">
                                <span class="mr-2 w-4">
                                  <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24"
                                    fill="currentColor"
                                    class="h-5 w-5">
                                    <path
                                      fill-rule="evenodd"
                                      d="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,
            initTE,
          } from "tw-elements";
          
          initTE({ Collapse, Dropdown, Ripple });
          
            
        

    Related resources

    BootstrapMega Menu Nested Dropdown Multiselect Dropdown Collapse

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

    • 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
    © 2023 Copyright: MDBootstrap.com