Tailwind CSS React Dropdown Menu - Horizon UI

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

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

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

👋 Hey, Adela

Profile Settings Newsletter Settings Log Out

import Dropdownfrom "components/dropdown";
 
export default function Example() {
  return (
    <Dropdown
      button={
      <button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
        Dropdown Menu
      </button>
      }
      children={
        <div className="flex h-max w-56 flex-col justify-start rounded-[20px] bg-white bg-cover bg-no-repeat pb-4 shadow-[0_20px_25px_-5px] shadow-shadow-500 dark:!bg-navy-700 dark:text-white dark:shadow-none">
          <div className="mt-3 ml-4">
            <div className="flex items-center gap-2">
              <p className="text-sm font-bold text-navy-700 dark:text-white">
                👋 Hey, Adela
              </p>{" "}
            </div>
          </div>
          <div className="mt-3 h-px w-full bg-gray-200 dark:bg-white/20 " />
 
          <div className="mt-3 ml-4 flex flex-col">
            <a
              href=" "
              className="text-sm text-gray-800 dark:text-white hover:dark:text-white"
            >
              Profile Settings
            </a>
            <a
              href=" "
              className="mt-3 text-sm text-gray-800 dark:text-white hover:dark:text-white"
            >
              Newsletter Settings
            </a>
            <a
              href=" "
              className="mt-3 text-sm font-medium text-red-500 hover:text-red-500"
            >
              Log Out
            </a>
          </div>
        </div>
      }
      classNames={"py-2 bottom-[-30px] -left-[180px] w-max"}
    />
  );
}

modal

popover