React Navigation Bar Tutorial (Slide)

React Navigation Bar Tutorial (Slide)

Browse our Teachable courses.

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>

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%);
}

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.

There is a bit more detail to this project.

You can find the source files here.

All icons were gathered from Font Awesome.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

React Navigation Bar Tutorial (Slide)