Concorde UI component — Pop. sonic-pop anchors a floating panel to a trigger: put the control in the default slot and the panel (menu, form, any markup) in slot="content". A click on the trigger toggles the panel unless manual is Doc ID: core/components/ui/pop/pop. Keywords: Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component, slot="content", manual, placement, top, bottom, left, right, -start, -center. URL: https://concorde.supersoniks.org/core/components/ui/pop.

Pop

sonic-pop anchors a floating panel to a trigger: put the control in the default slot and the panel (menu, form, any markup) in slot="content". A click on the trigger toggles the panel unless manual is set. The panel follows the trigger while open and flips to stay inside the viewport.

Basic example

<sonic-pop>
      <sonic-button>Notifications</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
          Notifications
        </sonic-menu-item>
        <sonic-menu-item>
          <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
          Settings
        </sonic-menu-item>
      </sonic-menu>
    </sonic-pop>

Placement

placement is a side (top · bottom · left · right) with an optional alignment suffix (-start · -center · -end). Default is bottom; without a suffix, the panel aligns to start. The space syntax (bottom center) is deprecated.

<div class="flex flex-wrap gap-2">
      <sonic-pop placement="top">
        <sonic-button>Top</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop placement="bottom">
        <sonic-button>Bottom</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop placement="left">
        <sonic-button>Left</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop placement="right">
        <sonic-button>Right</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop placement="top-center">
        <sonic-button>Top center</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop placement="bottom-center">
        <sonic-button>Bottom center</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop placement="left-center">
        <sonic-button>Left center</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop placement="bottom-end">
        <sonic-button>Bottom end</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
    </div>

Shadow

The panel shadow defaults to lg.

<div class="flex flex-wrap gap-2">
      <sonic-pop shadow="none">
        <sonic-button>None</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop shadow="sm">
        <sonic-button>Small</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop shadow="md">
        <sonic-button>Medium</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop shadow="lg">
        <sonic-button>Large</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
    </div>

Inline

The host is middle-aligned by default. Set inline to baseline-align a trigger inside running text.

<p>
      You are signed in as
      <sonic-pop inline>
        <sonic-button variant="link">ada.lindqvist@example.com</sonic-button>
        <sonic-menu slot="content">
          <sonic-menu-item>Profile</sonic-menu-item>
          <sonic-menu-item>Sign out</sonic-menu-item>
        </sonic-menu>
      </sonic-pop>
      on this device.
    </p>

No toggle

With noToggle, clicking the trigger opens the pop but does not close it. Close it with an outside click, Escape or hide().

<div class="flex flex-wrap gap-2">
      <sonic-pop noToggle>
        <sonic-button>No toggle</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
      <sonic-pop>
        <sonic-button>Default toggle</sonic-button>
        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
      </sonic-pop>
    </div>

Manual control

manual disables the built-in click and keyboard handling on the trigger. Call show() and hide() instead.

<sonic-pop manual id="manualPop">
      <sonic-button onclick="alert('Custom action, the pop stays closed')">Manual trigger</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item>Opened from script</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>
    <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5" variant="outline">
      Open the pop
    </sonic-button>

Keep open on select

A click inside the panel closes the pop by default. Set data-on-select="keep" on the panel or a descendant to keep it open, for example while ticking checkboxes.

<div class="flex flex-wrap gap-2">
      <sonic-pop>
        <sonic-button>Closes on select</sonic-button>
        <div slot="content" class="grid gap-2 p-3">
          <sonic-checkbox>Window seat</sonic-checkbox>
          <sonic-checkbox>Extra baggage</sonic-checkbox>
        </div>
      </sonic-pop>
      <sonic-pop>
        <sonic-button>Stays open on select</sonic-button>
        <div slot="content" class="grid gap-2 p-3" data-on-select="keep">
          <sonic-checkbox>Window seat</sonic-checkbox>
          <sonic-checkbox>Extra baggage</sonic-checkbox>
        </div>
      </sonic-pop>
    </div>

Keyboard

ArrowDown on the trigger opens the pop. Escape closes the most recently opened pop, before an enclosing sonic-modal, and returns focus to its trigger.

<sonic-pop>
      <sonic-button>Focus me, then press ArrowDown</sonic-button>
      <sonic-menu slot="content">
        <sonic-menu-item>First item</sonic-menu-item>
        <sonic-menu-item>Second item</sonic-menu-item>
      </sonic-menu>
    </sonic-pop>

API reference