This content originally appeared on Bits and Pieces - Medium and was authored by Soheb M
Tailwind is a utility-first CSS framework which means it provides you with the CSS classes to write custom styles without writing any custom CSS.
Prerequisites
- The latest version of Tailwind CSS installed
- Knowledge of Flexbox — CSS
- Knowledge of DOM events / JavaScript
If you refer to the code snippet mentioned above, you start with the HTML5 nav element, you'll know the importance of the semantic, this is the first part of the code snippet, you are using Tailwind CSS class flex to make the nav element a Flexbox container.
- justify-between is the same as justify-content: space-between
- items-center is same as align-items: center
- shadow-lg is used to apply drop shadow filters to an element
Next, you have to divide the Navbar into two different parts, first part is for the Logo and Hamburger menu which is only visible on small devices. The second part is for the navigation links which are not visible on small devices. In small devices, we have a Drawer component that draws from the left by clicking on the hamburger menu button.
If you follow the code from above, there is a div element that has a class of pl-8, md:pl-16, space-x-8 and flex let me explain
- pl-8 adds a padding of 2rem on the left.
- md:pl-16 adds a padding of 4rem on the left, size medium or above.
- space-x-8 adds margin-left of 2rem between the child elements (in our case between Logo and Hamburger Menu icon).
- flex as we all know makes our element Flexbox container.
Inside the div tag, you see a Button element that has an SVG icon of the Hamburger menu which is visible only on small screen devices. Then I have used a Link tag (that’s from Next.js, which is a href or rather <a /> tag of HTML, and inside that, an Image tag(that’s from Next.js similar to img tag of HTML) of our Logo. This completes the first part of our Navbar.
In the second part, I have used navigation links and it is only visible on medium and above screen sizes. Let me explain the CSS classes:
- pr-8 adds padding-right of 2rem.
- md:pr-16 adds padding-right of 4rem on the right, screen size medium and above
- hidden adds display: none to an element. Since Tailwind uses a mobile-first breakpoint system, similar to other CSS frameworks.
- md:block add display: block to an element on medium and above devices. (In simple words, the Navigation Links are hidden by default and are visible if the screen size is medium and above.
Classes used in the Links tag are self-explanatory, you may also refer to Tailwind docs for more information.
This completes the Navbar for medium and above screen sizes. Now you have to create a Drawer component for Mobile devices, follow the code snippet mentioned below:
For the Drawer component, I have used <aside> HTML element for semantic. The CSS classes are self-explanatory. However, let’s look at a few of them which I think is important:
- z-10 adds z-index of 10.
- w-3/4 adds width: 75% to an element.
- h-screen adds height: 100vw to an element.
- -translate-x-full adds a negative value which hides our Drawer by default.
Phew! so far you should have completed the HTML and CSS parts of the Navbar, now you just have to add the functionality to open and close the Drawer on small screen sizes.
I have used the useState hook which lets you use state without writing a class component. Follow the code snippet below:
Before using useState, you will have to import it from the React module. Set the state of the drawer by default to be false and then you create a function in the Navbar component to toggle the state. On the button, add an onClick function to change the state of the Navbar.
<button className=’visible md:hidden’ onClick={() => {setOpenDrawer(true)}}>To manipulate the Drawer component, you should import the Drawer component into the Navbar component and pass the state and toggle function as props to it.
<Drawer openDrawer={openDrawer} toggle={toggle} />In the Drawer component, destructure the state and toggle props that you have used from the Navbar component like the code mentioned below:
export default function Drawer({ openDrawer, toggle }) {}Inside the aside element of the Drawer component, set the CSS class as per the state if it is true then translate it to 0 (which means the value is not negative, and the Drawer slides from the left). If the state is false, set it to
-translate-x-full that translate to a negative value and the Drawer closes.
${openDrawer === true ? ‘translate-x-0 transform transsition duration-500 ease-in-out’ : ‘-translate-x-full transform transsition duration-500 ease-in-out’ }You will also have to add a toggle function to close the Drawer which is as follow:
<button className=’p-4 self-end’ onClick={toggle}>And that’s it, you are ready with a responsive Navbar using Tailwind without the hassle of writing any custom CSS.
Note: In case you are not using any image for a Logo you may have to give appropriate height to your Navbar.
Important: Heroicons are used for the Hamburger menu icon and the close drawer button.
Github for the repo, if you are planning to use Tailwind and Next.js.
Build component-driven. It’s better, faster, and more scalable.
Forget about monolithic apps, start building component-driven software. Build better software from independent components and compose them into infinite features and apps.
OSS Tools like Bit offer a great developer experience for building component-driven. Start small and scale with many apps, design systems or even Micro Frontends. Give it a try →
Learn more
- Building a React Component Library — The Right Way
- Microservices are Dead — Long Live Miniservices
- 7 Tools for Faster Frontend Development in 2022
How I Created a Responsive Navbar using Tailwind CSS was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Soheb M
Soheb M | Sciencx (2022-01-28T09:14:51+00:00) How I Created a Responsive Navbar using Tailwind CSS. Retrieved from https://www.scien.cx/2022/01/28/how-i-created-a-responsive-navbar-using-tailwind-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.