Dropdown

The dropdown component is a UI component built with React that allows you to show a list of items when clicking on a trigger element (ie. a button) that you can use to build dropdown menus, lists, and more.

The default styles are built with the utility classes from Tailwind CSS and you can use the custom props from React to customize the behaviour and positioning of the dropdowns.

To start using the component make sure that you have imported it from Pol-ui:

import { Dropdown } from "pol-ui";

Dropdown

import { DropdownItem, Dropdown } from "pol-ui";
import React from "react";
 
const DropdownComponent = () => {
  return (
    <Dropdown label="Dropdown">
      <DropdownItem
        label="Undo"
        onClick={() => console.log("Undo")}
        shortcut="Ctrl+Z"
      />
      <DropdownItem label="Redo" disabled />
      <DropdownItem label="Cut" />
      <Dropdown label="Copy as">
        <DropdownItem label="Text" />
        <DropdownItem label="Video" />
        <Dropdown label="Image" nestingIcon="🎞️">
          <DropdownItem label=".png" />
          <DropdownItem label=".jpg" />
          <DropdownItem label=".svg" />
          <DropdownItem label=".gif" />
        </Dropdown>
        <DropdownItem label="Audio" />
      </Dropdown>
      <Dropdown label="Share">
        <DropdownItem label="Mail" />
        <DropdownItem label="Instagram" />
      </Dropdown>
    </Dropdown>
  );
};
export default DropdownComponent;

Props

Prop name	Type	Default	Description
label	string	-	The label of the dropdown
nested	boolean	false	If the dropdown is nested
children	React.ReactNode	-	The content of the dropdown
icon	React.FC<React.ComponentProps<'svg'>>	-	The icon of the dropdown
nestingIcon	React.ReactNode	-	The icon of the nested dropdown
theme	DropdownTheme	-	The theme of the dropdown
disabled	boolean	false	If the dropdown is disabled
color	Colors	'primary'	The color of the dropdown
size	MainSizes	'md'	The size of the dropdown
rounded	RoundedSizes	'md'	The rounded of the dropdown
trigger	React.JSX.Element	-	The trigger of the dropdown

DropdownItem

Prop name	Type	Default	Description
label	string	-	The label of the item
disabled	boolean	false	If the item is disabled
customTheme	DropdownTheme	-	The custom theme of the item
shortcut	DropdownTheme	-	The shortcut of the item

Examples

To create a simple dropdown you can use the Dropdown component and pass the items prop with an array of objects with the label and value properties.

Simple dropdown

import { DropdownItem, Dropdown } from "pol-ui";
import React from "react";
 
const DropdownComponent = () => {
  return (
    <Dropdown label="Dropdown">
      <DropdownItem label="Undo" onClick={() => console.log("Undo")} />
      <DropdownItem label="Redo" disabled />
      <DropdownItem label="Cut text " shortcut="⌘Z" />
      <Dropdown label="Share">
        <DropdownItem label="Mail" />
        <DropdownItem label="Instagram" />
      </Dropdown>
    </Dropdown>
  );
};
export default DropdownComponent;

All colors

import { DropdownItem, Dropdown, theme } from "pol-ui";
import React from "react";
 
const DropdownComponent = () => {
  return (
    <div className="flex gap-3 flex-wrap">
    {Object.keys(theme.dropdown.root.color).map(c => (
      <Dropdown label={c} color={c as keyof typeof theme.dropdown.root.color} key={c}>
         <DropdownItem
        label="Undo"
        onClick={() => console.log("Undo")}
        shortcut="Ctrl+Z"
      />
      <DropdownItem label="Redo" disabled />
      <DropdownItem label="Cut" />
      <Dropdown label="Copy as">
        <DropdownItem label="Text" />
        <DropdownItem label="Video" />
        <Dropdown label="Image" nestingIcon="🎞️">
          <DropdownItem label=".png" />
          <DropdownItem label=".jpg" />
          <DropdownItem label=".svg" />
          <DropdownItem label=".gif" />
        </Dropdown>
        <DropdownItem label="Audio" />
      </Dropdown>
      <Dropdown label="Share">
        <DropdownItem label="Mail" />
        <DropdownItem label="Instagram" />
      </Dropdown>
      </Dropdown>
    ))}
  </div>
  );
};
export default DropdownComponent;

All roundness

import { DropdownItem, Dropdown,theme } from "pol-ui";
import React from "react";
 
