Skip to content
We are also using the `react-icons` library to add icons to the navigation bar.
Share
Explore
Links & Navigation
Navigation Bar
NavLink
We are using the `NavLink` component from React Router to create links.
The `NavLink` component is similar to the `Link` component, but it adds styling to the active link.
Active Link
With `NavLink`, we can pass a function to the `className` prop.
This function receives an object with a property called `isActive`.
If the link is active, `isActive` will be `true`, and we can apply the `active` class. Otherwise, we apply the `base` class.
Responsive Navbar
We need to create a responsive navigation menu that will be hidden on smaller screens and shown when the hamburger menu is clicked. We will use the `useState` hook to keep track of the menu state and the `useEffect` hook to add and remove the `hidden` from the navigation menu.
Let's start by bringing in `useState` and the "times" and "bars" icons from `react-icons/fa`:
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.