A Guide to Creating a Great Custom Tailwind Sidebar

1. CSS SIDEBAR TAILWIND 04 Jan 2024 10 min read A Guide to Creating a Great Custom Tailwind Sidebar Yash Poojari

2. Get ready to learn how to create a dynamic and adaptable tailwind sidebar layout using the powerful combination of Tailwind CSS and React JS. This article will guide you step by step through the process of Tailwind Sidebar Navigation, ensuring you have all the tools you need to build a responsive and customizable sidebar for your web applications. So, let’s dive in and unlock the potential of these two incredible frameworks! A sidebar is an essential component in web design that provides easy navigation and access to important information. In this article, you will learn how to create a sidebar that adapts to different screen sizes, includes icons for visual representation, supports route highlighting, and can be customized to match your desired design. Whether you are a web developer, UI/UX designer, startup founder, freelance coder, or coding bootcamp student, this tutorial will provide valuable insights. We also provide practical examples to enhance your skills in creating intuitive and visually appealing sidebars for your projects. So, let’s dive in and start building our Tailwind CSS sidebar! What is a Tailwind CSS Sidebar? Tailwind CSS is a highly customizable utility-first CSS framework allowing developers to build modern and responsive user interfaces rapidly. It provides a set of pre-defined utility classes that can be combined to create complex layouts and styles without the need to write custom CSS. A sidebar, on the other hand, is a vertical panel we commonly place on the left or right side of a website layout. It typically contains navigation links, supplementary information, or additional controls. Sidebars in web design improve user experience by providing easy access to important sections of a website or application. When combined with Tailwind CSS, creating a responsive sidebar becomes even easier. With its extensive set of utility classes and responsive design capabilities, Tailwind CSS allows us to build sidebars that adapt to different screen sizes, ensuring a seamless experience for users across devices. Setting up the Project To start creating a Tailwind CSS sidebar with React JS, we first need to set up our project structure. We will use React JS, a framework that provides server-side rendering and other useful features for building React applications. In this project, we will be using React Icons to add different icons to our sidebar to improve the

3. visuals of our design. First, create a new React JS project and a Components folder by running the following commands in the terminal: npx create-react-app my-sidebar-project cd my-sidebar-project mkdir components mkdir components/Layout Also, we need react-icons installed: npm install react-icons --save That’s it; you have successfully set up the project structure for our Tailwind Sidebar Layout. Now, let’s move on to creating the sidebar component itself. Creating the Sidebar Component In this section, we will create the Tailwind CSS sidebar component using functional components and React Hooks. The Tailwind CSS sidebar component will receive two props: show and setter, which will control the visibility of the sidebar. Inside the Layout folder, create a new file called Sidebar.js. import React from "react"; import { SlHome } from "react-icons/sl"; import { BsInfoSquare, BsEnvelopeAt } from "react-icons/bs"; import { BsCart4 } from "react-icons/bs"; import MenuItem from "./MenuItem"; export default function Sidebar({ show, setter }) { const ModalOverlay = () => ( <div className={`flex md:hidden fixed top-0 right-0 bottom-0 left-0 bg-black/50 z-30`} onClick={() => { setter((oldVal) => !oldVal); }} /> ); return ( <> <div className={`flex bg-blue-800 w-[250px] transition-[margin-left] ease-in-out duration-500 fixed md:static top-0 bottom-0 left-0 z-40 pr-5 ${ show ? " ml-0" : " ml-[-250px] md:ml-0" }`} >

4. <div className="flex flex-col"> <MenuItem setter={setter} name="Home" route="/" icon={<SlHome />} /> <MenuItem setter={setter} name="Products" route="/products" icon={<BsCart4 />} /> <MenuItem setter={setter} name="About Us" route="/about" icon={<BsInfoSquare />} /> <MenuItem setter={setter} name="Contact" route="/contact" icon={<BsEnvelopeAt />} /> </div> </div> {show ? <ModalOverlay /> : <></>} </> ); } The Sidebar component is a functional component that takes in two props, show and setter. The show prop controls whether the sidebar is visible or not, while the setter prop is a function that updates the show prop. We use uselocation from react-router-dom to get the currently displayed route inside the Sidebar component. This allows us to highlight the corresponding menu item in the sidebar. The main structure of the sidebar is wrapped in a div element with a set of Tailwind CSS classes. The basic styling of the sidebar is defined by the flex bg-blue-800 w-[250px] transition- [margin-left] ease-in-out duration-500 fixed md:static top-0 bottom-0 left-0 z-40 pr-5 class combination. To display the items on the sidebar, we are using MenuItem as a component. We will write this component in the next section. To toggle the visibility of the sidebar, we pass the setter function to each MenuItem component and call it on click. This updates the show prop and triggers a re-render of the Sidebar component. Before jumping to the MenuItem component, let’s create a mobile menu for smaller screens. Implementing the Mobile Menu Bar Component

