How to toggle Bootstrap navbar collapse button in React without jQuery

John Otu — Tue, 05 Nov 2019 00:41:34 +0000

Do you use Bootstrap (CSS) in React? You would've come across the advise not to add jQuery for good reason. jQuery directly manipulates the DOM so will be in conflict with React's virtual DOM which assumes it's the only Oga in charge.

But many cool Bootstrap components rely on jQuery and other Bootstrap JS plugins to work. One of such components is the navbar collapse toggle button and we can toggle it by dynamically adding (or removing) the collapse class in the nav-link's parent div.

<div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
  <a className="nav-link text-info" href="/contact">Support</a>
  <a className="nav-link text-info" href="/login">Login</a>
  <a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
</div>

This seems to be the easiest way since we are still relying on Bootstrap CSS classes rather than write our own toggle functon from scratch. Using Hooks for state management and not forgetting aria-expanded boolean, we can have a TopNav component like:

import React, { useState } from 'react';
import Logo from '../images/logo_512x512.png';

const TopNav = props => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(true);

  const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);

  return (
    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
      <a class="navbar-brand text-info font-weight-bolder" href="/">
        <img src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" />
        <span className="">Discounter</span>
      </a>
      <button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
        <a className="nav-link text-info" href="/contact">Support</a>
        <a className="nav-link text-info" href="/login">Login</a>
        <a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
      </div>
    </nav>
  );
}

export default TopNav;

Easy peasy right?

DEV Community: John Otu

How to toggle Bootstrap navbar collapse button in React without jQuery