How to Create a Collapsible Navigation Menu Using React
A sidebar navigation menu typically consists of a vertical list of links. you could create a set of links in React using react-router-dom.
Follow these steps to create a React side navigation menu with links containing material UI icons. The links will render different pages when you click them.
Creating a React Application
If you already have aReact project, feel free to skip to the next step.
You can use the create-react-app command to get up and running with React quickly. It installs all the dependencies and configuration for you.
Run the following command to create a React project called react-sidenav.
This will create a react-sidenav folder with some files to get you started. To clean up this folder a bit, navigate to the src folder and replace the contents of App.js with this:
Creating the Navigation Component
The navigation component you will create will look like this:
It is pretty simple, but once you’re finished, you should be able to modify it to suit your needs. You can collapse the navigation component using the double arrow icon at the top:
Start by creating the non-collapsed view. Apart from the arrow icon, the sidebar contains a list of items. Each of these items has an icon and some text. Instead of repetitively creating an element for each, you can store the data for each item in an array and then iterate over it using a map function.
To demonstrate, create a new folder called lib and add a new file called navData.js.
The icons used above are from the Material UI library, so install it first using this command:
Next, create a folder calledComponentsand add a new component calledSidenav.js.
In this file, import navData from ../lib and create the skeleton for theSidenavfunction:
To create the links, modify the div element in this component to this:
This component creates a navigation link containing the icon and the link text for each iteration in the map function.
The button element holds the left arrow icon from the Material UI library. Import it at the top of the component using this code.
You might also have noticed that the class names reference a styles object. This is because this tutorial uses CSS modules.CSS modules allow you to create locally scoped styles in React. You don’t need to install or configure anything if you used create-react-app to start this project.
In the Components folder, create a new file calledsidenav.module.cssand add the following:
Setting Up React Router
The div elements returned by the map function should be links. In React, it’s possible to create links and routes using react-router-dom.
In the terminal, install react-router-dom via npm.
This command installs the latest version of react-router-dom.
In Index.js, wrap the App component with the Router.
Next, in App.js, add your routes.
Modify App.css with these styles.
Each route returns a different page depending on the URL passed to thepath props. Create a new folder called Pages and add four components — the Home, Explore, Statistics, and Settings page. Here is an example:
If you visit the /home path, you should see “Home”.
Modifying Navigation Links
The links in the sidebar should lead to the matching page when you click them. In Sidenav.js, modify the map function to use the NavLink component from react-router-dom instead of the div element.
Remember to import NavLink at the top of the file.
NavLink receives the URL path for the link through the to prop.
Up to this point, the navigation bar is open. To make it collapsible, you’re able to toggle its width by changing the CSS class when a user clicks the arrow button. You can then change the CSS class again to open it.
To achieve this toggle functionality, you need to know when the sidebar is open and closed.
For this, use the useState hook. ThisReact hookallows you to add and track the state in a functional component.
In sideNav.js, create the hook for the open state.
Initialize the open state to true, so the sidebar will always be open when you start the application.
Next, create the function that will toggle this state.
You can now use the open value to create dynamic CSS classes like this:
The CSS class names used will be determined by the open state. For example, if open is true, the outer div element will have a sidenav class name. Otherwise, the class will be sidenavClosed.
This is the same for the icon, which changes to the right arrow icon when you close the sidebar.
Remember to import it.
The sidebar component is now collapsible.
Grab the complete code from thisGitHub repositoryand try it yourself.
Styling React Components
React makes it straightforward to build a collapsible navigation component. You can use some of the tools that React provides like react-router-dom to handle routing and hooks to keep track of the collapsed state.
You can also use CSS modules to style components, although you don’t have to. Use them to create locally scoped classes that are unique and that you can shake from the bundle files if they are not in use.
Split your monolithic CSS code into small, reusable pieces with the help of CSS modules.
Don’t let someone else take over your phone number.
Not all true crime is about hacking, slashing, and gore.
I plugged random USB devices into my phone and was pleasantly surprised by how many actually worked.
The fix was buried in one tiny toggle.
Windows is great, but adding this makes it unstoppable.
