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:
