Preview Purchase
Base Components

Tailwind CSS Dropdown

The Tailwind CSS Dropdown is a versatile component used to display overlay content on a web page, which can include menus, tabs, and other interactive elements. It's designed for creating a layered navigation experience, allowing users to access various content types without leaving the current page context.

Basic Dropdown

A simple example of a Tailwind CSS Dropdown that is toggled by a button.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.

Arrow

Integrate an animated arrow icon to indicate when the dropdown is open.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.

Menu

Include a Tailwind CSS Menu as the dropdown content to enable an advanced navigation menu.
Preview HTML

Separator

Divide the dropdown content into sections using a separator element for better organization.
Preview HTML
Dropdown Heading
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.
Dropdown footer

Width

Use Tailwind CSS Width classes to customize the dropdown width.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.

Scrollable

Apply the .scrollable-y class to the dropdown content element to enable vertical scrolling within it using Tailwind CSS Scrollable component.
Preview HTML
Dropdown Heading
The Tailwind CSS Dropdown component is a dynamic tool in the web developer’s arsenal, offering a sleek and user-friendly interface for presenting overlay content. This component, integral to the Tailwind CSS framework, enables developers to create dropdown menus that are not only aesthetically pleasing but also functionally robust. The essence of the Tailwind CSS Dropdown lies in its simplicity and elegance. Designed with a minimalist approach, it provides a clean and modern interface that enhances user experience. The dropdown is intuitive, allowing users to navigate effortlessly through various options or commands presented in the menu. This seamless interaction is a testament to the component's thoughtful design, which prioritizes user engagement and satisfaction.

Dismiss

Set the data-dropdown-dismiss="true" attribute on an element within the dropdown content to close the dropdown when that element is clicked.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.

Permanent

Set the data-dropdown-permanent="true" attribute on a dropdown element to prevent it from being closed.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.

Placement

Utilize the data-dropdown-placement attribute to set the opening direction of the Tailwind CSS Dropdown.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.

Trigger

Utilize the data-dropdown-trigger="click" or data-dropdown-trigger="hover" attribute to set the trigger method for dropdowns.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.

Offset

Use data-dropdown-offset="20px, 20px" attribute to specify the offset of the dropdown from the toggle element, adjusting its position on the x and y axes.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, user-friendly interface for presenting overlay content.

With Modal

Display dropdowns inside the Tailwind CSS Modal component.
Preview HTML

With Tooltip

Display Tailwind CSS Tooltip components in dropdowns.
Preview HTML
The Tailwind CSS Dropdown component offers a sleek, User-friendly Interface for presenting overlay content.
Hey, a delightful tooltip is here!

Source Code

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Dropdown component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the dist/assets/css/styles.css and dist/assets/js/core.bundle.js bundles, making them available globally across all pages.
File Description
src/core/components/dropdown/dropdown.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Dropdown component.
src/core/plugins/components/dropdown.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Dropdown component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Dropdown component. 
				
					<div class="dropdown" data-dropdown="true" data-dropdown-trigger="click">
 <button class="dropdown-toggle btn btn-light">
  Show Dropdown
 </button>
 <div class="dropdown-content w-full max-w-56 p-4">
  Dropdown content
 </div>
</div>

Classes

This table details the custom CSS classes used for styling the Tailwind CSS Dropdown component.
Class Description
dropdown Root class for the Tailwind CSS Dropdown component, defining the overall structure.
dropdown-toggle Designates the element that triggers the dropdown to open or close.
dropdown-content Contains the actual contents of the dropdown, such as menu items or forms.
open Added to both the toggle and content elements to indicate the dropdown is active and visible.
hidden Sets a specific dropdown to be hidden initially. Can be used to hide the dropdown until it needs to be displayed.

Variants

Utilize the following Tailwind CSS Dropdown variants to manage the appearance of the dropdown items and their child elements. For more information, refer to the Tailwind CSS Variant documentation .
Class Description
dropdown-open: A custom Tailwind variant activated when the dropdown is shown. It can be applied to the dropdown toggle, dropdown content, and its children, controlling their appearance and behavior in the open state. 
				
					<div class="dropdown" data-dropdown="true" data-dropdown-trigger="click">
 <button class="dropdown-toggle btn btn-light dropdown-open:font-semibold">
  Show Dropdown
 </button>
 <div class="dropdown-content w-full max-w-56 p-4 dropdown-open:text-success">
  Dropdown content
 </div>
</div>

Data Attribute Initialization

Auto-initialize all KTDropdown instances on page load by adding the data-dropdown="true" attribute to your dropdown element. This triggers on the fly initialization by the KTDropdown JavaScript component. 
				
					<div class="dropdown" data-dropdown="true" data-dropdown-trigger="click" id="my_dropdown">
 <button class="dropdown-toggle btn btn-light">
  Show Dropdown
 </button>
 <div class="dropdown-content w-full max-w-56 p-4">
  Dropdown content
 </div>
