Dropdown

Overview

The Dropdown component provides a flexible and customizable way to create dropdown menus with various styling options, animations, and sizing variants. Built with Radix UI and Framer Motion, it offers smooth animations and accessible functionality out of the box.

Preview

Preview

Code

import { Dropdown, DropdownItem } from './components/ui';

function DropdownDemo() {
  return (
    <Dropdown
      trigger={<Button>Open Menu</Button>}
      animation="default"
    >
      <DropdownItem>Profile</DropdownItem>
      <DropdownItem>Settings</DropdownItem>
      <DropdownItem>Logout</DropdownItem>
    </Dropdown>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add dropdown

yarn

yarn @mindfiredigital/ignix-ui add dropdown

pnpm

pnpm @mindfiredigital/ignix-ui add dropdown

Usage

Import the components:

import { Dropdown, DropdownItem } from './components/ui';

Basic Usage

function BasicDropdown() {
  return (
    <Dropdown trigger={<Button>Click me</Button>}>
      <DropdownItem>Option 1</DropdownItem>
      <DropdownItem>Option 2</DropdownItem>
      <DropdownItem>Option 3</DropdownItem>
    </Dropdown>
  );
}

Variants

Preview

Code

  import { Dropdown, DropdownItem } from '@ignix-ui/dropdown';
  import { Button } from '@ignix-ui/button';

<Dropdown
  trigger={<Button>Open Menu</Button>}
  animation="default"
  bg="default"
>
  <DropdownItem>Profile</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
  <DropdownItem>Logout</DropdownItem>
</Dropdown>