Dropdown

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

'use client';

import { Dropdown } from 'rizzui/dropdown';

Default

A simple dropdown with component Dropdown.

'use client';

import { Dropdown } from 'rizzui/dropdown';
import { Button } from 'rizzui/button';

export default function App() {
  return (
    <Dropdown>
      <Dropdown.Trigger>
        <Button as="span" 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.

'use client';

import { Dropdown } from 'rizzui/dropdown';
import { Button } from 'rizzui/button';
import { ActionIcon } from 'rizzui/action-icon';
import { cn } 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">
          <AdjustmentsHorizontalIcon className="h-5 w-5" />
        </ActionIcon>
      </Dropdown.Trigger>
      <Dropdown.Menu>
        <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 border-t border-border">
          <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 border-t border-border">
          <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 border-t border-border">
          <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.

'use client';

import { Dropdown } from 'rizzui/dropdown';
import { Text } from 'rizzui/typography';
import { Avatar } from 'rizzui/avatar';

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 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 border-t border-border">
          <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 border-t border-border">
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
            Sign Out
          </Dropdown.Item>
        </div>
      </Dropdown.Menu>
    </Dropdown>
  );
}

API Reference

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 children	__
shadow	DropdownShadows	The shadow variants supported by this component are:	`"md"`
placement	DropdownPlacement	The dropdown menu placements. Won't work if inPortal prop is false.	`"bottom-start"`
inPortal	`boolean`	Whether the Dropdown.Menu is rendered on the portal or not	`"true"`
modal	`boolean`	Whether the body scrollbar is hidden or not when dropdown is visible.	`"false"`
gap	`number`	Sets the gap between trigger and dropdown if portal is true	`"6"`
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	__
anchorWidth	`boolean`	This item will set the `Dropdown.Menu` width same as the `Dropdown.Trigger` width	`false`
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 string	__
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 disabled state of the Dropdown.Item	__
className	`string`	Add classes to the Dropdown.Item	__
...	`ButtonHTMLAttributes` or `HTMLAttributes`	native props like onClick, title, aria-label ...	__

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

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

Default​

With Icons​

With Avatar​

API Reference​

Dropdown Props​

Dropdown.Trigger​

Dropdown.Menu​

Dropdown.Item​

Dropdown Shadows​

Dropdown Placement​