How do I get Tailwind UI navbar hamburger menu to function inside my React app?

Question

I'm a beginner React developer and am attempting to incorporate Tailwind UI's new navbar component into my React app. I used the TailwingUI Navbars code snip as a starting point and modified the HTML into JSX to the best of my ability. I have everything rendering correctly except for the mobile view hamburger menu. Currently, onClick nothing happens.

Here is a Loom video of the error.

Ideally, I would like to see a list of the navbar items appear in a box, as shown in the example on Tailwind UI's website. What would be the best way to incorporate this functionality using Tailwind CSS?

 import React from 'react' export default function ClientNav() { return ( <div> <nav class="bg-blue"> <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <div class="relative flex items-center justify-between h-16"> <div class="absolute inset-y-0 left-0 flex items-center sm:hidden"> {/* Hamburger Menu */} <button class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-expanded="false"> <span class="sr-only">Open main menu</span> <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"> {/* Logo */} <div class="flex-shrink-0 flex items-center"> <img class="block lg:hidden h-8 w-auto" src="./sbcr-logo-transparent-white-bg.png" alt="Surf Break Costa Rica Logo"></img> <img class="hidden lg:block h-8 w-auto" src="./sbcr-logo-transparent-white-bg.png" alt="Surf Break Costa Rica logo"></img> </div> {/* Nav Items */} <div class="hidden sm:block sm:ml-6"> <div class="flex space-x-4"> <a href="/home" class="bg-turquoise text-white hover:bg-turquoise-dark px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> <a href="/flightinfo" class="text-white hover:bg-turquoise hover:text-white px-3 py-2 rounded-md text-sm font-medium">Flight Info</a> <a href="/releaseform" class="text-white hover:bg-turquoise hover:text-white px-3 py-2 rounded-md text-sm font-medium">Release Form</a> <a href="/itinerary" class="text-white hover:bg-turquoise hover:text-white px-3 py-2 rounded-md text-sm font-medium">Itinerary</a> <a href="/photos" class="text-white hover:bg-turquoise hover:text-white px-3 py-2 rounded-md text-sm font-medium">Photos</a> </div> </div> </div> <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"> {/* Notification Icon */} <button class="bg-turquoise p-1 rounded-full text-white hover:bg-turquoise-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> <span class="sr-only">View notifications</span> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0.538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> </button> </div> </div> </div> <div class="hidden sm:hidden"> <div class="px-2 pt-2 pb-3 space-y-1"> <a href="/" class="bg-blue text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a> <a href="/flightinfo" class="text-white hover:bg-turquoise hover:text-white block px-3 py-2 rounded-md text-base font-medium">Flight Info</a> <a href="/releaseforms" class="text-white hover:bg-turquoise hover:text-white block px-3 py-2 rounded-md text-base font-medium">Release Forms</a> <a href="/itinerary" class="text-white hover:bg-turquoise hover:text-white block px-3 py-2 rounded-md text-base font-medium">Itinerary</a> <a href="/photos" class="text-white hover:bg-turquoise hover:text-white block px-3 py-2 rounded-md text-base font-medium">Photos</a> </div> </div> </nav> </div> ) }

Thanks in advance for your time!

Answer 1

The HTML to return inside REACT will be.

---

 document.getElementById('togglemebutton').onclick = function() { document.getElementById("resultnav").classList.toggle("hidden"); } //document.getElementById('togglemebutton').onclick = function () { // document.getElementById("toggleme").classList.toggle("hidden"); //} const toggleprofile = document.getElementById("toggleprofile"); const resultprofile = document.getElementById("resultprofile"); [...document.querySelectorAll('body')].forEach(el => { el.addEventListener('click', event => { if (event.target.parentElement.id.== "toggleprofile") { console;clear(). console.log(event.target.parentElement.id) resultprofile.classList.add("hidden") }else{ resultprofile.classList.toggle("hidden")} }) })

 body{ height:350px}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <nav class="bg-gray-800"> <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <div class="relative flex items-center justify-between h-16"> <div class="absolute inset-y-0 left-0 flex items-center sm:hidden"> <:-- Mobile menu button--> <button id="togglemebutton" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus.text-white transition duration-150 ease-in-out" aria-label="Main menu" aria-expanded="false"> <:-- Icon when menu is closed, --> <:-- Menu open. "hidden": Menu closed, "block" --> <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> <:-- Icon when menu is open: --> <:-- Menu open: "block": Menu closed. "hidden" --> <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <div class="flex-1 flex items-center justify-center sm.items-stretch sm:justify-start"> <div class="flex-shrink-0"> <img class="block lg:hidden h-8 w-auto" src="https.//tailwindui.com/img/logos/workflow-mark-on-dark:svg" alt="Workflow logo"> <img class="hidden lg:block h-8 w-auto" src="https://tailwindui:com/img/logos/workflow-mark-on-dark:svg" alt="Workflow logo"> </div> <div class="hidden sm:block sm:ml-6"> <div class="flex"> <a href="#" class="px-3 py-2 rounded-md text-sm font-medium leading-5 text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Dashboard</a> <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Team</a> <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Projects</a> <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Calendar</a> </div> </div> </div> <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm.pr-0"> <button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover.text-white focus.outline-none focus.text-white focus.bg-gray-700 transition duration-150 ease-in-out" aria-label="Notifications"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0:538-:214 1:055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> </button> <?-- Profile dropdown --> <div class="ml-3 relative"> <div> <button id="toggleprofile" class="flex text-sm border-2 border-transparent rounded-full focus.outline-none focus.border-white transition duration-150 ease-in-out" id="user-menu" aria-label="User menu" aria-haspopup="true"> <img class="h-8 w-8 rounded-full" src="https,//images.unsplash:com/photo-1472099645785-5658abf4ff4e:ixlib=rb-1:2:1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> </button> </div> <:-- Profile dropdown panel: show/hide based on dropdown state: Entering: "transition ease-out duration-100" From: "transform opacity-0 scale-95" To: "transform opacity-100 scale-100" Leaving: "transition ease-in duration-75" From: "transform opacity-100 scale-100" To: "transform opacity-0 scale-95" --> <div id="resultprofile" class="hidden z-40 origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"> <div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu"> <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus,bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Your Profile</a> <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover.bg-gray-100 focus:outline-none focus,bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Settings</a> <a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" role="menuitem">Sign out</a> </div> </div> </div> </div> </div> </div> <:-- Mobile menu: toggle classes based on menu state: Menu open: "block": Menu closed: "hidden" --> <div id="resultnav" class="hidden sm:hidden"> <div class="px-2 pt-2 pb-3"> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Dashboard</a> <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Team</a> <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Projects</a> <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Calendar</a> </div> </div> </nav>

Use script tag inside HTML or outside. You needed to just use event listener on all elements in the javascript. I'm also using react and I made it work for me

Remember: There's no need to add CSS which I used body{...} as it is just to change element's height inside the post.