Dropdown menu

Components dropdown_menu

Button that toggles a menu of actions.

Markup

Drops in as data-pb-block="dropdown_menu".

html

<div data-pb-block="dropdown_menu" class="pb-dropdown" x-data="{ open: false }" style="display:inline-block;position:relative;">
  <button type="button" class="pb-dropdown__trigger" @click="open = !open" :aria-expanded="open" style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.1rem;border:1px solid #cbd5e1;border-radius:0.5rem;background:#fff;color:#334155;font-weight:600;cursor:pointer;">
    <span>Options</span>
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="open ? 'transform:rotate(180deg)' : ''" style="transition:transform 0.2s ease;"><polyline points="6 9 12 15 18 9"/></svg>
  </button>
  <div class="pb-dropdown__menu" role="menu" x-show="open" x-cloak x-transition.opacity @click.outside="open = false" @keydown.escape.window="open = false" style="position:absolute;top:calc(100% + 0.35rem);left:0;min-width:11rem;padding:0.35rem;background:#fff;border:1px solid #e2e8f0;border-radius:0.5rem;box-shadow:0 12px 32px rgba(15,23,42,0.16);z-index:20;">
    <a href="#" class="pb-dropdown__item" role="menuitem" @click="open = false" style="display:block;padding:0.5rem 0.65rem;border-radius:0.375rem;color:#334155;text-decoration:none;">Edit</a>
    <a href="#" class="pb-dropdown__item" role="menuitem" @click="open = false" style="display:block;padding:0.5rem 0.65rem;border-radius:0.375rem;color:#334155;text-decoration:none;">Duplicate</a>
    <a href="#" class="pb-dropdown__item" role="menuitem" @click="open = false" style="display:block;padding:0.5rem 0.65rem;border-radius:0.375rem;color:#dc2626;text-decoration:none;">Delete</a>
  </div>
</div>

Settings

Interactive behaviour is built in; on top of that every block supports:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="dropdown_menu" so it imports as a labelled, editable component.
Interactive out of the box: Ships with Alpine state baked in (x-data, @click, x-show, x-transition) — open/close, tabs and toggles work with no wiring. These owner-authored blocks are trusted and keep their executable directives.