Getting TailwindUI Dropdown Menu to work in PHP with Alpine.js

Using Alpine.js directives with TailwindUI dropdown menu components in PHP.

Getting TailwindUI Dropdown Menu to work in PHP with Alpine.js
Transition directive in TailwindUI with Alpine..js

For over the last two weeks, I have been working on a project developing a very simple attentive tracker for my personal use. I decided I wanted a thorough review of PHP before migrating the project over to Laravel. As usual, when I was working on the app, I used Tailwind CSS, in particularly, TailwindUI.

Since only the transition directives for all the components were written either in React, or Vue, I needed to add the directives myself. In the past, with SvelteKit, I used a custom headless UI component. For this project, it was recommended to use Alpine.js.

So the first task is obviously to create your header component with TailwindUI’s header component with the HTML source code. Since this project is still in development, I am using Tailwind's Play CDN.  For a fully maximized browser view, you will not see the hamburger menu icon. As you minimize your browser, the hidden menu will appear, but both the hamburger icon and close icon are not functioning. This is where Alpine.js’s x-data direction comes into play. You can read more about it on the TailwindUI website.

First, if you have not done it yet, add the Alpine.js script tag inside your HTML header tag:

<script defer src="[email protected]/dist/cdn.min.js"></script>

Now add the x-data directive in a div tag around the entire header component. This threw me off a bit until I formatted all the tags in VS Code:

Wrap your x-data direction in a div tag over the entire header component.

Then locate the first button element that is below the visible menu and add the x-on directive which runs the code in the DOM:

x-on directive.

Then wrap the x-show directive in a div around the mobile menu items. Also, place the template directive around the mobile menu items div. We will talk more about this shortly.

x-show directive

Like the first button element, add the x-on directive to the second button element for the mobile menu:

x-on directive.

Finally, add the x-transition directive to the x-show directive for the mobile menu.

Templating directive to avoid the "blips" in browsers.

Now, the reason we had to wrap the template directive around the mobile menu is to avoid the blip when the browser starts to load the hidden menu. You will see part of the mobile menu elements appear. The x-if directive "cloaks," or hides, this menu until it is fully loaded.

When you are done, your fully maximized browser should look like below:

Fully maximized TailwindUI header component.

With your browser minimized, you should see the hamburger icon with no mobile menu items listed.

Hamburger menu with the mobile navigation content hidden with Alpine.js's x-data directive.

Then, after clicking on the hamburger menu icon, you should see the mobile menu and the close icon. If this works, clicking on the close icon will close the menu.

Mobile navigation menu with close icon using Alpine.js's x-data directive.

I know this is all simplified, I will eventually make the entire website open source at GitHub. I am still working on this project and wanted to share how I got the TailwindUI dropdown menu to work with Alpine.js. This post is more of a note to me.

You can add me on GitHub (kevmille), Twitter (@MatsunagaKevin), or Mastodon, to learn when I will make the repository public.

I will update this post as my project progresses and make changes.

Subscribe to Kevin Matsunaga

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]