Application Shell - Client-Side Interactivity

Learn to implement client-side interactivity using a bit of javascript.

We will need to use some minimal Javascript in our application to make the popup menu work. There are a lot of Javascript libraries, but we need something that is light and does not require a full framework setup.

AlpineJS

Tailwind UI recommends AlpineJS for server-rendered websites like the one we are building, so we will go with that.

We will also remove the search bar and the notification bell icon from the application shell we chose from Tailwind UI, as we won’t be using them for now.

To start, we will add AlpineJS via a CDN and add some custom Javascript to control the user popup menu:

Get hands-on with 1200+ tech skills courses.