</div>
These attributes allow you to set options for the KTDropdown component during initialization. The values you provide as strings are automatically converted to the appropriate KTDropdown Options .
HTML Attribute Type Default Description
data-dropdown boolean true Automatically initializes Tailwind CSS Dropdown instances on page load. This can be disabled for manual initialization via JavaScript.
data-dropdown-zindex number 105 Defines the z-index of the dropdown, ensuring it layers correctly above or beneath other page elements.
data-dropdown-hover-timeout number 300 Sets the time in milliseconds before the dropdown is shown or hidden when hovered over.
data-dropdown-trigger
enum
"click" | "hover"
"default" Specifies the trigger action for opening dropdown.
data-dropdown-offset string "0, 5px" Specifies the offset of the dropdown from the toggle element, adjusting its position on the x and y axes.
data-dropdown-permanent boolean false If set to true, keeps the dropdown open indefinitely, overriding the default close behavior.
data-dropdown-placement
enum
"left-start" | "left" | "left-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-start" | "bottom" | "bottom-end"
"bottom-start" Determines the position of the dropdown in relation to the dropdown toggle.

JavaScript Initialization

To initialize a new dropdown component, pass the corresponding DOM element and configuration options to the KTDropdown class constructor.
JavaScript HTML 
				
					const dropdownEl = document.querySelector('#my_dropdown');
const options = {
	zindex: 105,
	hoverTimeout: 200,
	placement: 'bottom-start',
	permanent: false,
	trigger: 'click'
};

const dropdown = new KTDropdown(dropdownEl, options);

To initialize the dropdown with JavaScript, Use the data-dropdown="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Dropdown instances, using the KTDropdown JavaScript component.
Option Type Default Description
zindex number 105 Defines the z-index of the dropdown, ensuring it layers correctly above or beneath other page elements.
hoverTimeout number 300 Sets the time in milliseconds before the dropdown is shown or hidden when hovered over.
trigger
enum
"click" | "hover"
"click" Specifies the trigger action for opening dropdown.
offset string "0, 5px" Specifies the offset of the dropdown from the toggle element, adjusting its position on the x and y axes.
permanent boolean false If set to true, keeps the dropdown open indefinitely, overriding the default close behavior.
placement
enum
"left-start" | "left" | "left-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-start" | "bottom" | "bottom-end"
"bottom-start" Determines the position of the dropdown in relation to the dropdown toggle.

Utilities

Manage and interact with KTDropdown instances using these static methods of KTDropdown class.
Method Description
init() Automatically initializes KTDropdown object for all elements with the data-dropdown="true" attribute on page load.
createInstances() Allows to create KTDropdown instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element) Returns the KTDropdown object associated with the given DOM element element .
getOrCreateInstance(element) Returns the existing KTDropdown object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
JavaScript HTML 
				
					// Initialize all dropdowns
KTDropdown.init()

// Initialzie pending dropdowns
KTDropdown.createInstances();

// Get dropdown object
const dropdownEl = document.querySelector('#my_dropdown');
const dropdown = KTDropdown.getInstance(dropdownEl);

Methods

Use KTDropdown component's API methods to programmatically control its behavior.
Method Description
new KTDropdown(element, options) Creates an object instance of KTDropdown class for the given DOM element and configuration options .
show() Shows the subdropdown of the dropdown item associated with itemElement DOM element.
hide() Hides the subdropdown of the dropdown item associated with itemElement DOM element.
toggle() Toggles the visibility of the subdropdown for the dropdown item associated with itemElement DOM element.
getToggleElement() Returns the toggle element that controls the dropdown, allowing direct manipulation or event binding.
disable() Disables the dropdown, preventing it from being opened or interacted with.
enable() Enables the dropdown, allowing it to be opened and interacted with.
isOpen() Returns a boolean indicating whether the dropdown is currently open.
getOption(name) Retrieves the value of a configuration option by name parameter from a KTDropdown instance.
getElement() Retrieves the DOM element linked to a specific KTDropdown instance.
on(eventName, handler) Allows attaching event listeners to the KTDropdown custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTDropdown. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId) Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose() Removes the KTDropdown instance from an element, including any associated data stored on the DOM element.
JavaScript HTML 
				
					const dropdownEl = document.querySelector('#my_dropdown');
const dropdown = KTDropdown.getInstance(dropdownEl);

dropdown.show();
dropdown.hide();

Events

KTDropdown custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
Event Description
show Triggers before a dropdown is shown.
shown Triggers after a dropdown is fully displayed.
hide Fires before a dropdown starts the hiding process.
hidden Fires after a dropdown is completely hidden. 
				
					const dropdownEl = document.querySelector('#my_dropdown');
const dropdown = KTDropdown.getInstance(dropdownEl);

dropdown.on('show', () => {
	console.log('show event');
});

dropdown.on('shown', () => {
	console.log('shown event');
});

dropdown.on('hide', (detail) => {
	detail.cancel = true;
	console.log('hide action canceled');
});
Previous Drawer Next Modal