Catalog Dropdowns

<.dropdown>

ConnieUI.Dropdowns

HEEx 
<ConnieUI.Dropdowns.dropdown :let={[popover: popover, button: button]} id="catalog-dropdown">
  <ConnieUI.Buttons.button
    id={button}
    popovertarget={popover}
    popovertargetaction="toggle"
    size="md"
    color="secondary"
    icon_end="icon-chevron-down"
  >
    Actions
  </ConnieUI.Buttons.button>
  <:popover>
    <ConnieUI.Dropdowns.item icon="icon-edit-02" click={JS.push("rename")}>
      Rename
    </ConnieUI.Dropdowns.item>
    <ConnieUI.Dropdowns.item icon="icon-copy-01" click={JS.push("duplicate")}>
      Duplicate
    </ConnieUI.Dropdowns.item>
    <ConnieUI.Dropdowns.separator />
    <ConnieUI.Dropdowns.item
      icon="icon-trash-01"
      icon_class="text-fg-error-primary"
      click={JS.push("delete")}
    >
      Delete
    </ConnieUI.Dropdowns.item>
  </:popover>
</ConnieUI.Dropdowns.dropdown>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:string
:integer
:string

Comma-separated fallback placements for flip middleware (e.g. 'top-end,bottom-end')

:string

When true, the popover width is locked to the trigger button width

:string

Tallest the popover grows before it scrolls, as any CSS length. Without a cap a long list (150 currencies, every country) fills the viewport top to bottom and gets pinned to the top of the screen to fit. The default is a share of the viewport rather than a pixel count, so the list is generous on a desktop screen and still leaves the page visible behind it. `dvh` rather than `vh` so it tracks mobile browser chrome appearing and disappearing; every browser with the popover API this is built on has had `dvh` for years. The space between the trigger and the viewport edge remains the hard limit whatever is passed here.

Docs

A trigger and the popover it opens. The popover sits in the top layer, so it is positioned against the viewport alone: a scroll container or a fixed header around the trigger does not clip it. A page that covers the top of the viewport with something of its own sets `--cui-popover-inset-top` to that band's height on any ancestor of the dropdown, and the popover keeps below it, flipping, shifting and shrinking as though the viewport started there. <div class="[--cui-popover-inset-top:56px]"> <ConnieUI.Dropdowns.dropdown ...>...</ConnieUI.Dropdowns.dropdown> </div> Unset, it is `0` and the whole viewport is available. Items laid out in a grid sit in a container carrying `data-grid-columns` with the column count. Inside it, Left and Right move one item, Up and Down one row, and Home and End to the grid's first and last item; Up off the top row and Down off the bottom one move on to the items around the grid. A popover holding a grid opens on the item marked `data-selected`, else the one marked `data-inherited`, else its first item. <div data-grid-columns="5" class="grid grid-cols-5">...</div>
Attribute Type Default Description
id :string
position :string "bottom-start"
bottom | bottom-start | bottom-end | top | top-start | top-end | left | left-start | left-end | right | right-start | right-end
offset :integer 8
fallback :string nil
Comma-separated fallback placements for flip middleware (e.g. 'top-end,bottom-end')
size :string "3xs"
auto | 3xs | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | 7xl
match_width :boolean false
When true, the popover width is locked to the trigger button width
max_height :string "60dvh"
Tallest the popover grows before it scrolls, as any CSS length. Without a cap a long list (150 currencies, every country) fills the viewport top to bottom and gets pinned to the top of the screen to fit. The default is a share of the viewport rather than a pixel count, so the list is generous on a desktop screen and still leaves the page visible behind it. `dvh` rather than `vh` so it tracks mobile browser chrome appearing and disappearing; every browser with the popover API this is built on has had `dvh` for years. The space between the trigger and the viewport edge remains the hard limit whatever is passed here.
Slot Slot attributes Description
inner_block *
:popover *