Aqua Basis

The AqDropdown component displays a menu or custom content that appears when clicking a trigger button. It supports declarative content via the items property or full customization using the activator and content slots.

Default

Renders a dropdown menu with preset options.

<aq-dropdown id="dropdown-1">
  <aq-button slot="activator" is-outline variant="default" hasDisclosure>
	  Button
  </aq-button>
  <div slot="content">
    <aq-dropdown-item class="dropdown_item">
      <em class="aq-icon-check-circle"></em>
      Option
    </aq-dropdown-item>
    <aq-dropdown-item class="dropdown_item">
      <em class="aq-icon-check-circle"></em>
      Option
    </aq-dropdown-item>
    <aq-dropdown-item class="dropdown_item">
      <em class="aq-icon-check-circle"></em>
      Option
    </aq-dropdown-item>
  </div>
</aq-dropdown>

Props and Attributes

Prop / Attr	Type	Default	Description
`items`	[`IDropdownItem](<https://masivapp.notion.site/23f1de3976b9800ca382f754f3d6b302>)[]`	`[]`	List of items to render inside the dropdown.
`label`	`string`	`''`	Text label associated with the dropdown.
`idParent`	`string`	`''`	Identifier used to link this dropdown with a parent element.
`dataCallback`	`Function	null`	`null`
`closeOnClickOutside`	`boolean`	`true`	Closes the dropdown when clicking outside of it.
`isDisabled`	`boolean`	`false`	Disables interaction with the dropdown.
`placement`	`Placement`	`'right'`	Controls the position of the dropdown relative to its trigger.
`popoverWidth`	`PopoverWidths	number`	[`PopoverWidths](<https://masivapp.notion.site/2401de3976b980b0b29fde297aa6c4ad>).DEFAULT`

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-actions-aqdropdown--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Variants

The only variant of the dropdown is the disabled status, that disabled the interaction of the activator and hide temporaly the popover element. But this only works if the activator

isDisabled

Events

Event	Description	React	Angular	Vue	Vanilla
`selection`	Triggered when an option is selected.	`onSelection={handleSelection}`	`(selection)="handleSelection($event)"`	`@selectionS="handleSelection"`	`addEventListener('selection', handler)`

Event Types

Event	React	Angular	Vue
`selection`	`(e:Event)`	`(e:Event)`	`(e:Event)`

Slots

The dropdown slots provide a way to have a dynamic activator and additionally a header and footer

Slot	Description
`activator`	Element that triggers the dropdown popover when interacted with.
`header`	Injects content at the top of the dropdown popover.
`content`	Main body of the popover. Uused to render the list of options.
`footer`	Injects content at the bottom of the dropdown popover.

<!--
	<aq-button ...> <slot /> </aq-button>
-->

<aq-dropdown id="dropdown-3" placement="bottom-end" popover-width="auto">
  <aq-button slot="activator" variant="is-default" is-outline disclosure>Click Me!!</aq-button>
  <div slot="header">
    <aq-subheading>Custom Heading</aq-subheading>
  </div>
  <div slot="content">
	  <!-- content -->
  </div>
  <div slot="footer">
	  <aq-button id="dropdown-3-button" is-outline>
	    Custom Footer
	  </aq-button>
	</div>
</aq-dropdown>