Tailwind CSS Alerts

Use our responsive Tailwind CSS vertical menu, that can take the user anywhere on your web app!

A menu displays a list of choices on temporary surfaces. It appears when users interact with a button, action, or other control. The menu also ensures a consistent and predictable user experience by adhering to an established set of principles

See below our menu example that you can use in your Tailwind CSS project. The example comes in different colors and styles, so you can adapt them easily to your needs.


<div class="menu">
  <button
    class="button button-pink"
    menu-trigger="true"
    aria-expanded="true"
    data-ripple-light="true"
  >
    menu
  </button>
  <ul class="dropdown-menu p-2">
    <li class="mb-2">
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="my-auto ml-2 normal-case">Menu Item 1</span>
        </div>
      </a>
    </li>
    <li class="mb-2">
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="my-auto ml-2 normal-case">Menu Item 2</span>
        </div>
      </a>
    </li>
    <li>
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="my-auto ml-2 normal-case">Menu Item 3</span>
        </div>
      </a>
    </li>
  </ul>
</div>

Menu Right

Use this example to create a simple menu positioned in the right side of the screen.

<div class="menu ml-auto">
  <button
    class="button button-cyan"
    menu-trigger="true"
    aria-expanded="true"
    data-ripple-light="true"
  >
    menu right
  </button>
  <ul class="dropdown-menu menu-right p-2">
    <li class="mb-2">
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="material-icons text-xl">email</span>
          <span class="my-auto ml-2 normal-case">Check new messages</span>
        </div>
      </a>
    </li>
    <li class="mb-2">
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="material-icons text-xl">podcasts</span>
          <span class="my-auto ml-2 normal-case">Manage podcast session</span>
        </div>
      </a>
    </li>
    <li>
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="material-icons text-xl">shopping_cart</span>
          <span class="my-auto ml-2 normal-case"
            >Payment successfully completed</span
          >
        </div>
      </a>
    </li>
  </ul>
</div>

Nested Menu

Help users navigate easier your page with this nested menu example that will help you with content organization.

<div class="menu">
  <button
    class="button button-red"
    menu-trigger="true"
    aria-expanded="true"
    data-ripple-light="true"
  >
    menu
  </button>
  <ul class="dropdown-menu p-2">
    <li class="mb-2">
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="my-auto ml-2 normal-case">Menu Item 1</span>
        </div>
      </a>
    </li>
    <li class="mb-2">
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="my-auto ml-2 normal-case">Nested Menu</span>
        </div>
      </a>
      <ul class="dropdown-menu p-2">
        <li class="mb-2">
          <a class="menu-item" href="#">
            <div class="flex items-center py-1">
              <span class="my-auto ml-2 normal-case">Nested Item 1</span>
            </div>
          </a>
        </li>
        <li class="mb-2">
          <a class="menu-item" href="#">
            <div class="flex items-center py-1">
              <span class="my-auto ml-2 normal-case">Nested Item 2</span>
            </div>
          </a>
        </li>
        <li>
          <a class="menu-item" href="#">
            <div class="flex items-center py-1">
              <span class="my-auto ml-2 normal-case">Nested Item 3</span>
            </div>
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a class="menu-item" href="#">
        <div class="flex items-center py-1">
          <span class="my-auto ml-2 normal-case">Menu Item 2</span>
        </div>
      </a>
    </li>
  </ul>
</div>

Required Scrips

The menu component needs a required script file to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/menu.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/menu.js"></script>
Edit this page on Github