1. Docs
  2. Dropdown

Accordion Component

Create interactive, collapsible accordion elements with customizable options and animations.

PopoverUnoCSS PresetTailwind Plugin
The Dropdown component in Flexilla provides a versatile and customizable way to create dropdown menus. It is built on top of the Popover component, leveraging the powerful Flexipop positioning engine to ensure precise element placement.

Installation

To start using the dropdown component, install the @flexilla/dropdown package. If you’ve already installed the @flexilla/flexilla, this step can be skipped.

Structure

The dropdown consists of a trigger and the dropdown content.

Dropdown Trigger

Any valid HTMLElement, but it’s recommanded to use button.
  • data-dropdown-trigger: This attribute is added to the element that will trigger the dropdown.
  • data-dropdown-id: This attribute must correspond to the ID of the dropdown content element.

Dropdown Content

Any Valid HTMLElement, must have id attribute, position set to fixed.

Example

Initializing the Component

To initialize the dropdown, import the Dropdown component and create an instance: 
import { Dropdown } from '@flexilla/dropdown';

const myDropdown = new Dropdown('#myDropdown', { /* options here */ });

Options

The Dropdown component provides several configuration options to control its behavior. 
type DropdownOptions = {
  triggerStrategy?: "click" | "hover", // Open the dropdown on click or hover.
  placement?: Placement, // Controls the position of the dropdown (top, bottom, left, right).
  preventCloseFromInside?: boolean, // Prevent closing when interacting inside the dropdown.
  preventFromCloseOutside?: boolean, // Prevent closing when clicking outside the dropdown.
  defaultState?: "open" | "close", // Set the initial state of the dropdown.
  offsetDistance?: number, // Controls the distance between the trigger and dropdown.
  popper?: {
    eventEffect: EventEffect // Manages event effects on scroll and resize.
  },
  onShow?: () => void, // Callback when dropdown is shown.
  onHide?: () => void, // Callback when dropdown is hidden.
  onToggle?: ({ isHidden }: { isHidden?: boolean }) => void // Callback when dropdown is toggled.
};

Event Effect Options 

type EventEffect = {
  disableOnScroll?: boolean, // Disable repositioning on scroll.
  disableOnResize?: boolean  // Disable repositioning on resize.
};

Example with Options 

const myDropdown = new Dropdown('#myDropdown', {
  triggerStrategy: 'click',
  placement: 'bottom',
  offsetDistance: 8,
  preventFromCloseOutside: true,
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});

Trigger Strategies

You can customize how the dropdown is triggered using the triggerStrategy option:
  • click: Opens the dropdown on click.
  • hover: Opens the dropdown on hover. 
<button data-dropdown-trigger data-dropdown-id="dropdownClick"> Click to open dropdown </button>
<button data-dropdown-trigger data-dropdown-id="dropdownHover" data-trigger-strategy="hover"> Hover to open dropdown </button>

Placement

Similar to the Popover component, you can control where the dropdown appears using the placement option.
Available placements:
  • top
  • bottom
  • left
  • right 
new Dropdown('.dropdown', { placement: 'right' });

Customizing the Offset

You can adjust the spacing between the dropdown trigger and the dropdown content using the offsetDistance option: 
new Dropdown('.dropdown', { offsetDistance: 12 });

Attributes

Attributes options

  • data-placement : define the placement of the Dropdown
  • data-offset-distance : the equivalent of setting offsetDistance in options
  • data-default-state : define a default state of the Dropdown (open|close), the equivalent of options.defaultState, must be (open|close)
  • data-prevent-close-outside : adding this attribute is similar to setting the option preventFromCloseOutside, no value required
  • data-prevent-close-inside : adding this attribute is similar to setting the option preventCloseFromInside, no value required

data-state Attribute

The data-state attribute is used to indicate the state of the dropdown element:
  • open: Indicates the dropdown is currently visible.
  • close: Indicates the dropdown is hidden. You can use this to change the dropdown Element behavior with CSS (hide, show) 
.myDropdown{
  display : none;
}
.myDropdown[data-state=open]{
  display : block;
}

aria-expanded Attribute

The aria-expanded attribute indicate if the trigger is expanded or not, if expanded true then normal the data-state is open too.
You use it in CSS like to animate the indicator inside the trigger or something else 
.myDropdown-trigger[aria-expanded=true] .icon-indicator{
  /* style here  */
}

Methods

init(/*options*/)

You can use the Static method if you don’t like to use new Dropdown(/*options*/) syntax 
Dropdown.init("#myDropdown", {/* options */})

Auto Initialization

You can automatically initialize all Dropdowns on the page by calling autoInit(): 
Dropdown.autoInit(); // Initializes all dropdowns with `data-fx-dropdown`.
The Dropdown component also exposes methods for programmatic control:

show()

Manually show the dropdown. 
myDropdown.show();

hide()

Manually hide the dropdown. 
myDropdown.hide();

setShowOptions(/* options */)

Like show() method but here you can set the placement and offsetDistance if needed. 
myDropdown.setShowOptions({ placement: Placement, offsetDistance: number })