Simple vertical navigations, that can go anywhere on your page made only with Tailwind CSS classes and styles.
Static
Links
This is a simple menu only with text links.
<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>
Dynamic Responsive
Links
This is a simple menu only with text links.
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "blueGray-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "red-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "orange-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "amber-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "emerald-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "teal-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "lightBlue-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "indigo-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "purple-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</template>
<script>
export default {
name: "pink-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
Icons Links
If you want, you can leave the text, and only give your user an ituitive icon.
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "blueGray-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "red-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "orange-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "amber-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "emerald-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "teal-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "lightBlue-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "indigo-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "purple-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>
<template>
<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" v-on:click="toggleNavbar()">
<i class="fas fa-bars"></i>
</button>
</div>
<div v-bind:class="{'hidden': !menuShow, 'flex': menuShow}" class="lg:flex lg:flex-grow items-center">
<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>
</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>
</template>
<script>
export default {
name: "pink-menu",
data() {
return {
menuShow: false
}
},
methods: {
toggleNavbar: function(){
this.menuShow = !this.menuShow;
}
}
}
</script>