5. The mobile menu bar component displays only on smaller screens with limited space. It provides an alternative way to open and close the sidebar, along with other useful elements such as a company logo and login button. Let’s create another file MenuBarMobile.js, inside of the Layout folder. import React from "react"; import { FiMenu as Icon } from "react-icons/fi"; export default function MenuBarMobile({ setter }) { return ( <nav className="md:hidden z-20 fixed top-0 left-0 right-0 h-[60px] bg-black flex [&>*]:my-auto px-2"> <button className="text-4xl flex text-white" onClick={() => { setter((oldVal) => !oldVal); }} > <Icon /> </button> </nav> ); } The MenuBarMobile React component is designed for mobile navigation, featuring a fixed black bar at the top of the viewport with a menu icon. The navigation bar has a sleek appearance with a black background and a height of 60 pixels, ensuring a compact layout. The menu icon, sourced from the react-icons, is styled with a large font size and white text color. The fixed positioning and z-index of 20 ensure the navigation bar remains visible at the top of the screen, even during scrolling. The dynamic functionality is achieved through the setter prop, allowing the menu’s display to be toggled dynamically when the button is clicked. This component provides a straightforward and visually appealing mobile navigation solution focusing on functionality and style. Now that we have implemented both the Sidebar and MenuBarMobile components let’s move on to building the Layout component. Building the Layout Component The Layout component brings together the Sidebar and MenuBarMobile components, along with the page’s main content. It also sets a title to the webpage. You can customize the title further according to the usecase. Inside the Layout folder, create another file called Layout.js.

6. import React, { useState } from "react"; import Sidebar from "./Sidebar"; import MenuBarMobile from "./MenuBarMobile"; export default function Layout({ children }) { const [showSidebar, setShowSidebar] = useState(false); return ( <> <title>My Sidebar Project</title> <div className="min-h-screen"> <div className="flex"> <MenuBarMobile setter={setShowSidebar} /> <Sidebar show={showSidebar} setter={setShowSidebar} /> <div className="flex flex-col flex-grow w-screen md:w-full min-h-screen"> {children} </div> </div> </div> </> ); } The Layout component is defined as a functional component that takes in children as a prop. Inside the Layout component, we use the useState hook to manage the state of the sidebar visibility. The showSidebar state variable keeps track of whether the tailwind sidebar is currently visible or hidden. The main structure of the layout is wrapped in a div element with a set of Tailwind CSS classes. The flex class ensures that the layout components are in rows. Within the layout, we have three sections: The MenuBarMobile component The Sidebar component Placeholder for the main content. The MenuBarMobile component is placed at the top-left corner of the screen and triggers the toggleSidebar function in response to user interaction. The Sidebar component is hidden by default and becomes visible when triggered by user interaction with the MenuBarMobile component. The main content is wrapped in a div element with the flex flex-col flex-grow class combination, ensuring it takes up the remaining space in the layout. In the next section, we will create the MenuItem component to complete our sidebar and improve its looks and feel.

7. Creating the MenuItem Component We will make the MenuItem component, which we first used in our Sidebar.js file. Create a file named MenuItem.js and write the following code in it. import { Link, useLocation } from "react-router-dom"; const MenuItem = ({ icon, name, route, setter }) => { const router = useLocation(); return ( <Link to={route} onClick={() => { setter((oldVal) => !oldVal); }} className={`flex gap-1 [&>*]:my-auto text-md pl-6 py-3 border-b-[1px] border-b- white/10 ${ router.pathname === route ? "text-white" : "text-white/50 hover:text-white" }`} > <div className="text-xl flex [&>*]:mx-auto w-[30px]">{icon}</div> <div>{name}</div> </Link> ); }; export default MenuItem; In this component, we use react-router-dom to check which route we are currently on. This helps us display the active route to the user so that it is easier for the user to figure out where they are currently on the website. The main function of this component is to navigate the user to different pages; for that, we can utilize Link from react-router-dom to easily and quickly navigate the user to the desired pages. Making All of it Responsive The Sidebar component demonstrates a thoughtful approach to responsive design, ensuring an optimal user experience across various screen sizes. The responsive design elements are evident in several aspects of the component. We carefully consider several key factors to ensure the responsiveness of our designs. These principles are not limited to a specific design; rather, they can be applied universally to all our creations.

8. Responsive Principles Dynamic Width: On larger screens, the sidebar’s width is set to a fixed value of 250 pixels (w-[250px]). This provides enough space for the menu items and maintains a consistent layout. However, the width dynamically adjusts on smaller screens to fill the entire screen (w- screen), accommodating limited space and preventing horizontal overflow. Transition and Animation: The use of Tailwind CSS classes such as transition-[margin-left] and ease-in-out duration-500 introduces a smooth transition effect when the sidebar expands or collapses. This animation enhances the user experience, providing a visually pleasing and polished interaction. Conditional Styling for Visibility: The sidebar’s visibility is controlled through conditional styling. The show prop determines whether the sidebar should be visible or hidden. When visible (show is true), the sidebar is positioned at the left edge of the screen (ml-0), and when hidden (show is false), it is positioned off-screen (ml-[-250px]) with a transition to the left edge on larger screens (md:ml-0). Modal Overlay for Small Screens: On smaller screens (md:hidden), a modal overlay is introduced to cover the main content when the sidebar is collapsed. This overlay is semi- transparent (bg-black/50) and spans the entire screen, clearly indicating that the sidebar is in focus. Clicking on the overlay triggers the same functionality as clicking on the sidebar, toggling its visibility. Fixed and Static Positioning: Fixed positioning ensures that the sidebar remains in view even when the user scrolls on larger screens. However, on medium-sized screens and above (md:static), the sidebar becomes part of the normal document flow, adapting to the layout requirements of different screen sizes. Example in Action This is how our Tailwind Sidebar looks like:

