One important skill for React users is to be able to create a navigation bar (navbar). You have multiple options for doing so, especially if you pair React with another free and open source CSS framework, such as Bootstrap or Tailwind CSS.
Bootstrap was developed as a framework to provide DRYer code and consistency across internal developer tools. Before this, projects relied on multiple libraries, which could lead to cluttered codebases. Bootstrap contains CSS and, optionally, JavaScript-based design templates for typography, forms, buttons, navigation, and other UI components. Numerous web applications rely on Bootstrap, including Apple Maps Connect.
Tailwind CSS scans HTML files, JavaScript components (and other templates for class names), generates the corresponding styles, and writes them to a static CSS file for easy readability.
In this tutorial, you're going to create a list navbar in React using Bootstrap and Tailwind.
Here’s what you’ll need for this project:
- Some knowledge of CSS
- Some knowledge of React
- npm installed on your local machine
- Head to Bootstrap’s Getting Started page.
- Scroll down to Package managers for npm installation since this is a React project.
- Go to the Tailwind CSS documentation.
- Install Tailwind CSS using npm or yarn (check the docs for instructions):
- Create a file called
tailwind.config.jsonce the package is installed:
- Configure your template paths. You can check examples in the documentation.
- Add the Tailwind directives to your main CSS file, usually the
index.cssfile. These include the following:
- Start the Tailwind CLI build process:
- Wait to receive the
Donemessage in your terminal.
If you prefer, you can follow along with this GitHub repo.
Otherwise, create a React app if you haven’t already. In your terminal, run this:
While you can create your navbar from scratch using the Bootstrap docs, Bootstrap provides a library of free UI components, including navbars with a navbar toggle option. Additionally, you can leverage the power of React hooks or custom hooks to enhance the functionality of the navbar.
- Head to the Getting started section.
- Go to the Navbar section and select a component. Use the Copy button on the top-right corner to copy it.
Below is the one used in the repository:
- Go to your React application and create a
src/Navigationfolder. - Create a
src/Navigation/Navbar.jsfile inside thesrc/Navigationdirectory. - Create an empty navbar function in your file:
Paste in the Bootstrap CSS boilerplate navigation menu, as well as the navbar contents you already copied over:
- Head to your
App.jsand importsrc/Navigation/Navbar.js.
Be sure to also import bootstrap/dist/css/bootstrap.min.css since this code file contains the configuration for Bootstrap React CSS.
You’ve now successfully built a navigation bar using Bootstrap.
- Run
npm startto see it in action.
You can also head back to the Bootstrap docs to customize it further.
If you’d rather follow along, check the GitHub repo.
Otherwise, create a React app, if you haven’t already. Go to your terminal and use this command:
While you can create a navbar using the Tailwind CSS docs, Tailwind provides a library of free UI components, including navbars. (There are plenty of other free Tailwind UI component libraries available, including daisyUI).
- Go to Tailwind UI, then to the Navbars section. Pick one navbar, click the HTML button on the top right, and select React from the drop-down menu.
- Find the toggle with an eye (Preview) and two code block arrows (Code) next to the drop-down menu. Switch the toggle to the arrows (Code), and you’ll see the boilerplate code for your Tailwind CSS navbar. Copy it.
Here’s the one used in the example repository:
- Go to your React application and create a
src/Navigationfolder. - Create a
src/Navigation/Navbar.jsfile in thesrc/Navigationdirectory. - Paste the Tailwind CSS boilerplate navigation menu and the navigation menu you copied over before in your file. Look for other Tailwind imports at the top of the file and install their packages accordingly. The function name may be something generic, like
Example, but rename it to something more specific, likeNavbar. - Go to your
App.jsand importsrc/Navigation/Navbar.js.
Be sure to also import index.css since it contains the configuration for Tailwind CSS:
- Run
npm start. Your navbar should look like this:
- Check the Tailwind CSS docs if you want to customize it further. You can add elements into a CSS class in-line to your tag’s
classNameor, for example, add colors to yourtailwind.config.jsfile.
You've now seen two easy ways to create a navbar in your React app. Bootstrap and Tailwind CSS are both excellent choices for quickly styling an application while allowing for more personalization.
The free components are great for quick-start applications, but be sure to check each framework's documentation and libraries to see how you can use props effectively to enhance the functionality and appearance of your navbar contents
If you’re looking to ship your project faster or if you are building on a larger scale, you might want to check us (Retool) out. We provide a complete set of building blocks straight out of the box. You can assemble an app in minutes by dragging and dropping from Retool's pre-built components and quickly connect to backend databases and APIs. We think that Retool is great for building internal tools, admin panels, and CRUD interfaces so you can quickly automate the manual and tedious tasks saving you time for those more bespoke React projects. For more info, check out the docs.
Reader
