Scott Watermasysk Husband, Father, and KickoffLabs co-founder. Interests: basketball, bootstrapping, keyboards, training, and Building new things

Stimulus.js Toggler for TailwindUI Nav


I am using the TailwindUI navigation bar and needed to implement a way of opening and closing the mobile view.

Here is a simple Stimulus.js controller I added. The class names are hard-coded, but it should not be too hard to extend or customize for your needs.

import { Controller } from "stimulus";

export default class extends Controller {
static targets = ["element"];

toggle(event) {
this.elementTargets.forEach((element) => {
if (element.classList.contains("hidden")) {
} else {

To use on the TailwindUI navigation bar:

  1. On the main nav item, add the controller: data-controller="toggle"
  2. On the button, add the action: data-action="click->toggle#toggle"
  3. On each element you need to toggle add the target: data-target="toggle.element"

The ability to target more than one element (see this.elementTargets vs. this.elementTarget above) is one of my favorite features in Stimulus.js. It keeps your code, logic, and implementation very clean.