Skip to content

Instantly share code, notes, and snippets.

@ekenberg
Last active December 21, 2025 18:55
Show Gist options
  • Select an option

  • Save ekenberg/47cba0678f9c3e6763a61fb3f5fd690d to your computer and use it in GitHub Desktop.

Select an option

Save ekenberg/47cba0678f9c3e6763a61fb3f5fd690d to your computer and use it in GitHub Desktop.
Bulma split button dropdown using data-star
<!--
Pasting this example for future reference.
https://bulma.io/documentation/components/dropdown/
https://data-star.dev/reference/attributes
-->
<div class="field is-grouped is-grouped-right">
<div class="control">
<div class="dropdown" data-signals="{'_ddOpen': false}"
data-class:is-active="$_ddOpen">
<div class="dropdown-trigger buttons has-addons mb-1">
<button class="button is-success" type="button"
data-indicator:_fetching
data-on:click="@post('saveclose')">
<span>Save and close</span>
</button>
<button class="button is-success" type="button"
style="border-left: white solid 1px"
data-on:click="$_ddOpen = !$_ddOpen"
data-on:blur__delay.200ms="$_ddOpen=false">
<span class="icon is-small">
<i class="fas fa-angle-down" data-show="! $_ddOpen"></i>
<i class="fas fa-angle-up" data-show="$_ddOpen"></i>
</span>
</button>
</div>
<div class="dropdown-menu pt-0 pr-3" role="menu">
<div class="dropdown-content py-0">
<span class="dropdown-item has-text-weight-bold has-background-success-light is-clickable"
style="border-radius: 5px"
data-indicator:_fetching
data-on:click="@post('save')">Save</span>
</div>
</div>
</div>
</div>
</div>
@ekenberg
Copy link
Author

image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment