| layout | docs |
|---|---|
| title | Tailwind CSS Dropdown - Flowbite |
| description | Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements |
| group | components |
| toc | true |
| requires_js | true |
| previous | Drawer |
| previousLink | components/drawer/ |
| next | Footer |
| nextLink | components/footer/ |
The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.
Make sure to include <a href="{{< ref "getting-started/quickstart" >}}">Flowbite's JavaScript file inside your project to enable dropdowns.
If you want to show a dropdown menu when clicking on an element make sure that you add the data attribute data-dropdown-toggle="dropdownId" to the element (ie. a button) that will trigger the dropdown menu.
The dropdownId is the id of the dropdown menu element.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}} Dropdown button
{{< /example >}}Use the data-dropdown-trigger="{hover|click}" data attribute options to set whether the dropdown should be shown when hovering or clicking on the trigger element (ie. button).
There's a 300ms default delay when showing or hiding the dropdown due to UI/UX reasons and how it may affect the interaction with other components on the page. Generally, we recommend using the click method.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}} Dropdown button
{{< /example >}}You can use the data-dropdown-delay={milliseconds} data attribute to set they delay on when to show or hide the dropdown menu when using hover. You may want to use this depending on how the users interact with your interface. In this example we add 500 milliseconds instead of the default 300.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}} Dropdown button
{{< /example >}}You can use the divide-y divide-gray-100 classes to add separate elements inside the dropdown menu.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="320" >}} Dropdown button
{{< /example >}}Use this example to show extra information outside of the list of menu items inside the dropdown.
{{< example class="flex justify-center " github="components/dropdowns.md" show_dark=true iframeHeight="520" >}} Dropdown button
Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="350" >}} Dropdown button
{{< /example >}}Add multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="290" >}} Dropdown button
-
Default checkbox
-
Checked state
-
Default checkbox
Use this example to update the background color of a menu item when using a list of checkbox elements.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}} Dropdown button
-
Default checkbox
-
Checked state
-
Default checkbox
Add an extra helper text to each checkbox element inside the dropdown menu list with this example.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}} Dropdown button
-
Enable notifications
Some helpful instruction goes over here.
-
Enable 2FA auth
Some helpful instruction goes over here.
-
Subscribe newsletter
Some helpful instruction goes over here.
Enable more advanced interaction with your users by adding radio input elements inside the dropdown menu.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="250" >}} Dropdown radio
-
Default radio
-
Checked radio
-
Default radio
Use this example to update the background color when hovering over a menu item when using radio elements.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="280" >}} Dropdown button
-
Default radio
-
Checked radio
-
Default radio
This example can be used to add an extra helper text inside of each radio element from the dropdown menu.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}
Dropdown button-
Individual
Some helpful instruction goes over here.
-
Company
Some helpful instruction goes over here.
-
Non profit
Some helpful instruction goes over here.
Show a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="280" >}} Dropdown button
-
Enable notifications
-
Enable 2FA authentication
-
Subscribe to newsletter
{{< /example >}}
This example can be used when you want to show a long list of items that won't affect the height of the dropdown menu by enabling a scrolling behaviour.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}} Dropdown button
-
Jese Leos
-
Robert Gough
-
Bonnie Green
-
Leslie Livingston
-
Michael Gough
-
Joseph Mcfall
-
Roberta Casas
-
Neil Sims
Use this example to show multiple dropdown items in a scrollable container with checkboxes.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}} Dropdown button
-
Jese Leos
-
Robert Gough
-
Bonnie Green
-
Leslie Livingston
-
Michael Gough
-
Joseph Mcfall
-
Roberta Casas
-
Neil Sims
Use this example if you want to add a search bar inside the dropdown menu to be able to filter through a long list of menu items with scrolling behaviour.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="440" >}} Dropdown button
-
Jese Leos
-
Robert Gough
-
Bonnie Green
-
Leslie Livingston
-
Michael Gough
-
Joseph Mcfall
-
Roberta Casas
-
Neil Sims
Use the menu icon trigger element on components such as cards as an alternative element to the button.
{{< example class="flex justify-center space-x-4 rtl:space-x-reverse" github="components/dropdowns.md" show_dark=true iframeHeight="320" >}}
{{< /example >}}Use this example to show a list of notifications inside your application by providing more detailed information such as the user avatar, content and time of notification triggered by a notification bell icon.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="660" >}}
This example can be used to show a list of menu items and options when a user is logged into your application.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="520" >}}
Open user menu
Use this example to also show the name or email of the user next to the avatar for the dropdown menu.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="520" >}}
Open user menu
Joseph McFall
You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use a button element.
{{< example bodyClass="!p-0" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}
Flowbite
Open main menu
Use this example to show a date range picker inside a dropdown menu. Use the data-dropdown-ignore-click-outside-class={class} option to keep the dropdown menu open when interacting with the datepicker component by setting the element's parent class name.
{{< example class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="520" >}} 31 Nov
- 31 Dev
The dropdown menus work with buttons of all sizes including smaller or larger ones.
{{< example github="components/dropdowns.md" class="space-x-2 space-y-2" show_dark=true iframeHeight="380" >}} Small dropdown
Large dropdown {{< /example >}}You can also use the data-dropdown-placement={top|right|bottom|left} data attribute options to choose the placement of the dropdown menu. By default the positioning is set to the bottom side of the button.
{{< example class="flex flex-wrap space-x-4 justify-center py-48" github="components/dropdowns.md" show_dark=true >}} Dropdown top
Dropdown right Dropdown bottom Dropdown left {{< /example >}}You can combine the placement options by using the top|right|bottom|left-{start|end} values. For example, left-end will position the dropdown on the left bottom, whereas right-end will position it on the right bottom side.
{{< example class="flex flex-wrap justify-center space-x-4" github="components/dropdowns.md" iframeHeight="240" show_dark=true >}} Dropdown left end
Dropdown right end {{< /example >}}Use the offset options on the dropdown component to set the distance and skidding of the menu relative to the trigger element.
Use the data-dropdown-offset-distance={pixels} data attribute to set the number of pixels you want the dropdown menu to be offset from the trigger element.
{{< example class="flex flex-wrap justify-center" github="components/dropdowns.md" iframeHeight="320" show_dark=true >}} Dropdown button
{{< /example >}}The data-dropdown-offset-skidding={pixels} data attribute can be used to move up or down (or left and right) the dropdown menu along and relative to the trigger element.
{{< example class="flex flex-wrap justify-center" github="components/dropdowns.md" iframeHeight="320" show_dark=true >}} Dropdown button
{{< /example >}}For more dropdown examples you can check out the dropdown filter components from Flowbite Blocks.
The Dropdown class from Flowbite can be used to create an object that will show a dropdown menu relative to the main trigger element (eg. a button) based on the parameters, options, and methods that you provide.
Initialize a Dropdown object with the object parameters such as the main target dropdown menu, a trigger element (eg. a button) and options to set the placement relative to the trigger element.
| Parameter | Type | Required | Description |
|---|---|---|---|
targetElement
|
Element | Required | Apply the main dropdown menu element as the first parameter of the Dropdown object. |
triggerElement
|
Element | Required | Apply the trigger element, such as a button, which is required to position the dropdown menu and set a click event. |
options
|
Object | Optional | Use the options parameter to set the positioning of the dropdown menu. |
instanceOptions
|
Object | Optional | Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance. |
Use the following options as the third parameter for the Dropdown class to set the placement of the dropdown menu.
| Option | Type | Description |
|---|---|---|
placement
|
String |
Set the position of the dropdown menu relative to the trigger element choosing from top|right|bottom|left.
|
triggerType
|
String |
Set the event type that will trigger the dropdown menu choosing between hover|click|none.
|
offsetDistance
|
String | Set the amount of pixels the dropdown menu should be offset relative to the trigger element on the X horizontal axis. |
offsetSkidding
|
String | Set the number of pixels the dropdown menu should be offset relative to the trigger element on the Y horizontal axis. |
delay
|
Number | Set the milliseconds for which the showing or hiding of the dropdown will be delayed for when using the hover trigger type. |
ignoreClickOutsideClass
|
String | Set a class for one or more elements that when they are clicked should ignore closing the dropdown (ie. offcanvas datepicker). |
onHide
|
Function | Set a callback function when the dropdown has been hidden. |
onShow
|
Function | Set a callback function when the dropdown has been shown. |
onToggle
|
Function | Set a callback function when the dropdown visibility has been toggled. |
Use the methods from the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.
| Method | Description |
|---|---|
show()
|
Use this method on the Dropdown object to show the dropdown menu. |
hide()
|
Use this method on the Dropdown object to hide the dropdown menu. |
toggle()
|
Use this method on the Dropdown object to toggle the visibility of the dropdown menu. |
isVisible()
|
Returns true or false based on the visibility of the dropdown. |
updateOnShow(callback)
|
Use this method to set a callback function when the dropdown has been shown. |
updateOnHide(callback)
|
Use this method to set a callback function when the dropdown has been hidden. |
updateOnToggle(callback)
|
Use this method to set a callback function when the dropdown visibility has been changed. |
Check out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Dropdown object.
First of all, you need to set the main target element which will be the dropdown menu and the trigger element which will can be a button or a text.
After that, you can also optionally set an options object to set the placement of the dropdown menu and callback functions.
{{< code lang="javascript" file="dropdown.js" icon="file" >}} // set the dropdown menu element const $targetEl = document.getElementById('dropdownMenu');
// set the element that trigger the dropdown menu on click const $triggerEl = document.getElementById('dropdownButton');
// options with default values const options = { placement: 'bottom', triggerType: 'click', offsetSkidding: 0, offsetDistance: 10, delay: 300, ignoreClickOutsideClass: false, onHide: () => { console.log('dropdown has been hidden'); }, onShow: () => { console.log('dropdown has been shown'); }, onToggle: () => { console.log('dropdown has been toggled'); }, };
// instance options object const instanceOptions = { id: 'dropdownMenu', override: true }; {{< /code >}}
Create a new Dropdown object based on the options above.
{{< code lang="javascript" file="dropdown.js" icon="file" >}} import { Dropdown } from 'flowbite';
/*
- $targetEl: required
- $triggerEl: required
- options: optional
- instanceOptions: optional */ const dropdown = new Dropdown($targetEl, $triggerEl, options, instanceOptions); {{< /code >}}
Use the show and hide methods on the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.
{{< code lang="javascript" file="dropdown.js" icon="file" >}} // show the dropdown menu dropdown.show();
// hide the dropdown menu dropdown.hide();
// toggle the dropdown menu dropdown.toggle();
// check if dropdown is visible/open dropdown.isVisible(); {{< /code >}}
Use the following HTML code for the JavaScript example above.
{{< code lang="html" file="dropdown.html" icon="file" >}} Dropdown button
{{< /code >}}If you're using the <a href="{{< ref "getting-started/typescript" >}}">TypeScript configuration from Flowbite then you can import the types for the Dropdown class, parameters and its options.
Here's an example that applies the types from Flowbite to the code above:
{{< code lang="typescript" file="dropdown.ts" icon="file" >}} import { Dropdown } from 'flowbite'; import type { DropdownOptions, DropdownInterface } from 'flowbite'; import type { InstanceOptions } from 'flowbite';
// set the dropdown menu element const $targetEl: HTMLElement = document.getElementById('dropdownMenu');
// set the element that trigger the dropdown menu on click const $triggerEl: HTMLElement = document.getElementById('dropdownButton');
// options with default values const options: DropdownOptions = { placement: 'bottom', triggerType: 'click', offsetSkidding: 0, offsetDistance: 10, delay: 300, onHide: () => { console.log('dropdown has been hidden'); }, onShow: () => { console.log('dropdown has been shown'); }, onToggle: () => { console.log('dropdown has been toggled'); }, };
// instance options object const instanceOptions: InstanceOptions = { id: 'dropdownMenu', override: true };
/*
- targetEl: required
- triggerEl: required
- options: optional
- instanceOptions: optional */ const dropdown: DropdownInterface = new Dropdown( $targetEl, $triggerEl, options, instanceOptions );
// show the dropdown dropdown.show(); {{< /code >}}