Tailwind CSS Menus - Notus JS
Simple vertical navigations, that can go anywhere on your page made only with Tailwind CSS classes and styles.
Tailwind Static Menu Examples
Links
Use these navigation examples to create beautiful websites.
<div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
blueGray Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
red Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
orange Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
amber Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
emerald Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
teal Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
lightBlue Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
indigo Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
purple Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
pink Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>Icons Links
If you want, you can leave the text, and only give your user an ituitive icon.
<div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
blueGray Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
red Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
orange Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
amber Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
emerald Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
teal Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
lightBlue Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
indigo Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
purple Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
pink Menu
</a>
<button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button">
<span class="block relative w-6 h-px rounded-sm bg-white"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
<span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span>
</button>
</div>
<div class="flex lg:flex-grow items-center" id="example-navbar-info">
<ul class="flex flex-col lg:flex-row list-none ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>Tailwind Dynamic Responsive Menu Examples
Links
Use these navigation examples to create beautiful and dynamic websites.
<div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
blueGray Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-blueGray')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-blueGray">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
red Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-red')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-red">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
orange Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-orange')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-orange">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
amber Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-amber')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-amber">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
emerald Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-emerald')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-emerald">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
teal Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-teal')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-teal">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
lightBlue Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-lightBlue')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-lightBlue">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
indigo Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-indigo')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-indigo">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
purple Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-purple')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-purple">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
pink Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-pink')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-pink">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script>Icons Links
If you want, you can leave the text, and only give your user an ituitive icon.
<div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blueGray-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
blueGray Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-blueGray')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-blueGray">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-red-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
red Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-red')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-red">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-orange-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
orange Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-orange')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-orange">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-amber-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
amber Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-amber')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-amber">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-emerald-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
emerald Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-emerald')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-emerald">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-teal-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
teal Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-teal')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-teal">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-lightBlue-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
lightBlue Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-lightBlue')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-lightBlue">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-indigo-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
indigo Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-indigo')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-indigo">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-purple-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
purple Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-purple')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-purple">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script><div class="flex flex-wrap py-2">
<div class="w-full px-4">
<nav class="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-pink-500 rounded">
<div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
<div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
<a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" href="#pablo">
pink Starter Menu
</a>
<button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" onclick="toggleNavbar('link-collapse-pink')">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="lg:flex lg:flex-grow items-center hidden" id="link-collapse-pink">
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-globe text-lg leading-lg text-white opacity-75"></i> Discover
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-user text-lg leading-lg text-white opacity-75"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo">
<i class="fas fa-cog text-lg leading-lg text-white opacity-75"></i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script>
function toggleNavbar(collapseID){
document.getElementById(collapseID).classList.toggle("hidden");
document.getElementById(collapseID).classList.toggle("flex");
}
</script>