DEV Community

loading...
Cover image for React Navigation Bar Tutorial (Slide)

React Navigation Bar Tutorial (Slide)

anobjectisa profile image an-object-is-a ・2 min read

React Navigation Bar Tutorial (Slide)


Browse our Teachable courses.


React Navigation Bar Tutorial (Slide)

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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

.menu_active {
    opacity: 1;
    transform: translate(0%, 0%);
}
Enter fullscreen mode Exit fullscreen mode

nav bar desktop

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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


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)

Discussion (0)

pic
Editor guide