In this section we will create a responsive navbar menu remix with tailwind css. We will see remix js responsive navbar with hamburger menu, navbar search bar examples with Tailwind CSS & Remix.
Install Tailwind CSS 3 in Remix with TypeScript
Example 1
Responsive navbar menu with remix dev with tailwind css.
import { useState } from "react";
import { Link } from "@remix-run/react";
export default function Index() {
const [navbar, setNavbar] = useState(false);
return (
<nav className="w-full bg-white shadow">
<div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
<div>
<div className="flex items-center justify-between py-3 md:py-5 md:block">
<Link to="/home">
<h2 className="text-2xl font-bold">Remix</h2>
</Link>
<div className="md:hidden">
<button
className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
onClick={() => setNavbar(!navbar)}
>
{navbar ? (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
)}
</button>
</div>
</div>
</div>
<div>
<div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${navbar ? "block" : "hidden"
}`}
>
<ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
<li className="font-semibold text-gray-600 hover:text-blue-600">
<Link to="/home">Home</Link>
</li>
<li className="font-semibold text-gray-600 hover:text-blue-600">
<Link to="/blog">Blog</Link>
</li>
<li className="font-semibold text-gray-600 hover:text-blue-600">
<Link to="/about">About US</Link>
</li>
<li className="font-semibold text-gray-600 hover:text-blue-600">
<Link to="/contact">Contact US</Link>
</li>
</ul>
</div>
</div>
</div>
</nav>
);
}
responsive navbar menu with remix tailwind
Example 2
Responsive navbar menu with search bar using remix js & tailwind css.
import { useState } from "react";
import { Link } from "@remix-run/react";
export default function Index() {
const [navbar, setNavbar] = useState(false);
return (
<nav className="w-full bg-white shadow">
<div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
<div>
<div className="flex items-center justify-between py-3 md:py-5 md:block">
<Link to="/home">
<h2 className="text-2xl font-bold">Remix</h2>
</Link>
<div className="md:hidden">
<button
className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
onClick={() => setNavbar(!navbar)}
>
{navbar ? (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
)}
</button>
</div>
</div>
</div>
<div>
<div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
navbar ? "block" : "hidden"
}`}
>
<div className="items-center space-y-4 md:space-y-0 lg:space-x-8 lg:flex">
<ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
<li className="font-semibold text-gray-600 hover:text-blue-600">
<Link to="/home">Home</Link>
</li>
<li className="font-semibold text-gray-600 hover:text-blue-600">
<Link to="/blog">Blog</Link>
</li>
<li className="font-semibold text-gray-600 hover:text-blue-600">
<Link to="/about">About US</Link>
</li>
<li className="font-semibold text-gray-600 hover:text-blue-600">
<Link to="/contact">Contact US</Link>
</li>
</ul>
<form className="flex items-center p-2 space-x-2 border rounded-md">
<svg
xmlns="http://www.w3.org/2000/svg"
className="flex-none w-5 h-5 text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
<input
className="w-full text-gray-500 placeholder-gray-500 outline-none appearance-none sm:w-auto"
type="text"
placeholder="Search"
/>
</form>
</div>
</div>
</div>
</div>
</nav>
);
}
responsive navbar menu with remix search bar
