React Navigation Bar Tutorial (Slide)
Tags: react, webdev, webdesign, ux
Published: 2021-03-26 12:33:31

### <center>React Navigation Bar Tutorial (Slide)</center>

------------

#### <center>Browse our [Teachable](http://anobject.teachable.com "Teachable") courses.</center>

------------

![React Navigation Bar Tutorial (Slide)](https://user-images.githubusercontent.com/58220766/111928813-10179400-8a8b-11eb-8154-ee571c49acd2.png)

### Let's get the skeleton for our component written up.

#### We'll be using 'react-router-dom' and font awesome for this project.

```
 <div className="nav_bar">
    <div className="icon_container menu_switch">
     
    </div>
    
    <div className={`nav_container`}>
        <div className="icon_container logo">

        </div>
        <ul className="menu_items">
           
        </ul>
    </div>
</div>
```

<br />

We have a place for our **open/close menu button**, a **logo**, and the **menu with links** to different pages.

------------

### Opening and closing our menu.

When the user clicks our menu button, we'll open or close our menu depending on the current state of the menu.

We'll have a piece of state called **showMenu** to manage this.

```
const [showMenu, setShowMenu] = useState(false);

function switch_menu() {
    setShowMenu(!showMenu);
}
```

When **showMenu** is **true** we'll attach a **CSS class** to trigger a transition.

```
<div className={`nav_container ${showMenu ? 'menu_active' : null}`}>
    <div className="icon_container logo">
        <i className="fab fa-earlybirds" />
    </div>
    <ul className="menu_items">
        <li>
            <Link to="/" onClick={switch_menu}>Home</Link>
        </li>
        <li>
            <Link to="/products" onClick={switch_menu}>Products</Link>
        </li>
        <li>
            <Link to="/about" onClick={switch_menu}>About</Link>
        </li>
    </ul>
</div>
```

**Note how we use a string template to include the menu_active class in the className of our DIV.**

We start the menu off-screen: 

```
.nav_container {
    transform: translateY(-100%);
}
```

and when we "**activate**" the menu, we simply translate it back to its default position.

```
.menu_active {
    opacity: 1;
    transform: translate(0%, 0%);
}
```

<br />

![nav bar desktop](https://user-images.githubusercontent.com/58220766/110406844-e0ab6500-8050-11eb-9c64-7e2b8430717a.gif)

<br />

The actual links come from the **Link** element in **react-router-dom**.

```
<Link to="/" onClick={switch_menu}>Home</Link>
<Link to="/products" onClick={switch_menu}>Products</Link>
<Link to="/about" onClick={switch_menu}>About</Link>
```

------------

### The mobile version.

The mobile version is real simple.

We give our navigation bar new dimenensions.

Instead of taking up an 80px bar at the top of the page, we just make it take up the entire page.

```
.nav_bar {
    width: 100vw;
    height: 100vh;
}
```

The bar is animated with the exact same logic, but instead of sliding on the **Y-axis** we slide on the **X-axis**.

![nav bar mobile](https://user-images.githubusercontent.com/58220766/111929600-3b02e780-8a8d-11eb-9f8a-1dc48e59cc3d.gif)

---------------

### There is a bit more detail to this project.

You can find the source files [here](https://github.com/an-object-is-a/react-nav-bar-01-basic "here").

All icons were gathered from [Font Awesome](https://fontawesome.com/ "Font Awesome").

---------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>React Navigation Bar Tutorial (Slide)</center>

{% youtube zLGdru79Ui0 %}