1. Components
  2. dropdown

Dropdown

Overlay menu for displaying contextual actions or links.

Demo 

 <x-ui.dropdown.trigger variant="outline" intent="gray" size="sm" iconOnly dropdownId="dealDropdown-1">
     <span class="iconify ph--dots-three-vertical text-sm"></span>
 </x-ui.dropdown.trigger>

 <x-ui.dropdown class="w-56" id="dealDropdown-1">
     <x-ui.dropdown.item>
         View deal
     </x-ui.dropdown.item>
     <x-ui.dropdown.item>
         Convert to Opportunity
     </x-ui.dropdown.item>
     <x-ui.dropdown.item>
         Archive lead
     </x-ui.dropdown.item>
     <x-ui.dropdown.item danger>
         Delete
     </x-ui.dropdown.item>
 </x-ui.dropdown>

Installation

Add the component

  1. Add the component

    Shell 
    flexi-cli add dropdown

  2. Install Dropdown

    This component require JS. By default we're using our own Interactive Component Library Flexilla . Install this only if you didn't accept dependencies installation during component addition.
    1. With Alpine
      2. Shell 
      npm i @flexilla/alpine-dropdown

      Add plugin in flexilla.js

      flexilla.js 
      import AlpineDropdown from "@flexilla/alpine-dropdown"

Alpine.plugin(AlpineDropdown)
    2. Without Alpine
      3. Make sure that the dropdown package is not installed
      Shell 
      npm i @flexilla/dropdown

      Initialize dropdown in flexilla.js

      flexilla.js 
      import { Dropdown } from "@flexilla/dropdown"

// init Auto resize area for all Element with data-app-dropdown attribute
Dropdown.autoInit('[data-app-dropdown]')

Examples

With icons 

 <x-ui.dropdown.trigger variant="solid" intent="white" size="sm" dropdownId="dealDropdown-2">
    More Options
    <span class="iconify ph--caret-down ml-2 text-xs"></span>
 </x-ui.dropdown.trigger>

 <x-ui.dropdown class="w-48" id="dealDropdown-2">
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <span class="iconify ph--eye text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             View deal
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <span class="iconify ph--archive text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Archive lead
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
     <x-ui.dropdown.item danger>
         <x-ui.dropdown.icon>
             <span class="iconify ph--trash text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Delete
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
 </x-ui.dropdown>

With header 

 <x-ui.dropdown.trigger variant="solid" intent="white" size="sm" dropdownId="profile-1">
    Options
    <span class="iconify ph--caret-down ml-2 text-xs in-[aria-expanded]:rotate-180"></span>
 </x-ui.dropdown.trigger>

 <x-ui.dropdown placement="bottom-start" class="w-56" id="profile-1">
    <x-ui.dropdown.header class="flex items-center gap-x-3 px-2 pt-2 pb-1">
        <x-ui.avatar-placeholder radius="md" variant="subtle" size="md">
            <span class="flex iconify ph--user"></span>
        </x-ui.avatar-placeholder>
        <div class="flex items-start flex-col">
            <h4 class="font-semibold text-fg-title text-sm">Tresor Kasenda</h4>
            <span class="text-xs text-fg-muted">Web Developer</span>
        </div>
    </x-ui.dropdown.header>
    <x-ui.dropdown.separator class="border-border"/>
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <span class="iconify ph--pen text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Edit Profile
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <span class="iconify ph--gear text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Settings
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <span class="iconify ph--wallet text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
              Billing
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
     <x-ui.dropdown.item danger>
         <x-ui.dropdown.icon>
             <span class="iconify ph--sign-out text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
              Logout
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
 </x-ui.dropdown>

Submenu 

 <x-ui.dropdown.trigger variant="solid" intent="white" size="sm" dropdown-id="with-submenu">
     More Options
     <span class="iconify ph--caret-down ml-2 text-xs"></span>
 </x-ui.dropdown.trigger>

 <x-ui.dropdown keep-open class="w-48" id="with-submenu">
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <span class="iconify ph--eye text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             View deal
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
     <x-ui.dropdown.item-submenu dropdown-id="dropdown-submenu">
         <x-ui.dropdown.icon>
             <span class="iconify ph--archive text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Transaction
         </x-ui.dropdown.label>
     </x-ui.dropdown.item-submenu>
     <x-ui.dropdown is-sub-menu class="w-36" id="dropdown-submenu">
         <x-ui.dropdown.item>
             <x-ui.dropdown.icon>
                 <span class="iconify ph--chart-line-up text-sm"></span>
             </x-ui.dropdown.icon>
             <x-ui.dropdown.label>
                 Income
             </x-ui.dropdown.label>
         </x-ui.dropdown.item>
         <x-ui.dropdown.item>
             <x-ui.dropdown.icon>
                 <span class="iconify ph--chart-line-down text-sm"></span>
             </x-ui.dropdown.icon>
             <x-ui.dropdown.label>
                 Outcome
             </x-ui.dropdown.label>
         </x-ui.dropdown.item>
     </x-ui.dropdown>
     <x-ui.dropdown.item danger>
         <x-ui.dropdown.icon>
             <span class="iconify ph--trash text-sm"></span>
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Delete
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
 </x-ui.dropdown>

References

Dropdown Component

The dropdown component creates a toggleable menu that appears when a trigger element is clicked.

Prop Type Default Description
id string -
A unique identifier for the dropdown. Required for proper functionality.
placement string 'bottom'
Controls where the dropdown appears relative to the trigger. Common values:
  • top , top-start , top-end
  • right , right-start , right-end
  • bottom (default), bottom-start , bottom-end
  • left , left-start , left-end
keepOpen boolean false
When true, clicking inside the dropdown won't close it. Useful for dropdowns with interactive content.
keppOpenOut boolean false
When true, clicking outside the dropdown won't close it. The dropdown can only be closed programmatically.
class string ''
Additional CSS classes for the dropdown container.
contentClass string ''
Additional CSS classes for the dropdown content area.

Subcomponents

The dropdown system includes several subcomponents for building rich dropdown menus.

Component Description
x-ui.dropdown.trigger
The clickable element that toggles the dropdown. Must have 'dropdown-id' attribute. The 'dropdown-id' attribute must match the 'id' attribute of the x-ui.dropdown component. It inherits all attributes from the x-ui.button component.
x-ui.dropdown.item
A standard menu item. Can be used for navigation or actions.
x-ui.dropdown.item-submenu
Creates a nested submenu.
x-ui.dropdown.separator
A horizontal line to separate groups of menu items.
x-ui.dropdown.header
A header section for grouping related menu items.
x-ui.dropdown.icon
An icon that can be placed next to menu items.
x-ui.dropdown.kbd
Displays a keyboard shortcut key.

JavaScript API

To know more about the JavaScript API, check the Flexilla Dropdown documentation.

Prev
Popover

Floating container f...

Next
On this page