Dropdown

A floating container which will appear on clicking the dropdown button.

import { Dropdown } from "rizzui";

Default

A simple dropdown with component Dropdown.

import { Dropdown, Button } from "rizzui";

export default function App() {
  return (
    <Dropdown>
      <Dropdown.Trigger>
        <Button variant="outline">
          Settings <ChevronDownIcon className="ml-2 w-5" />
        </Button>
      </Dropdown.Trigger>
      <Dropdown.Menu>
        <Dropdown.Item>Account Settings</Dropdown.Item>
        <Dropdown.Item>Support</Dropdown.Item>
        <Dropdown.Item>License</Dropdown.Item>
        <Dropdown.Item>Sign Out</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

With Icons

You can use placement and icon.

import { Dropdown, Button, cn, ActionIcon } from "rizzui";
import {
  AdjustmentsHorizontalIcon,
  PencilIcon,
  DocumentDuplicateIcon,
  ArchiveBoxIcon,
  ArrowRightCircleIcon,
  ShareIcon,
  HeartIcon,
  TrashIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Dropdown placement="bottom-end">
      <Dropdown.Trigger>
        <ActionIcon variant="outline" rounded="full">
          <AdjustmentsHorizontalIcon className="h-5 w-5" />
        </ActionIcon>
      </Dropdown.Trigger>
      <Dropdown.Menu className="divide-y">
        <div className="mb-2">
          <Dropdown.Item>
            <PencilIcon className="mr-2 h-4 w-4" />
            Edit
          </Dropdown.Item>
          <Dropdown.Item>
            <DocumentDuplicateIcon className="mr-2 h-4 w-4" />
            Duplicate
          </Dropdown.Item>
        </div>
        <div className="mb-2 pt-2">
          <Dropdown.Item>
            <ArchiveBoxIcon className="mr-2 h-4 w-4" />
            Archive
          </Dropdown.Item>
          <Dropdown.Item>
            <ArrowRightCircleIcon className="mr-2 h-4 w-4" />
            Move
          </Dropdown.Item>
        </div>
        <div className="mb-2 pt-2">
          <Dropdown.Item>
            <ShareIcon className="mr-2 h-4 w-4" />
            Share
          </Dropdown.Item>
          <Dropdown.Item>
            <HeartIcon className="mr-2 h-4 w-4" />
            Add to Favourite
          </Dropdown.Item>
        </div>
        <div className="mt-2 pt-2">
          <Dropdown.Item>
            <TrashIcon className="mr-2 h-4 w-4" />
            Delete
          </Dropdown.Item>
        </div>
      </Dropdown.Menu>
    </Dropdown>
  );
}

With Avatar

The variation is limitless. You can style your Dropdown as you want to do.

import { Dropdown, Text, Avatar } from "rizzui";

export default function App() {
  return (
    <Dropdown placement="bottom-end">
      <Dropdown.Trigger>
        <Avatar
          name="John Doe"
          src="https://randomuser.me/api/portraits/women/40.jpg"
          className="cursor-pointer"
        />
      </Dropdown.Trigger>
      <Dropdown.Menu className="w-56 divide-y text-gray-600">
        <Dropdown.Item className="hover:bg-transparent">
          <Avatar
            name="John Doe"
            src="https://randomuser.me/api/portraits/women/40.jpg"
          />
          <span className="ml-2 text-start">
            <Text className="text-gray-900 font-medium leading-tight">
              Mary Hoops
            </Text>
            <Text>maryhe@demo.io</Text>
          </span>
        </Dropdown.Item>
        <div className="mt-3 mb-2 pt-2">
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
            Account Settings
          </Dropdown.Item>
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
            Support
          </Dropdown.Item>
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
            License
          </Dropdown.Item>
        </div>
        <div className="mt-2 pt-2">
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
            Sign Out
          </Dropdown.Item>
        </div>
      </Dropdown.Menu>
    </Dropdown>
  );
}

API Reference

---

Dropdown Props

Here is the API documentation of the Dropdown component. You can use the following props to create a Dropdown.

Props	Type	Description	Default
children	__	Use Dropdown.Trigger & Dropdown.Menu as childrens	__
rounded	DropdownRounded	The rounded variants supported by this component are:	"md"
shadow	DropdownShadows	The shadow variants supported by this component are:	"md"
placement	DropdownPlacement	The dropdown menu placements:	"bottom-start"
inPortal	boolean	Whether the Dropdown.Menu is rendered on the portal or not	"true"
className	string	Add classes to the main wrapper of this component	__

Dropdown.Trigger

Props	Type	Description	Default
as	div or button	Use as to convert Dropdown.Trigger component to render as div or button	div
ref	__	Use ref prop to access DOM nodes of Dropdown.Trigger	__
children	ReactNode	Use any valid React element or string	__
className	string	Add classes to the Dropdown.Trigger wrapper	__
...	ButtonHTMLAttributes or HTMLAttributes	native props like onClick, title, aria-label ...	__

Dropdown.Menu

Props	Type	Description	Default
as	div or ul	Use as to convert Dropdown.Menu component to render as div or ul	div
children	ReactNode	Use Dropdown.Item and any valid React element	__
className	string	Add classes to the Dropdown.Menu wrapper	__

Dropdown.Item

Props	Type	Description	Default
as	button or li	Use as to convert Dropdown.Item component to render as button or li	button
children	ReactNode	Use any valid React element or sting	__
disabled	boolean	This item will be skipped by keyboard navigation	false
activeClassName	string	To style active state of the Dropdown.Item	__
disabledClassName	string	To style disbale state of the Dropdown.Item	__
className	string	Add classes to the Dropdown.Item	__
...	ButtonHTMLAttributes or HTMLAttributes	native props like onClick, title, aria-label ...	__

Dropdown Rounded

type DropdownRounded = "sm" | "md" | "lg" | "xl" | "none";

Dropdown Shadows

type DropdownShadows = "sm" | "md" | "lg" | "xl" | "none";

Dropdown Placement

type DropdownPlacements =
  | "left"
  | "right"
  | "top"
  | "bottom"
  | "left-start"
  | "left-end"
  | "right-start"
  | "right-end"
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end";