Dropdown
A button-based dropdown menu component that displays a list of options when triggered, providing an efficient way to present multiple choices or actions in a compact format.Basic Dropdown
The dropdown component can be created by calling the UI::dropdown() method.
Dropdown Examples
The Dropdown component is a flexible menu element built on Bootstrap's dropdown system. It provides a button that, when clicked, displays a dropdown menu containing various options. The component supports different styling, sizes, button configurations, menu customization, and auto-close behaviors.This component uses the Uxmal\Backoffice\Support\Enums\DropdownAutoCloseEnum for configuring the auto-close behavior:
DropdownAutoCloseEnum::Both(default): The dropdown closes when an item is clicked or when clicking outside the dropdown.DropdownAutoCloseEnum::Inside: The dropdown closes only when an item is clicked.DropdownAutoCloseEnum::Outside: The dropdown closes only when clicking outside the dropdown.DropdownAutoCloseEnum::None: The dropdown does not close automatically and must be closed programmatically.
Dropdown with Split Button
The split() method creates a dropdown with a split button configuration.
Dropdown with Custom Button Style
The bsStyle() method sets the Bootstrap style/color for the button.
Dropdown with Different Button Size
The size() method sets the button size ('sm' for small, 'lg' for large).
Dropdown with Offset
The offset() method sets the dropdown menu offset from the button (horizontally and vertically).
Dropdown with Static Divider
The Dropdown::divider() static method creates a divider item to separate dropdown options.
Dropdown with Header
The Dropdown::header() static method creates a header item for the dropdown menu.
Dropdown with Custom Menu Class
The classMenu() method sets CSS classes for the dropdown menu. Can be a string or an array of strings.
Dropdown with HTML Content
Dropdown items can be HtmlElement instances for rich content.
Dropdown with Custom Button Rendering
The renderButton() method allows customizing the dropdown button using a callback. The callback receives the button instance and should return the modified button instance.
Dropdown with Auto-Close Behavior (Inside)
Creates a dropdown that only closes when an item is clicked (using DropdownAutoCloseEnum::Inside).
Dropdown with Form and Auto-Close Outside
Creates a dropdown that contains a form and only closes when clicking outside the dropdown area (using DropdownAutoCloseEnum::Outside).
API
The dropdown component extends fromUxmal\Backoffice\Html\HtmlElement so it has all its methods available. In addition to the methods listed below, any method from HtmlElement can be used.API PHP
Static Methods
API JS
Common alternative names: Dropdown Menu, Select Menu, Context Menu, Action Menu, Options Menu, Button Dropdown, Combo Button
Types: Standard Dropdowns, Split Dropdowns, Sized Dropdowns, Styled Dropdowns, Custom-menu Dropdowns, Offset Dropdowns, Rich-content Dropdowns, Auto-Close Behavior Dropdowns
Principles
Visual Organization
Dropdowns organize options in a clear, hierarchical structure while maintaining a clean interface.
User Efficiency
Through compact presentation and clear organization, dropdowns provide quick access to multiple options without cluttering the interface.
Context Preservation
Dropdowns maintain context while presenting additional options, helping users understand their location in the interface.
Anatomy
- Collapse/Expand Icon
- Element List
- Element Item
- Element Divider
The collapse/expand icon
The list of elements in the dropdown
An individual item in the dropdown
Optional separators between items
Usage
Use dropdowns to present multiple options or actions without cluttering the interface. They're particularly effective for navigation menus, action menus, filter options, and settings controls. Dropdowns help maintain a clean interface by showing options only when needed, while still providing quick access to multiple choices.