React bootstrap large custom dropdown menu in nav bar

In this lesson, you will be shown how to create a custom large drop-down menu with a navigation bar in react using bootstrap. Be sure to have Node.js installed on your machine. If you need some guidance, go to https://wecode101.com/create-react-app.

Step 1. Create react application

Run command below:

npx create-react-app react-dropdown-menu

Step 2. Install bootstrap and react-bootstrap

Run command below in the root of project:

npm install bootstrap react-bootstrap

Step 3 create css file for custom dropdown menu styling

Go to /src and create a directory called css. Create a file call custom-dropdown-menu in the css directory.

Step 4. Insert code to css file

Insert the code below to custom-dropdown-menu:

.large-dropdown-menu{
    min-width:926px;
    padding: 0;
}

.large-dropdown-menu ul{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.large-dropdown-menu ul li a{
    text-decoration: none;
}

.large-dropdown-menu ul li a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: rgba(0,0,0,.55);;
    white-space: normal;
}

.large-dropdown-menu ul li a:hover,
.large-dropdown-menu ul li a:focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

.large-dropdown-menu .dropdown-header {
    color: #428bca;
    font-size: 18px;
}

.dropdown-large {
    position: static !important;
}

.large-dropdown-menu .disabled > a,
.large-dropdown-menu .disabled > a:hover,
.large-dropdown-menu .disabled > a:focus {
    color: #999999;
}

.large-dropdown-menu .disabled > a:hover,
.large-dropdown-menu .disabled > a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    cursor: not-allowed;
}

.large-dropdown-menu .dropdown-header {
    color: #428bca;
    font-size: 18px;
}

@media (max-width: 768px) {
    .large-dropdown-menu {
        margin-left: 0 ;
        margin-right: 0 ;
    }
    .large-dropdown-menu > li {
        margin-bottom: 30px;
    }
    .large-dropdown-menu > li:last-child {
        margin-bottom: 0;
    }
    .large-dropdown-menu .dropdown-header {
        padding: 3px 15px !important;
    }
}

.dropdown-menu-wrapper{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.menu-icon-wrapper{
    display: flex;
}

Step 5. add imports to /src/App.js

Add css files and react bootstrap components to file

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import {Navbar, Nav, NavDropdown, Dropdown, Container, NavItem, NavLink} from 'react-bootstrap';
import './css/custom-dropdown-menu.css';

Step 6. Change file /src/App.js

Add react nav bar to App.js file:

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">Wecode101</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto" activeKey={window.location.pathname}>
              <Nav.Link href="#about">About</Nav.Link>
              <Nav.Link href="#jobs">Jobs</Nav.Link>
              <Dropdown as={NavItem}>
                <Dropdown.Toggle as={NavLink}/>
                <Dropdown.Menu className="large-dropdown-menu">
                  <div className="dropdown-menu-wrapper">
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-graduation-cap main-theme-color"/></div>
                            <div><NavDropdown.Item href="#schools"><b>Schools</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-flask main-theme-color"/></div>
                            <div><NavDropdown.Item href="#science"><b>Science</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-envira main-theme-color"/></div>
                            <div><NavDropdown.Item href="#environment"><b>Environment</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-microchip main-theme-color"/></div>
                            <div><NavDropdown.Item href="#technology"><b>Technology</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-car main-theme-color"/></div>
                            <div><NavDropdown.Item href="#automotive"><b>Automotive</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                  </div>
                </Dropdown.Menu>
              </Dropdown>
              <Nav.Link href="#news" className="item-to-left">News</Nav.Link>
              <NavDropdown title="" className="collapsible-nav-dropdown">
                <NavDropdown.Item href="#blog">Blogs</NavDropdown.Item>
              </NavDropdown>
              <Nav.Link href="#contact">Contact</Nav.Link>
              <NavDropdown title="" className="collapsible-nav-dropdown">
                <NavDropdown.Item href="#request-a-call">Request a Call Back</NavDropdown.Item>
              </NavDropdown>
            </Nav>
            <Nav>
              <Nav.Link href="#deets">More deets</Nav.Link>
              <Nav.Link eventKey={2} href="#memes">
                Dank memes
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

The navbar above is a typical bootstrap navbar with brand, toggler, collapse, etc. The bootstrap.min.css import is used to provide the styling to the navbar and react-bootstrap is used to provide the various components.

The custom dropdown navbar falls under the jobs navlink, the Dropdown component is used instead of NavDropdown in order to use the custom styling. The as={NavItem} and as={NavLink} is mixed in the Dropdown component in order to be used as a navlink with a dropdown menu.

This is how App,js looks like:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import {Navbar, Nav, NavDropdown, Dropdown, Container, NavItem, NavLink} from 'react-bootstrap';
import './App.css';
import './css/custom-dropdown-menu.css';

function App() {
  return (
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">Wecode101</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto" activeKey={window.location.pathname}>
              <Nav.Link href="#about">About</Nav.Link>
              <Nav.Link href="#jobs">Jobs</Nav.Link>
              <Dropdown as={NavItem}>
                <Dropdown.Toggle as={NavLink}/>
                <Dropdown.Menu className="large-dropdown-menu">
                  <div className="dropdown-menu-wrapper">
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-graduation-cap main-theme-color"/></div>
                            <div><NavDropdown.Item href="#schools"><b>Schools</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-flask main-theme-color"/></div>
                            <div><NavDropdown.Item href="#science"><b>Science</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-envira main-theme-color"/></div>
                            <div><NavDropdown.Item href="#environment"><b>Environment</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-microchip main-theme-color"/></div>
                            <div><NavDropdown.Item href="#technology"><b>Technology</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                    <div>
                      <ul>
                        <li className="dropdown-header">
                          <div className="menu-icon-wrapper">
                            <div><i className="col-2 fa fa-2x fa-car main-theme-color"/></div>
                            <div><NavDropdown.Item href="#automotive"><b>Automotive</b></NavDropdown.Item></div>
                          </div>
                        </li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-1">Example-1</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-2">Example-2</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-3">Example-3</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-4">Example-4</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-5">Example-5</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-6">Example-6</NavDropdown.Item></li>
                        <li className="job-sub-tabs"><NavDropdown.Item href="#example-7">Example-7</NavDropdown.Item></li>
                      </ul>
                    </div>
                  </div>
                </Dropdown.Menu>
              </Dropdown>
              <Nav.Link href="#news" className="item-to-left">News</Nav.Link>
              <NavDropdown title="" className="collapsible-nav-dropdown">
                <NavDropdown.Item href="#blog">Blogs</NavDropdown.Item>
              </NavDropdown>
              <Nav.Link href="#contact">Contact</Nav.Link>
              <NavDropdown title="" className="collapsible-nav-dropdown">
                <NavDropdown.Item href="#request-a-call">Request a Call Back</NavDropdown.Item>
              </NavDropdown>
            </Nav>
            <Nav>
              <Nav.Link href="#deets">More deets</Nav.Link>
              <Nav.Link eventKey={2} href="#memes">
                Dank memes
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
  );
}

export default App;

This is just a basic example of how you can create larger customisable dropdown menus. You can now use this example and create a menu to fit your needs.

Happy coding!

React bootstrap large custom dropdown menu in nav bar

How to create react bootstrap large custom dropdown menu in nav bar

React bootstrap large custom dropdown menu in nav bar

How to create react bootstrap large custom dropdown menu in nav bar