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">
    <x-ui.icon name="ph--dots-three-vertical" class="text-sm" />
</x-ui.dropdown.trigger>

<x-ui.dropdown class="w-46 font-medium" id="dealDropdown-1">
    <x-ui.dropdown.item>
        <x-ui.dropdown.icon>
            <x-ui.icon name="ph--eye" />
        </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>
            <x-ui.icon name="ph--eyedropper" />
        </x-ui.dropdown.icon>
        <x-ui.dropdown.label class="truncate">
            Convert to Opportunity
        </x-ui.dropdown.label>
    </x-ui.dropdown.item>
    <x-ui.dropdown.item>
        <x-ui.dropdown.icon>
            <x-ui.icon name="ph--archive" />
        </x-ui.dropdown.icon>
        <x-ui.dropdown.label class="truncate">
            Archive lead
        </x-ui.dropdown.label>
    </x-ui.dropdown.item>
    <x-ui.dropdown.item intent="destructive">
        <x-ui.dropdown.icon class="text-current">
            <x-ui.icon name="ph--trash" />
        </x-ui.dropdown.icon>
        <x-ui.dropdown.label class="truncate">
            Delete
        </x-ui.dropdown.label>
    </x-ui.dropdown.item>
</x-ui.dropdown>

Installation

Install the component

  1. Install the component

    Shell 
    php artisan flexi:add dropdown

  2. Install dependencies

    This component requires JS. By default we're using our own Interactive Component Library Flexilla . Install this only if you did not accept dependency installation when adding the component.

      Usage

    1. With Alpine/Livewire
      2. Shell 
      npm i @flexilla/dropdown

      Normally after installing the component, a file should be created in resources/js/plugins/dropdown.js .

      flexilla.js 
      import { DropdownPlugin } from "./plugins/dropdown";

Alpine.plugin(DropdownPlugin)
    2. Without Alpine

      3. 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 header 

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

 <x-ui.dropdown placement="bottom-start" class="w-54" id="profile-1">
    <x-ui.dropdown.header class="flex items-center gap-x-3 px-2 pt-2 pb-1">
        <x-ui.avatar-placeholder variant="subtle" size="lg">
            <x-ui.icon name="ph--user" class="flex" />
        </x-ui.avatar-placeholder>

        <div class="flex items-start flex-col">
            <h4 class="font-semibold text-foreground text-sm">Tresor Kasenda</h4>
            <span class="text-xs text-muted-foreground">Web Developer</span>
        </div>
    </x-ui.dropdown.header>
    <x-ui.dropdown.separator class="border-border"/>
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <x-ui.icon name="ph--pen" class="text-sm" />
         </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>
             <x-ui.icon name="ph--gear" class="text-sm" />
         </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>
             <x-ui.icon name="ph--wallet" class="text-sm" />
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
              Billing
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
     <x-ui.dropdown.item intent="destructive">
         <x-ui.dropdown.icon>
             <x-ui.icon name="ph--sign-out" class="text-sm" />
         </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="outline" size="sm" dropdown-id="with-submenu">
     More Options
     <x-ui.icon name="ph--caret-down" class="ml-2 text-xs" />
 </x-ui.dropdown.trigger>

 <x-ui.dropdown keep-open placement="bottom-start" class="w-46" id="with-submenu">
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <x-ui.icon name="ph--eye" class="text-sm" />
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             View deal
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
     <x-ui.dropdown.item-submenu dropdownId="dropdown-submenu">
         <x-ui.dropdown.icon>
             <x-ui.icon name="ph--archive" class="text-sm" />
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Transaction
         </x-ui.dropdown.label>
     </x-ui.dropdown.item-submenu>
     <x-ui.dropdown.item intent="destructive">
         <x-ui.dropdown.icon>
             <x-ui.icon name="ph--trash" class="text-sm" />
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Delete
         </x-ui.dropdown.label>
     </x-ui.dropdown.item>
 </x-ui.dropdown>
 <x-ui.dropdown submenu class="w-34" id="dropdown-submenu">
     <x-ui.dropdown.item>
         <x-ui.dropdown.icon>
             <x-ui.icon name="ph--chart-line-up" class="text-sm" />
         </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>
             <x-ui.icon name="ph--chart-line-down" class="text-sm" />
         </x-ui.dropdown.icon>
         <x-ui.dropdown.label>
             Outcome
         </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.
keepOpenOutside boolean false
When true, clicking outside the dropdown won't close it.
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