const DropdownComponent = () => {
  return (
    <div className="flex gap-3 flex-wrap items-center">
    {Object.keys(theme.dropdown.size).map(c => (
      <Dropdown label={c} size={c as keyof typeof theme.dropdown.size} key={c}>
      <DropdownItem
        label="Undo"
        onClick={() => console.log("Undo")}
        shortcut="Ctrl+Z"
      />
      <DropdownItem label="Redo" disabled />
      <DropdownItem label="Cut" />
      <Dropdown label="Copy as">
        <DropdownItem label="Text" />
        <DropdownItem label="Video" />
        <Dropdown label="Image" nestingIcon="🎞️">
          <DropdownItem label=".png" />
          <DropdownItem label=".jpg" />
          <DropdownItem label=".svg" />
          <DropdownItem label=".gif" />
        </Dropdown>
        <DropdownItem label="Audio" />
      </Dropdown>
      <Dropdown label="Share">
        <DropdownItem label="Mail" />
        <DropdownItem label="Instagram" />
      </Dropdown>      </Dropdown>
    ))}
  </div>
  );
};
export default DropdownComponent;

All sizes

import { DropdownItem, Dropdown, theme } from "pol-ui";
import React from "react";
 
const DropdownComponent = () => {
  return (
     <div className="flex gap-3 flex-wrap items-center">
    {Object.keys(theme.dropdown.size).map(c => (
      <Dropdown label={c} size={c as keyof typeof theme.dropdown.size} key={c}>
         <DropdownItem
        label="Undo"
        onClick={() => console.log("Undo")}
        shortcut="Ctrl+Z"
      />
      <DropdownItem label="Redo" disabled />
      <DropdownItem label="Cut" />
      <Dropdown label="Copy as">
        <DropdownItem label="Text" />
        <DropdownItem label="Video" />
        <Dropdown label="Image" nestingIcon="🎞️">
          <DropdownItem label=".png" />
          <DropdownItem label=".jpg" />
          <DropdownItem label=".svg" />
          <DropdownItem label=".gif" />
        </Dropdown>
        <DropdownItem label="Audio" />
      </Dropdown>
      <Dropdown label="Share">
        <DropdownItem label="Mail" />
        <DropdownItem label="Instagram" />
      </Dropdown>
      </Dropdown>
    ))}
  </div>
  );
};
export default DropdownComponent;

Disabled

import { DropdownItem, Dropdown } from "pol-ui";
import React from "react";
 
const DropdownComponent = () => {
  return (
    <Dropdown disabled label={`I'm disabled 🥲`}>
      <DropdownItem
        label="Undo"
        onClick={() => console.log("Undo")}
        shortcut="Ctrl+Z"
      />
      <DropdownItem label="Redo" disabled />
      <DropdownItem label="Cut" />
      <Dropdown label="Copy as">
        <DropdownItem label="Text" />
        <DropdownItem label="Video" />
        <Dropdown label="Image" nestingIcon="🎞️">
          <DropdownItem label=".png" />
          <DropdownItem label=".jpg" />
          <DropdownItem label=".svg" />
          <DropdownItem label=".gif" />
        </Dropdown>
        <DropdownItem label="Audio" />
      </Dropdown>
      <Dropdown label="Share">
        <DropdownItem label="Mail" />
        <DropdownItem label="Instagram" />
      </Dropdown>
    </Dropdown>
  );
};
export default DropdownComponent;

Custom trigger

import { DropdownItem, Dropdown } from "pol-ui";
import React from "react";
 
const DropdownComponent = () => {
  return (
    <Dropdown
      label="Dropdown with custom trigger"
      trigger={
        <div className="flex items-center gap-2 rounded-full border p-3 hover:bg-secondary-200 transition-all">
          <span>Name</span>
          <Avatar
            size="sm"
            img="https://polgubau.com/_next/image?url=%2Fimages%2Fme.png&w=256&q=75"
            status="online"
          />
        </div>
      }
    >
      <DropdownItem
        label="Undo"
        onClick={() => console.log("Undo")}
        shortcut="Ctrl+Z"
      />
      <DropdownItem label="Redo" disabled />
      <DropdownItem label="Cut" />
      <Dropdown label="Copy as">
        <DropdownItem label="Text" />
        <DropdownItem label="Video" />
        <Dropdown label="Image" nestingIcon="🎞️">
          <DropdownItem label=".png" />
          <DropdownItem label=".jpg" />
          <DropdownItem label=".svg" />
          <DropdownItem label=".gif" />
        </Dropdown>
        <DropdownItem label="Audio" />
      </Dropdown>
      <Dropdown label="Share">
        <DropdownItem label="Mail" />
        <DropdownItem label="Instagram" />
      </Dropdown>
    </Dropdown>
  );
};
export default DropdownComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface DropdownTheme {
  root: {
    icon: string;
    disabled: string;
    base: string;
    color: ColorsType;
  };
  rounded: RoundedSizesTypes;
  size: MainSizesType;
  item: {
    base: string;
    color: ColorsType;
  };
  floating: {
    base: string;
  };
}

Default Dropdown

Props

Dropdown

DropdownItem

Examples

Simple Dropdown

All colors

All roundness

All sizes

Disabled

Custom trigger

Theme