Dropdown Component

warning

Components is not ready yet.

The glu-dropdown component displays a dropdown menu that can be toggled using different interaction types. It supports custom trigger content, an optional arrow indicator, and backdrop dismissal. You can control its width by setting the size to either "cover" (match trigger width) or "auto" (based on content).

---

Basic Usage

Example 1: Simple Dropdown

HTML

Result

Loading...

Live Editor

<glu-dropdown>
  <div slot="dropdown-trigger">
    <glu-button>Open Dropdown</glu-button>
  </div>
  <div>
    Dropdown content goes here.
  </div>
</glu-dropdown>

React

Result

Loading...

Live Editor

import { GluDropdown, GluButton } from '@gelato-ui/react';

function App() {
  return (
    <GluDropdown>
      <>
        <div slot="dropdown-trigger">
          <GluButton>Open Dropdown</GluButton>
        </div>
        <div>
          Dropdown content goes here.
        </div>
      </>
    </GluDropdown>
  );
}

Vue

Result

Loading...

Live Editor

<glu-dropdown>
  <template #dropdown-trigger>
    <glu-button>Open Dropdown</glu-button>
  </template>
  <div>
    Dropdown content goes here.
  </div>
</glu-dropdown>

<script setup>
import { GluDropdown } from '@gelato-ui/vue';
</script>

Angular

Result

Loading...

Live Editor

<glu-dropdown>
  <div slot="dropdown-trigger">
    <glu-button>Open Dropdown</glu-button>
  </div>
  <div>
    Dropdown content goes here.
  </div>
</glu-dropdown>

Result

Loading...

Live Editor

import { Component } from '@angular/core';
import { GluDropdown } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluDropdown],
  template: `
    <glu-dropdown>
      <div slot="dropdown-trigger">
        <glu-button>Open Dropdown</glu-button>
      </div>
      <div>
        Dropdown content goes here.
      </div>
    </glu-dropdown>
  `
})
export class MyComponent {}

---

Trigger Actions

The triggerAction prop determines how the dropdown is toggled. It supports the following options:

• click: Toggles the dropdown on left-click.
• hover: Opens on mouse enter and closes on mouse leave.
• context-menu: Toggles on right-click (preventing the default context menu).

HTML

Result

Loading...

Live Editor

<glu-dropdown triggerAction="hover">
  <div slot="dropdown-trigger">
    <glu-button>Hover to Open</glu-button>
  </div>
  <div>
    Dropdown content activated by hover.
  </div>
</glu-dropdown>

React

Result

Loading...

Live Editor

<GluDropdown triggerAction="context-menu">
  <>
    <div slot="dropdown-trigger">
      <GluButton>Right-Click to Open</GluButton>
    </div>
    <div>
      Dropdown content activated by context menu.
    </div>
  </>
</GluDropdown>

---

Properties

Property	Attribute	Description	Type	Default
hasArrow	has-arrow	If true, an arrow will be displayed that points at the trigger.	boolean	false
isBackdropDismiss	is-backdrop-dismiss	If true, the dropdown will be dismissed when the backdrop is clicked.	boolean	false
isOpen	is-open	Controls whether the dropdown is open.	boolean	false
showBackdrop	show-backdrop	If true, a backdrop will be displayed behind the dropdown.	boolean	false
side	side	Describes which side of the trigger to position the dropdown.	"bottom" | "left" | "right" | "top"	'bottom'
size	size	Describes how to calculate the dropdown width. If "cover", the width matches the trigger element. If "auto", the width is based solely on the content.	"auto" | "cover"	'auto'
text	text	Optional default trigger text. Only shown if no trigger content is provided.	string	'Dropdown'
triggerAction	trigger-action	Defines the type of interaction that triggers the dropdown. 'click' toggles on left-click. 'hover' opens on mouse enter and closes on mouse leave. 'context-menu' toggles on right-click (preventing the default context menu).	"click" | "context-menu" | "hover"	'click'

Events

Event	Description	Type
dropdownToggle	Emitted when the dropdown is toggled.	CustomEvent<boolean>

Slots

Slot	Description
	The default slot for the dropdown content.
"dropdown-trigger"	The default slot for the dropdown trigger.

Dependencies

Used by

• glu-menu-dropdown

Depends on

• glu-button

Graph

---

Built with StencilJS