Dropdown Menu

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal

npx @svg-animated-icons/cli add {icon} --react

Flag	Description
`--dest <dir>`	Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI

npx @svg-animated-icons/cli add dropdown-menu --react

Code

React

// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function DropdownMenuIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-dropdown-menu-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-dropdown-menu-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-dropdown-menu-icon * {
  transform-box: fill-box;
}

.ai-dropdown-menu-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-dropdown-menu-icon .caret { transform-origin: center; }

.ai-dropdown-menu-icon:not(.no-hover):hover .caret {
  animation: ai-dropdown-menu-bob 700ms ease-in-out;
}

@keyframes ai-dropdown-menu-bob {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(1.5px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="menu" d="M14.5811 11.1087C14.763 11.1463 14.9004 11.3073 14.9004 11.5004C14.9002 11.6933 14.763 11.8545 14.5811 11.892L14.5 11.9007H7.5C7.27921 11.9007 7.09981 11.7211 7.09961 11.5004C7.09961 11.2794 7.27909 11.1 7.5 11.1H14.5L14.5811 11.1087ZM14.5811 9.10875C14.763 9.14627 14.9004 9.30725 14.9004 9.50035C14.9002 9.69332 14.763 9.85449 14.5811 9.89195L14.5 9.90074H7.5C7.27921 9.90074 7.09981 9.72109 7.09961 9.50035C7.09961 9.27944 7.27909 9.09996 7.5 9.09996H14.5L14.5811 9.10875ZM14.5811 7.10875C14.7631 7.14626 14.9004 7.30725 14.9004 7.50035C14.9002 7.69332 14.763 7.85449 14.5811 7.89195L14.5 7.90074H7.5C7.27921 7.90074 7.09981 7.72109 7.09961 7.50035C7.09961 7.27944 7.27909 7.09996 7.5 7.09996H14.5L14.5811 7.10875ZM14.5811 5.10875C14.763 5.14627 14.9004 5.30725 14.9004 5.50035C14.9002 5.69332 14.763 5.85449 14.5811 5.89195L14.5 5.90074H7.5C7.27921 5.90074 7.09981 5.72109 7.09961 5.50035C7.09961 5.27944 7.27909 5.09996 7.5 5.09996H14.5L14.5811 5.10875ZM14.5811 3.10875C14.763 3.14627 14.9004 3.30725 14.9004 3.50035C14.9002 3.69331 14.763 3.8545 14.5811 3.89195L14.5 3.90074H7.5C7.27922 3.90074 7.09982 3.72109 7.09961 3.50035C7.09961 3.27944 7.27909 3.09996 7.5 3.09996H14.5L14.5811 3.10875Z" fill="currentColor"/>
        <path className="caret" d="M2.5 9.25035L0 6.00035H5L2.5 9.25035Z" fill="currentColor"/>
      </svg>
    </>
  );
}