1. Docs
  2. Dropdown

Accordion Component

Create interactive dropdown menus with customizable options, placements, and trigger strategies.

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 recommended 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

Core Styling Requirements

The content element (e.g., the div with id="myDropdown") requires specific CSS properties for correct positioning if you are not using the Flexilla UnoCSS preset or the Flexilla Tailwind CSS plugin (which provide a ui-popper utility class).
If you are styling manually, ensure the following CSS is applied to your dropdown content element: 
.your-dropdown-content-class { /* Or apply directly to the ID #myDropdown */
  position: fixed;
  top: var(--fx-popper-placement-y);
  left: var(--fx-popper-placement-x);
  /* Other styles like width, background, z-index, etc., as needed */
}
Explanation:
  • position: fixed;: This is essential for positioning the element relative to the viewport.
  • top: var(--fx-popper-placement-y);: Flexilla calculates the vertical position and exposes it via this CSS custom property.
  • left: var(--fx-popper-placement-x);: Flexilla calculates the horizontal position and exposes it via this CSS custom property.
If you are using the Flexilla UnoCSS preset or Tailwind plugin, adding the ui-popper class to your content element handles these requirements automatically. For example: <div id="myDropdown" class="ui-popper ...other-styles">...</div>

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 indicates if the trigger is expanded. If aria-expanded is true, then typically the data-state will also be open.
You can use it in CSS, for example, to animate an indicator within the trigger. 
.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 })