React MUI Speed Dial Navigation

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Speed Dial Navigation. A speed dial navigation is in the form of a floating action button which is used to display three to six related actions.

Speed Dial Navigation Variants:

• Basic speed dial: It is a default variant floating action button that can display related actions.
• Controlled speed dial: In a controlled speed dial, the open state of the component is controlled with the help of the open/onOpen/onClose props.
• Custom close icon: In this variant, an alternate icon is being used for the closed and open states with the help of the icon and openIcon props of the component.
• Persistent action tooltips: The SpeedDialActions tooltips can be displayed persistently to see the tooltip on touch devices without being able to long press the action button.
• Accessibility: For better accessibility, make sure to use ariaLabel and tooltipTitle props, and use keyboard keys like Esc for closing the speed dial or Space and Enter keys to trigger the selected speed dial action, etc.
• API: The APIs list is:
  • <SpeedDial />
  • <SpeedDialAction />
  • <SpeedDialIcon />

Syntax:

<SpeedDial>
    ...
</SpeedDial>

Creating React Project:

Step 1: To create a react app, install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure:

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: Below example demonstrates the React MUI basic speed dial navigation.

Javascript

import { SpeedDial, SpeedDialAction,
    SpeedDialIcon } from "@mui/material";
import * as React from "react";

import NoteAddIcon from "@mui/icons-material/NoteAdd";
import SendIcon from "@mui/icons-material/Send";
import MyLocationIcon from "@mui/icons-material/MyLocation";
import EditIcon from "@mui/icons-material/Edit";

const spdActions = [
    { icon: <NoteAddIcon />, name: "New" },
    { icon: <EditIcon />, name: "Edit" },
    { icon: <MyLocationIcon />, name: "Location" },
    { icon: <SendIcon />, name: "Send" },
];

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h2>React MUI Speed dial navigation</h2>
            </div>
            <div style={{ width: "50%" }}>
                <SpeedDial
                    ariaLabel="basic"
                    sx={{
                        position: "absolute",
                        bottom: 30,
                        right: 20
                    }}
                    icon={<SpeedDialIcon />}
                >
                    {spdActions.map((action) => (
                        <SpeedDialAction
                            key={action.name}
                            icon={action.icon}
                            tooltipTitle={action.name}
                        />
                    ))}
                </SpeedDial>
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI persistent action tooltips speed dial navigation.

Javascript

import { SpeedDial, SpeedDialAction,
    SpeedDialIcon } from "@mui/material";
import * as React from "react";

import NoteAddIcon from "@mui/icons-material/NoteAdd";
import SendIcon from "@mui/icons-material/Send";
import MyLocationIcon from "@mui/icons-material/MyLocation";
import EditIcon from "@mui/icons-material/Edit";

const spdActions = [
    { icon: <NoteAddIcon />, name: "New" },
    { icon: <EditIcon />, name: "Edit" },
    { icon: <MyLocationIcon />, name: "Location" },
    { icon: <SendIcon />, name: "Send" },
];

function App() {
    const [buttonOpen, setButtonOpen] = React.useState(false);
    const handleButtonOpen = () => setButtonOpen(true);
    const handleButtonClose = () => setButtonOpen(false);

    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h2>React MUI Speed dial navigation</h2>
            </div>
            <div style={{ width: "50%" }}>
                <SpeedDial
                    ariaLabel="basic"
                    sx={{
                        position: "absolute",
                        bottom: 30,
                        right: 20
                    }}
                    icon={<SpeedDialIcon />}
                    onClose={handleButtonClose}
                    onOpen={handleButtonOpen}
                    open={buttonOpen}
                >
                    {spdActions.map((action) => (
                        <SpeedDialAction
                            key={action.name}
                            icon={action.icon}
                            tooltipTitle={action.name}
                            tooltipOpen
                        />
                    ))}
                </SpeedDial>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-speed-dial/