Tailwind CSS Dropdown
Choose from David UI's collection of dropdown examples designed to deliver your application's user experience faster. From simple dropdown menus to advanced configurations, we've got you covered. Each example is built with accessibility and responsiveness in mind, making it easy to integrate into any project.
Basic Dropdown
A simple dropdown menu with a trigger button. Contains basic menu items like "Add Team," "Add Project," and "My Profile." Ideal for straightforward navigation or quick actions.
Nested Dropdown
A dropdown menu with nested levels, allowing submenus for more detailed options. Features a right arrow icon indicating submenu expansion. Perfect for complex hierarchies or organized workflows.
Dropdown Placement
A versatile dropdown showcasing various placement options (top, bottom, left, right, and their variations). Demonstrates flexibility in positioning menus relative to the trigger button. Great for adaptive layouts or responsive designs.
Nav Dropdown Menu
A dropdown menu designed for navigation bars. Includes a mix of menu items and a promotional card for featured items. Features detailed descriptions and icons, making it suitable for navigation with additional context.
David UI
Dropdown with Divider
A dropdown menu with a visual separator to group related items. Includes a "Logout" option styled distinctly in red for emphasis. Ideal for applications requiring logical separation between menu sections.
Dropdown with Checkbox
A dropdown menu incorporating checkboxes for multi-select functionality. Each menu item is selectable without closing the menu. Suitable for filters, sorting, or configuration settings.
Dropdown with Search
A dropdown menu with an integrated search bar at the top. Enables users to filter options dynamically before making a selection. Perfect for long lists or searchable menu content.
Dropdown with Scrolling Content
A dropdown menu with scrollable content, handling long lists effectively. Displays up to 20+ items with a smooth scroll, ensuring usability in data-heavy scenarios.
Notification Dropdown Menu
A dropdown tailored for notifications. Features items with avatars, timestamps, and concise descriptions. Ideal for alerts, messages, or user activity summaries.
Profile Dropdown Menu
A dropdown menu styled for user profiles. Includes options like "My Profile," "Edit Profile," "Support," and "Logout." Features icons for visual cues and a divider for logical grouping. Perfect for user account settings or personal navigation.
Required Script
The Dropdown component in david-ai requires JavaScript to handle the dropdown functionality and positioning. The library provides smooth transitions and toggle behavior through data attributes, powered by Popper.js for accurate positioning.
Installation
To use the Dropdown component in your project, you first need to install the david-ai library via npm:
Basic Usage
Using with Global Access
If you prefer, you can use the DavidAI global object instead of directly importing initDropdowns:
Using with CDN
You can include david-ai via a CDN and initialize dropdown functionality globally in the browser. Add the following script to your HTML file:
HTML Code Example
TypeScript
David AI Dropdown component can be used programmatically with TypeScript support for more control and type safety:
Programmatic Usage with TypeScript
Learn how to use David AI's Dropdown component with TypeScript for dynamic menu toggling. This component provides programmatic methods to open, close and position dropdown menus with full type safety and customization options.
HTML Structure
The HTML structure demonstrates an accessible and interactive dropdown component featuring:
- A semantic button element for triggering the dropdown menu
- ARIA attributes for screen reader support
- Smooth transitions and animations for menu visibility
- Dark and light theme compatibility with Tailwind CSS
- Responsive dropdown menu with hover states
- Additional control buttons for programmatic interaction
- Proper z-index handling for menu layering
- Click outside detection for automatic closing
Here's the complete HTML implementation:
Props & Methods
The Dropdown component provides a way to toggle the visibility of popup menus with smooth animations and accessibility features. It supports menu positioning, outside click detection, and programmatic control through methods like toggle, open, and close.
| Interface | Property/Method | Type | Description |
|---|---|---|---|
| DropdownConfig | placement | string (optional) | Specifies the dropdown menu placement relative to the trigger button. Default is 'bottom-start'. |
| DropdownConfig | closeOnOutsideClick | boolean (optional) | Whether to close the dropdown when clicking outside. Default is true. |
| DropdownConfig | offset | number[] (optional) | Offset [x, y] in pixels for the dropdown menu position. Default is [0, 5]. |
| IDropdown | toggle() | void | Toggles the dropdown menu visibility. |
| IDropdown | open() | void | Opens the dropdown menu programmatically. |
| IDropdown | close() | void | Closes the dropdown menu programmatically. |
| IDropdown | preventOutsideClick() | void | Prevents the dropdown from closing on the next outside click. |
| IDropdown | destroy() | void | Destroys the dropdown instance and cleans up resources. |
