Category Dropdown

Navigation 20

About

A dropdown menu with vertical category tabs on one side and their items on the other, featuring a sliding tab indicator, animated height transitions, and a morphing chevron icon.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Category Dropdown to your project and fits it to your theme.

Code

How Category Dropdown is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import { CategoryDropdown } from "@/components/ui/category-dropdown";

const categories = [
  {
    id: "conversation",
    label: "Conversation",
    items: [
      { id: "message-bubble", label: "Message Bubble" },
      { id: "prompt-input", label: "Prompt Input" },
    ],
  },
  {
    id: "tools",
    label: "Tools & execution",
    items: [
      { id: "tool-call", label: "Tool Call" },
      { id: "tool-approval", label: "Tool Approval" },
    ],
  },
];

export default function Example() {
  const [value, setValue] = React.useState("prompt-input");

  return (
    <div className="flex min-h-[320px] w-full items-start justify-center pt-16">
      <CategoryDropdown
        categories={categories}
        value={value}
        onValueChange={setValue}
      />
    </div>
  );
}