A navigation bar is an important tool for user navigation experience.
Examples
<nav class="bg-gray-300" x-data="{ selected: null }">
<div class="w-full px-4 sm:px-4 lg:px-4">
<div class="relative flex items-center justify-between h-16">
<div
class="absolute right-0 flex items-center px-3 py-1 text-xl border border-gray-500 rounded sm:hidden">
<!-- Mobile menu button-->
<button type="button" @click="selected == 1 ? selected = null : selected = 1"
class="inline-flex items-center justify-center text-xl text-gray-500 rounded">
<span class="sr-only">Open main menu</span>
<svg class="block w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="black"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" 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 items-center justify-start flex-1 md:justify-center sm:items-stretch">
<a class="flex items-center pt-1.5 pb-1.5 mr-4 text-xl whitespace-nowrap" href="#">
Logo
</a>
<div class="hidden md:flex md:flex-grow">
<ul class="flex items-center mb-2 w-full lg:mb-0">
<li>
<a class="block px-2 py-2 text-black" href="#">Home</a>
</li>
<li>
<a class="block px-2 py-2 text-gray-600" href="#">Link</a>
</li>
<li class="relative inline-block text-left">
<div class="relative mr-4" x-data="{ open: false }">
<a class="dropdown-toggle cursor-pointer flex items-center justify-center w-full pl-4 py-2 text-gray-600"
@click="open = ! open">
Dropdown
<!-- Heroicon name: solid/chevron-down -->
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor"
style="transform: -rotate(180deg);transition-duration: 500ms">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</a>
<div class="absolute z-50 py-2 text-left text-gray-600 bg-white border rounded shadow-md "
@click.outside="open = false" x-show="open" x-transition.duration.500>
<a class="block w-full px-4 py-1 hover:text-blue-500
whitespace-nowrap ">Action</a>
<a class="block w-full px-4 py-1 hover:text-blue-500
whitespace-nowrap ">Another action</a>
<hr class="mx-2 overflow-hidden border-gray-400">
<a class="block w-full px-4 hover:text-blue-500 py-1
whitespace-nowrap ">Something else here</a>
</div>
</div>
</li>
<li>
<a class="block py-2 text-gray-500 disabled cursor-pointer"
tabindex="-1">Disabled</a>
</li>
<form class="flex px-2 py-2 w-full">
<input class="block w-full px-4 py-2 mr-2 outline-none
placeholder-gray-500 rounded" type="search" placeholder="Search">
<button
class="inline-block px-6 py-2
text-center text-gray-900 transition-all duration-500 ease-in-out border border-gray-900 rounded shadow-md hover:shadow-xl hover:bg-gray-900 hover:text-white"
type="submit">Search</button>
</form>
</ul>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden transition-all duration-700 max-h-0" style="" x-ref="container1"
x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
<ul class="mb-2 px-4">
<li class="mb-3">
<a href="#">Home</a>
</li>
<li class="mb-3">
<a href="#">Link</a>
</li>
<li class="mb-3">
<div class="flex items-center" x-data="{ open: false }">
<div x-data="{ open: false }">
<span class="dark:text-blue-300 flex items-center h5 cursor-pointer text-gray-600 "
@click="open = ! open">dropdown
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor"
style="transform: -rotate(180deg);transition-duration: 500ms">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</span>
<div class="absolute z-50 py-2 left-20 text-left text-gray-600 bg-white border rounded shadow-md dark:bg-zinc-900 dark:border-zinc-900"
@click.outside="open = false" x-show="open" x-transition.duration.500ms>
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">Action</a>
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">Another
action</a>
<hr class="m-0">
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">Something
else here</a>
</div>
</div>
</div>
</li>
<li class="mb-3" disabled>
<a>Disabled</a>
</li>
<form class="flex py-2">
<input class="block w-full px-4 py-2 mr-2
placeholder-gray-500 rounded" type="search" placeholder="Search">
<button
class="inline-block px-6 py-2
text-center text-gray-900 transition-all duration-500 ease-in-out border border-gray-900 rounded shadow-md hover:shadow-xl hover:bg-gray-900 hover:text-white"
type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<nav class="bg-blue-500 rounded" x-data="{ selected: null }">
<div class="w-full px-4 sm:px-4 lg:px-4">
<div class="relative flex items-center justify-between h-16">
<div
class="absolute right-0 flex items-center px-3 py-1 text-xl border border-gray-500 rounded sm:hidden">
<!-- Mobile menu button-->
<button type="button" @click="selected == 1 ? selected = null : selected = 1"
class="inline-flex items-center justify-center text-xl text-gray-500 rounded">
<span class="sr-only">Open main menu</span>
<svg class="block w-8 h-8" xmlns="http://www.w3.org/2000/svg" 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>
<svg class="hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" 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 items-center justify-start flex-1 md:justify-center sm:items-stretch">
<a class="pt-1.5 pb-1.5 mr-4 text-xl text-white whitespace-nowrap" href="#">
Logo
</a>
<div class="hidden md:flex md:flex-grow">
<ul class="flex mb-2 ml-auto lg:mb-0">
<li>
<a class="block px-4 py-2 text-white" href="#">Home</a>
</li>
<li>
<a class="block px-4 py-2 text-gray-400" href="#">Link</a>
</li>
<li class="relative inline-block text-left">
<div class="relative mr-4" x-data="{ open: false }">
<a class="dropdown-toggle cursor-pointer flex items-center justify-center w-full pl-4 py-2 text-gray-400"
@click="open = ! open">
Dropdown
<!-- Heroicon name: solid/chevron-down -->
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor"
style="transform: -rotate(180deg);transition-duration: 500ms">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</a>
<div class="absolute z-50 py-2 text-left text-gray-600 bg-white border rounded shadow-md "
@click.outside="open = false" x-show="open" x-transition.duration.500>
<a class="block hover:text-blue-500 w-full px-4 py-1
whitespace-nowrap ">Action</a>
<a class="block hover:text-blue-500 w-full px-4 py-1
whitespace-nowrap ">Another action</a>
<hr class="mx-2 overflow-hidden border-gray-400">
<a class="block hover:text-blue-500 w-full px-4 py-1
whitespace-nowrap ">Something else here</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden transition-all duration-700 max-h-0" style="" x-ref="container1"
x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
<ul class="mb-2 px-4 p-4">
<li class="mb-3 text-white">
<a href="#">Home</a>
</li>
<li class="mb-3 text-[#ffffff8c]">
<a href="#">Link</a>
</li>
<li class="mb-3 text-[#ffffff8c]">
<div class="flex items-center" x-data="{ open: false }">
<div x-data="{ open: false }">
<span class="dark:text-blue-300 flex items-center h5 cursor-pointer"
@click="open = ! open">dropdown
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor"
style="transform: -rotate(180deg);transition-duration: 500ms">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</span>
<div class="absolute z-50 py-2 right-0 bottom-5 text-left text-gray-600 bg-white border rounded shadow-md dark:bg-zinc-900 dark:border-zinc-900"
@click.outside="open = false" x-show="open" x-transition.duration.500ms>
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">Action</a>
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">Another
action</a>
<hr class="m-0">
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">Something
else here</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<nav class="bg-red-500 rounded" x-data="{ selected: null }">
<div class="w-full px-4 sm:px-3 lg:px-4">
<div class="relative flex items-center justify-between h-16">
<div
class="absolute right-0 flex px-3 py-1 text-xl border border-gray-500 rounded justify-items-center sm:hidden">
<!-- Mobile menu button-->
<button type="button" @click="selected == 1 ? selected = null : selected = 1"
class="inline-flex items-center justify-center text-xl text-gray-500 rounded">
<span class="sr-only">Open main menu</span>
<svg class="block w-8 h-8" xmlns="http://www.w3.org/2000/svg" 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>
<svg class="hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" 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 items-center justify-start flex-1 md:justify-center sm:items-stretch">
<a class="pt-1.5 pb-1.5 mr-4 text-xl text-white whitespace-nowrap" href="#">
Logo
</a>
<div class="hidden md:flex md:flex-grow">
<ul class="flex mb-2 ml-auto lg:mb-0">
<li>
<a class="block px-4 py-2 text-gray-400" href="#">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.2124 7.76241C14.2124 10.4062 12.0489 12.5248 9.34933 12.5248C6.6507 12.5248 4.48631 10.4062 4.48631 7.76241C4.48631 5.11865 6.6507 3 9.34933 3C12.0489 3 14.2124 5.11865 14.2124 7.76241ZM2 17.9174C2 15.47 5.38553 14.8577 9.34933 14.8577C13.3347 14.8577 16.6987 15.4911 16.6987 17.9404C16.6987 20.3877 13.3131 21 9.34933 21C5.364 21 2 20.3666 2 17.9174ZM16.1734 7.84875C16.1734 9.19506 15.7605 10.4513 15.0364 11.4948C14.9611 11.6021 15.0276 11.7468 15.1587 11.7698C15.3407 11.7995 15.5276 11.8177 15.7184 11.8216C17.6167 11.8704 19.3202 10.6736 19.7908 8.87118C20.4885 6.19676 18.4415 3.79543 15.8339 3.79543C15.5511 3.79543 15.2801 3.82418 15.0159 3.87688C14.9797 3.88454 14.9405 3.90179 14.921 3.93246C14.8955 3.97174 14.9141 4.02253 14.9396 4.05607C15.7233 5.13216 16.1734 6.44206 16.1734 7.84875ZM19.3173 13.7023C20.5932 13.9466 21.4317 14.444 21.7791 15.1694C22.0736 15.7635 22.0736 16.4534 21.7791 17.0475C21.2478 18.1705 19.5335 18.5318 18.8672 18.6247C18.7292 18.6439 18.6186 18.5289 18.6333 18.3928C18.9738 15.2805 16.2664 13.8048 15.5658 13.4656C15.5364 13.4493 15.5296 13.4263 15.5325 13.411C15.5345 13.4014 15.5472 13.3861 15.5697 13.3832C17.0854 13.3545 18.7155 13.5586 19.3173 13.7023Z"
fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a class="block px-4 py-2 text-gray-400" href="#">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.1801 4.41C17.1801 3.08 18.2601 2 19.5901 2C20.9201 2 22.0001 3.08 22.0001 4.41C22.0001 5.74 20.9201 6.82 19.5901 6.82C18.2601 6.82 17.1801 5.74 17.1801 4.41ZM13.33 14.7593L16.22 11.0303L16.18 11.0503C16.34 10.8303 16.37 10.5503 16.26 10.3003C16.151 10.0503 15.91 9.8803 15.651 9.8603C15.38 9.8303 15.111 9.9503 14.95 10.1703L12.531 13.3003L9.76 11.1203C9.59 10.9903 9.39 10.9393 9.19 10.9603C8.991 10.9903 8.811 11.0993 8.69 11.2593L5.731 15.1103L5.67 15.2003C5.5 15.5193 5.58 15.9293 5.88 16.1503C6.02 16.2403 6.17 16.3003 6.34 16.3003C6.571 16.3103 6.79 16.1893 6.93 16.0003L9.44 12.7693L12.29 14.9103L12.38 14.9693C12.7 15.1393 13.1 15.0603 13.33 14.7593ZM15.45 3.7803C15.41 4.0303 15.39 4.2803 15.39 4.5303C15.39 6.7803 17.21 8.5993 19.45 8.5993C19.7 8.5993 19.94 8.5703 20.19 8.5303V16.5993C20.19 19.9903 18.19 22.0003 14.79 22.0003H7.401C4 22.0003 2 19.9903 2 16.5993V9.2003C2 5.8003 4 3.7803 7.401 3.7803H15.45Z"
fill="#fff"></path>
</svg>
</a>
</li>
<li class="relative inline-block text-left ">
<div class="relative mr-4" x-data="{ open: false }">
<a class="flex items-center cursor-pointer w-full pl-4 py-2 text-gray-400 justify-items-center"
@click="open = ! open">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.11304 4.5H11.9051C14.3271 4.5 16.0181 6.16904 16.0181 8.56091V15.4391C16.0181 17.831 14.3271 19.5 11.9051 19.5H6.11304C3.69102 19.5 2 17.831 2 15.4391V8.56091C2 6.16904 3.69102 4.5 6.11304 4.5ZM19.958 6.87898C20.397 6.65563 20.912 6.67898 21.331 6.94294C21.75 7.20589 22 7.66274 22 8.16223V15.8384C22 16.3389 21.75 16.7947 21.331 17.0577C21.102 17.2008 20.846 17.2739 20.588 17.2739C20.373 17.2739 20.158 17.2231 19.957 17.1206L18.476 16.3734C17.928 16.0952 17.588 15.5369 17.588 14.9165V9.08305C17.588 8.46173 17.928 7.90335 18.476 7.62721L19.958 6.87898Z"
fill="#fff"></path>
</svg>
<!-- Heroicon name: solid/chevron-down -->
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor"
style="transform: -rotate(180deg);transition-duration: 500ms">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</a>
<div class="absolute z-50 py-2 text-left text-gray-600 bg-white border rounded shadow-md "
@click.outside="open = false" x-show="open" x-transition.duration.500>
<a class="block hover:text-blue-500 w-full px-4 py-1
whitespace-nowrap ">Action</a>
<a class="block hover:text-blue-500 w-full px-4 py-1
whitespace-nowrap ">Another action</a>
<hr class="mx-2 overflow-hidden border-gray-400">
<a class="block hover:text-blue-500 w-full px-4 py-1
whitespace-nowrap ">Something else here</a>
</div>
</div>
<div class="absolute left-0 block mt-1 origin-top-right top-full">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden transition-all duration-700 max-h-0" style="" x-ref="container1"
x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
<ul class="mb-2 text-white px-4 p-4">
<li class="mb-3">
<a href="#"><svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.2124 7.76241C14.2124 10.4062 12.0489 12.5248 9.34933 12.5248C6.6507 12.5248 4.48631 10.4062 4.48631 7.76241C4.48631 5.11865 6.6507 3 9.34933 3C12.0489 3 14.2124 5.11865 14.2124 7.76241ZM2 17.9174C2 15.47 5.38553 14.8577 9.34933 14.8577C13.3347 14.8577 16.6987 15.4911 16.6987 17.9404C16.6987 20.3877 13.3131 21 9.34933 21C5.364 21 2 20.3666 2 17.9174ZM16.1734 7.84875C16.1734 9.19506 15.7605 10.4513 15.0364 11.4948C14.9611 11.6021 15.0276 11.7468 15.1587 11.7698C15.3407 11.7995 15.5276 11.8177 15.7184 11.8216C17.6167 11.8704 19.3202 10.6736 19.7908 8.87118C20.4885 6.19676 18.4415 3.79543 15.8339 3.79543C15.5511 3.79543 15.2801 3.82418 15.0159 3.87688C14.9797 3.88454 14.9405 3.90179 14.921 3.93246C14.8955 3.97174 14.9141 4.02253 14.9396 4.05607C15.7233 5.13216 16.1734 6.44206 16.1734 7.84875ZM19.3173 13.7023C20.5932 13.9466 21.4317 14.444 21.7791 15.1694C22.0736 15.7635 22.0736 16.4534 21.7791 17.0475C21.2478 18.1705 19.5335 18.5318 18.8672 18.6247C18.7292 18.6439 18.6186 18.5289 18.6333 18.3928C18.9738 15.2805 16.2664 13.8048 15.5658 13.4656C15.5364 13.4493 15.5296 13.4263 15.5325 13.411C15.5345 13.4014 15.5472 13.3861 15.5697 13.3832C17.0854 13.3545 18.7155 13.5586 19.3173 13.7023Z"
fill="#fff"></path>
</svg></a>
</li>
<li class="mb-3">
<a href="#"><svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.1801 4.41C17.1801 3.08 18.2601 2 19.5901 2C20.9201 2 22.0001 3.08 22.0001 4.41C22.0001 5.74 20.9201 6.82 19.5901 6.82C18.2601 6.82 17.1801 5.74 17.1801 4.41ZM13.33 14.7593L16.22 11.0303L16.18 11.0503C16.34 10.8303 16.37 10.5503 16.26 10.3003C16.151 10.0503 15.91 9.8803 15.651 9.8603C15.38 9.8303 15.111 9.9503 14.95 10.1703L12.531 13.3003L9.76 11.1203C9.59 10.9903 9.39 10.9393 9.19 10.9603C8.991 10.9903 8.811 11.0993 8.69 11.2593L5.731 15.1103L5.67 15.2003C5.5 15.5193 5.58 15.9293 5.88 16.1503C6.02 16.2403 6.17 16.3003 6.34 16.3003C6.571 16.3103 6.79 16.1893 6.93 16.0003L9.44 12.7693L12.29 14.9103L12.38 14.9693C12.7 15.1393 13.1 15.0603 13.33 14.7593ZM15.45 3.7803C15.41 4.0303 15.39 4.2803 15.39 4.5303C15.39 6.7803 17.21 8.5993 19.45 8.5993C19.7 8.5993 19.94 8.5703 20.19 8.5303V16.5993C20.19 19.9903 18.19 22.0003 14.79 22.0003H7.401C4 22.0003 2 19.9903 2 16.5993V9.2003C2 5.8003 4 3.7803 7.401 3.7803H15.45Z"
fill="#fff"></path>
</svg></a>
</li>
<li class="mb-3">
<div class="flex items-center" x-data="{ open: false }">
<div x-data="{ open: false }">
<span class="dark:text-blue-300 flex items-center h5 cursor-pointertext-white"
@click="open = ! open"><svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.11304 4.5H11.9051C14.3271 4.5 16.0181 6.16904 16.0181 8.56091V15.4391C16.0181 17.831 14.3271 19.5 11.9051 19.5H6.11304C3.69102 19.5 2 17.831 2 15.4391V8.56091C2 6.16904 3.69102 4.5 6.11304 4.5ZM19.958 6.87898C20.397 6.65563 20.912 6.67898 21.331 6.94294C21.75 7.20589 22 7.66274 22 8.16223V15.8384C22 16.3389 21.75 16.7947 21.331 17.0577C21.102 17.2008 20.846 17.2739 20.588 17.2739C20.373 17.2739 20.158 17.2231 19.957 17.1206L18.476 16.3734C17.928 16.0952 17.588 15.5369 17.588 14.9165V9.08305C17.588 8.46173 17.928 7.90335 18.476 7.62721L19.958 6.87898Z"
fill="#fff"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor"
style="transform: -rotate(180deg);transition-duration: 500ms">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</span>
<div class="absolute z-50 py-2 left-20 bottom-10 text-left text-gray-600 bg-white border rounded shadow-md dark:bg-zinc-900 dark:border-zinc-900"
@click.outside="open = false" x-show="open" x-transition.duration.500>
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">This
Week</a>
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">This
Month</a>
<a
class="block px-4 py-1 whitespace-nowrap hover:text-blue-500 focus:text-white focus:bg-blue-500 ">This
Year</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>