Traingle Menu Zone

A React menu component, triangle safe zone that visually shows users the way to the submenu.

Installation

Prerequisites

A React project with the shadcn/ui structure. If you don't have one:

npx shadcn@latest init

Copy the component

Copy liquid-effect-animation.tsx into your project:

src/components/ui/liquid-effect-animation.tsx

Usage

Basic Example

import { SafeZoneMenu } from "@/app/components/ui/menu-effect";

const menuItems = [
  {
    label: "File",
    submenu: [
      { label: "New File", href: "/new" },
      { label: "Open File", href: "/open" },
      { label: "Save", href: "/save" },
    ],
  },
  {
    label: "Edit",
    submenu: [
      { label: "Undo", href: "#" },
      { label: "Redo", href: "#" },
      { label: "Cut", href: "#" },
    ],
  },
  { label: "Help" }, // No submenu
];

export default function App() {
  return <SafeZoneMenu items={menuItems} />;
}

With Dotted Triangle

<SafeZoneMenu 
  items={menuItems} 
  dotted 
/>

Custom Dot Size

// Single value - gap is automatically half of dash
<SafeZoneMenu 
  items={menuItems} 
  dotted 
  dotSize={8} 
/>

// Array [dash, gap] for precise control
<SafeZoneMenu 
  items={menuItems} 
  dotted 
  dotSize={[12, 4]} 
/>

---

Props

Prop	Type	Default	Description
items	MenuItem[]	required	Array of menu items to display
className	string	undefined	Additional CSS classes for the container
dotted	boolean	false	Whether the triangle border should be dotted
dotSize	number | [number, number]	[4, 2]	Size of dots when dotted is true. Single number sets dash size (gap = dash/2). Array sets [dash, gap]
triangleFill	ColorName	"blue"	Fill color of the triangle
triangleStroke	ColorName	"blue"	Stroke color of the triangle

ColorName

Available color options: "blue" | "red" | "green" | "yellow" | "purple" | "pink" | "orange" | "cyan" | "white"

If you want additional colors you can go to the component file and add it in the colormap object to access more colors of your choice.

---

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

---

License

MIT