Dropdown

The short-form tutorial below represents how to pair Rails UI, Stimulus.js, and Ruby on Rails together to achieve a dropdown pattern using a set of elements working together.

1. Initializing a dropdown

<div data-controller="railsui-dropdown">
  <button>Dropdown</button>
  <div>
    <a href="#">Menu list item 1</a>
    <a href="#">Menu list item 2</a>
  </div>
</div>

// Start Stimulus
import { Application } from '@hotwired/stimulus'

const application = Application.start()

// Import component
import { RailsuiDropdown } from 'railsui-stimulus'
application.register('railsui-dropdown', RailsuiDropdown)

2. Triggering a dropdown

To trigger a dropdown to appear you will need some form of actionable target like a button or a element. Append the following attributes to your target. data-action="railsui-dropdown#toggle click@window->railsui-dropdown#hide" (see the base example below for a complete concept).

<div data-controller="railsui-dropdown">
  <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">Dropdown</button>
  <div>
    <a href="#">Menu list item 1</a>
    <a href="#">Menu list item 2</a>
  </div>
</div>

3. Defining the menu

Each dropdown has a corresponding menu that gets hidden by default. The menu requires the following attribute to function data-railsui-dropdown-target="menu". The element the target is appended to also requires the class name class='hidden' to be present.

<div data-controller="railsui-dropdown">
  <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">Dropdown</button>
  <div class="hidden" data-railsui-dropdown-target="menu">
    <a href="#">Menu list item 1</a>
    <a href="#">Menu list item 2</a>
  </div>
</div>

4. Adding transitions and effects

Stimulus.js doesn't provide help in the context of animation and transitions so we reached for stimulus-use to help.

Using the library you can leverage data attributes to add specific effects provided by Tailwind CSS classes at different states of a dropdown transition.

<div data-controller="railsui-dropdown">
  <button data-action="click->railsui-dropdown#toggle click@window->dropdown#hide">Dropdown</button>
  <div
    class="hidden"
    data-railsui-dropdown-target="menu"
    data-transition-enter-from="opacity-0 scale-95"
    data-transition-enter-to="opacity-100 scale-100"
    data-transition-leave-from="opacity-100 scale-100"
    data-transition-leave-to="opacity-0 scale-95">
    <a href="#">Menu list item 1</a>
    <a href="#">Menu list item 2</a>
  </div>
</div>