The dropdown component is a UI element built with React that displays a list of items when a trigger element (e.g., a button) is clicked. You can use it to build dropdown menus, lists, and more.
The default styles are built using utility classes from Tailwind CSS. You can customize the behavior and positioning of the dropdowns using custom props from React.
To start using the component make sure that you have imported it from Flowbite React:
import { Dropdown } from "flowbite-react";
Use this example to create a simple dropdown with a list of menu items by adding child <DropdownItem> components inside the main <Dropdown> component.
Use the <DropdownDivider> component to add a divider between the dropdown items.
Use the <DropdownHeader> component to add a header to the dropdown. You can use this to add a user profile image and name, for example.
For more complex headers that include an <input> or <TextInput> control, set enableTypeAhead to false on the <Dropdown> to prevent keystrokes from being interpreted as item searches.
Add custom icons next to the menu items by using the icon prop on the <DropdownItem> component.
Use the inline prop to make the dropdown appear inline with the trigger element.
You can use the size prop to change the size of the dropdown. The default size is md.
Use the placement prop to change the placement of the dropdown by choosing one of the following options: top, right, bottom or left. If there is not enough space then the dropdown will be automatically repositioned.
Add a custom onClick event handler to the <DropdownItem> component to handle the click event.
To customize the trigger element, you can use the renderTrigger property.
To customize the Dropdown.Item base element you can use the as property.
To learn more about how to customize the appearance of components, please see the Theme docs.
{
"arrowIcon": "ml-2 h-4 w-4",
"content": "py-1 focus:outline-none",
"floating": {
"animation": "transition-opacity",
"arrow": {
"base": "absolute z-10 h-2 w-2 rotate-45",
"style": {
"dark": "bg-gray-900 dark:bg-gray-700",
"light": "bg-white",
"auto": "bg-white dark:bg-gray-700"
},
"placement": "-4px"
},
"base": "z-10 w-fit divide-y divide-gray-100 rounded shadow focus:outline-none",
"content": "py-1 text-sm text-gray-700 dark:text-gray-200",
"divider": "my-1 h-px bg-gray-100 dark:bg-gray-600",
"header": "block px-4 py-2 text-sm text-gray-700 dark:text-gray-200",
"hidden": "invisible opacity-0",
"item": {
"container": "",
"base": "flex w-full cursor-pointer items-center justify-start px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:bg-gray-600 dark:focus:text-white",
"icon": "mr-2 h-4 w-4"
},
"style": {
"dark": "bg-gray-900 text-white dark:bg-gray-700",
"light": "border border-gray-200 bg-white text-gray-900",
"auto": "border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white"
},
"target": "w-fit"
},
"inlineWrapper": "flex items-center"
}RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4