Tailwind on Rails #139 Advanced Navbar Dropdown Menu

10/08/2023 (8 months ago)

Previously we created a responsive layout with a Sidebar.
On a small screen we will hide the sidebar and display a dropdown mobile-only menu instead.

To make the user experience seamless, it will follow a few common practices:

  • close dropdown by clicking Escape
  • close dropdown if screen size is more than sm (768 px)
  • hide main area and display ONLY dropdown on page
  • blur main
  • disable scrolling of body content

I also think that this lesson is a GREAT resource on understanding how StimulusJS works.

Episode source code: https://github.com/corsego/138-tailwind-layout/commit/46658fd185b55e14140faa56a9671ba9f02c124a
Based on this blogpost: https://blog.corsego.com/tailwindcss-dropdown

0:00 Working demo
1:07 Mobile dropdown menu works on other websites
2:36 Dropdow menu HTML and CSS
7:05 Stimuls Navbar controller to open/close dropdown
10:28 Auto close dropdown menu on big screen
13:00 Blur background when dropdown is open
14:16 Disable background scroll
15:05 Hide main content when dropdown open
15:52 Close menu with keyboard
16:54 Dropdown menu style options
18:02 Steal dropdown style from Tailwind wbsite

Sign in to join the conversation