Using navigation components

Once we have an idea of how the layout of our application is going to look and work, we can start to think about the navigation. This is an important piece of our UI because it’s how the user gets around the application, and it will be used frequently. In this section, we’ll learn about two of the navigational components offered by Material UI.

Navigating with drawers

The Drawer component, just like a physical drawer, slides open to reveal content that is easily accessed. When we’re finished, the drawer closes again. This works well for navigation because it stays out of the way, allowing more space on the screen for the active task that the user is engaged with. Let’s look at an example, starting with the App component:

<BrowserRouter>
  <Button onClick={toggleDrawer}>Open Nav</Button>
  <section>
    <Routes>
      <Route path="/first" element={<First />} />
 ...