How to Create and Add Material UI Accordion in React 18

Last Updated on March 4, 2024 by Digamber in React JS

React Material UI Accordion example. In front-end development, sometimes the need arises to create a list of header stacked menus where you have to display stacked navigation on top of one another.

In UI terms, we call it an accordion menu, and it is even facile to create an accordion menu in React JS.

This comprehensive post will teach you how to effortlessly create an animated vertical accordion menu bar in React application using React Material UI library and a function component.

Material-UI is a library that allows us to import, add, and utilize various UI components to create a smooth and user-friendly user interface in our React application.

In return, it offers us tons of benefits. That relatively enhances productivity and consistency and saves many front-end developers’ time.

This precious time might go in vain; if we create the UI components using CSS and JavaScript from the beginning.

Build New React Project

As promised we will start from absolute scratch, hence the first thing is to install a new React app.

There are two commands, you need to execute the commands to:

Install a new project and enter into the app folder’s root.

npx create-react-app react-blog-app

cd react-blog-app

Set Up React Material UI

It’s always easy to add any additional package in React. The only requirement is to have npm and node configured in your system:

npm i @mui/material @emotion/react @emotion/styled

Lets go ahead and install the fonts using the npm command.

npm install @fontsource/roboto --legacy-peer-deps

Open and insert the following font family in the App.css file.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

Create Function Component

To create a simple function component file, create the components/ folder inside an MaterialAccordion.js file.

Here is an archetype of a pure functional component in React.

import React from 'react'

function Accordion() {
  return (
    <div>MaterialAccordion page</div>
  )
}

export default MaterialAccordion

Implement Accordion Module in React

You have to first import all the modules that are imperative to build the accordion component. In the return method, define the Accordion component.

We created two accordion menus in React; but if you want you can create as many as dynamic accordion in React with Material UI.

Update the code in components/MaterialAccordion.js file.

import * as React from "react";
import Typography from "@mui/material/Typography";
import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import AccordionSummary from "@mui/material/AccordionSummary";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

function MaterialAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion Menu 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>Text goes here ...</Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography>Accordion Menu 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>Text goes here ...</Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

export default MaterialAccordion;

Add Accordion in Global Component

To properly integrate accordion component, you need to import and register the component into the App.js file.

import React from "react";
import MaterialAccordion from "./components/MaterialAccordion";

function App() {
  return (
    <div>
      <h2>React JS Dynamic Accordion Example</h2>
      <MaterialAccordion />
    </div>
  );
}

export default App;

Test App on Browser

The final thing is left is to test the application on the browser.

Follow the given instructions:

First run the server and then open the app on the browser.

npm start

http://localhost:3000

Conclusion

In this article, we presented certain series of steps to help you ascertain the following:

How to implement Material UI accordion in React functional component.

How to install and configure Material UI in a React JS app.