9. To dive deep into responsive design, you can check out the Best Way to Create Responsive Design. In responsive designs, breakpoints are an important piece of information that you will be using a lot; here is a simple table to help you with the concept Breakpoint Screen Width Range Example Usage 640px and above sm sm:text-white 768px and above md md:px-4 1024px and above lg lg:flex 1280px and above xl xl:w-½ 1536px and above 2xl 2xl:py-8 Supporting Dark Mode Dark mode has become increasingly popular in modern web design as it reduces eye strain and improves visibility in low-light environments. In this section, we will demonstrate how to add dark mode support to our Tailwind CSS sidebar. Open your project’s main JavaScript file, i.e., app.js, and add the following code: import '../styles/globals.css'; import { useEffect } from 'react'; function MyApp({ Component, pageProps }) { useEffect(() => { const body = document.querySelector('body');

10. const isDarkMode = localStorage.getItem('darkMode') === 'true'; if (isDarkMode) { body.classList.add('dark'); } }, []); return <Component {...pageProps} />; } export default MyApp; In this code snippet, we import the globals.css file, which contains global CSS styles for our application. We also use the useEffect hook to apply the dark class to the body element if the user has enabled dark mode. Open your project’s styles/globals.css file (create it if it doesn’t exist) and add the following code: @tailwind base; @tailwind components; .dark { @apply bg-gray-900 text-white; } @tailwind utilities; In this CSS code snippet, we define the dark class, which sets the background color to dark gray and the text color to white. This class will be applied to the body element when dark mode is enabled. With these changes in place, you can now enable dark mode by adding or removing the “dark” class from the body element in your JavaScript or TypeScript files. Here’s an example of how to toggle dark mode using a button: <button onClick={() => document.querySelector('body').classList.toggle('dark')}>Toggle Dark Mode</button> After this, the final output will look something like this:

11. Congratulations! You have successfully implemented dark mode support for your Tailwind CSS sidebar. Here is a video tutorial for Dark Mode functionality. There are still many things that can be done to improve the user experience based on your specific use case, one of which can be a Tailwind Sticky Sidebar by using the class sticky. Summing Up… In this comprehensive guide, we have covered the process of creating a Tailwind CSS sidebar with React JS. Following the steps outlined in this tutorial, you have learned how to create a responsive and customizable sidebar that adapts to different screen sizes, includes icons for visual representation, supports route highlighting, and even supports dark mode. We started by setting up the project structure and creating the Sidebar component using functional components and React Hooks. We then implemented the MenuBarMobile component to provide a mobile-friendly navigation experience on smaller screens. The Layout component brought everything together, allowing us to set the page title dynamically. We integrated popular icon libraries like react-icons to enhance the sidebar and added icons to our menu items. We also added a collapsible navigation button for smaller screens to ensure a seamless user experience across devices. We also demonstrated how Tailwind CSS classes can adjust typography and spacing based on screen sizes, achieving a fully responsive design. Finally, we explored how to add dark mode support to our Tailwind CSS sidebar, allowing users to switch between light and dark themes. Elevate Your Sidebar Design We hope this guide has provided valuable insights and practical examples to enhance your

12. skills in creating intuitive and visually appealing sidebars using Tailwind CSS and Next.js. Remember, as you continue to develop your projects, feel free to customize and experiment with different styles and techniques to create unique and engaging user experiences. Happy coding! Are you ready to take your web development skills to new heights? If yes, then you should check PureCode.ai. PureCode.ai is a developer tool that harnesses AI to transform design images into read-to-use front-end code. It is also a marketplace that offers over 10000 AI-generated custom components and allows the application of custom themes on top of Tailwind, MUI, and CSS3. You can check out PureCode by visiting their website: PureCode.ai. Share this:     Yash Poojari More blogs

13. CSS Why You Need to Use CSS Minification for Web Performance 01 Mar 2024 12 min read CSS Top CSS Shape Generator Tools That Will Make Your Life Easier 26 Feb 2024 12 min read CSS Best CSS Background Generator Tools for Stunning Websites 26 Feb 2024 9 min read Tailwind Blogs

14. Tailwind Dropdown Tailwind Cards Tailwind Config Tailwind Buttons Tailwind Breakpoints Tailwind Grid MUI Blogs MUI Typgraphy MUI Tooltip MUI Appbar MUI Stack MUI Slider MUI Select Bootstrap Blogs Bootstrap vs MUI