How to Create Custom Navigation Menu in React With Sass

by

Here are the steps to create a custom navigation menu in React with Sass.

Step 1: Install React and other CSS modules

Type the following command in your cmd or terminal.

npx create-react-app reactx

Our application name should be react.

Go inside that folder and open the folder in Visual Studio Code.

Open the package.json file, and you can see the current version of React.js.

Let’s install the following two CSS modules.

yarn add bootstrap node-sass

You can also use the NPM to install third-party libraries. For that, you need to type the following command.

npm i bootstrap node-sass --save

Step 2: Create a Header Component

Create a new folder inside the src folder called shared, and inside that folder, create a new file called Header.js. Write the following code inside the Header.js file.

// Header.js

import React from 'react';

export function Header() {
  return (
    <h1>Header Component</h1>
  )
}

This component should only deal with Header elements of our application, like Navbar.

If we divide our React components into small components, it will be easy for our application to manage the data between different components.

Now, import the Header component inside the src >> App.js file.

// App.js

import React from 'react';
import { Header } from './shared/Header';

function App() {
  return (
    <div>
      <Header />
    </div>
 );
}

export default App;

Step 3: Create Sass or Scss file

Create a new App.scss inside the src folder and remove the App.css file. Or you can rename the App.css file into App.scss file. The choice is yours.

The App.scss file contains all the Sass code our project will use. In such near future, we will import the scss files into the App.scss file.

Import is the feature of Sass styling, which is unavailable in plain css files.

Now, inside the src folder, create a new folder called styles, and inside that folder, we will create the following two new scss files.

  1. _main.scss
  2. _variables.scss

Now, if the file name starts with _, it is a partial file.

Inside the _variables.scss file, we will define the color variables.

// _variables.scss

$main-color: #df01d7;
$main-text-gray-color: #484848;
$light-gray-color: #a9a9a9;
$main-black-color: #20232a;
$main-white-color: #ededed;

These are some of the colors which we will use in the components like Navbar.

We will override some default colors the Bootstrap Navbar component provides to customize it.

Inside the _main.scss file, write the following code.

// _main.scss

@import "variables";

.navbar {
  padding: 20px;
  margin-bottom: 40px;
  background-color: $main-black-color;

  .nav-search {
    height: 50px;
    width: 300px !important;
    border-color: $main-color;
  }

  .navbar-brand {
    margin-right: 30px;
    font-size: 27px;
    letter-spacing: 1px;
    color: $main-color !important;
    font-weight: 500;
  }

  .nav-item {
    font-size: 14px;
  }

  .btn-nav-search {
    border-color: $main-color;
    color: $main-color;

    &:hover,
    &:focus,
    &:active {
      background-color: transparent !important;
      border-color: $main-color !important;
      color: $main-color !important;
      box-shadow: none;
    }
  }

  .nav-item {
    color: $main-white-color;
  }
}

In the first line, you can see that we have imported the _variables.scss file to use the color variables in the different classes of Bootstrap. We are using the class names of the Navbar component provided by Bootstrap.

Some Bootstrap class properties must be overridden, so we are adding them! An important property that means the browser applies the _main.scss file’s css styles instead of by default Bootstrap’s style.

If you want to override any element’s property in CSS, you can use them! Important attribute. That means browsers have to apply this style and not the default style.

Now, the last step is to import the _main.scss file inside the App.scss file.

// App.scss

@import "styles/main";

Step 4: Add Navbar inside the Header.js file.

We have successfully added scss files to our React project. Now, we have to use these classes inside our React component. So add the following code inside the Header.js file and save that file.

// Header.js

import React from 'react';

export function Header() {
  return (
    <nav className='navbar navbar-dark navbar-expand-lg'>
      <div className='container'>
        <a className='navbar-brand' href='/'>Hotel Booking App</a>
        <form className='form-inline my-2 my-lg-0'>
          <input className='form-control mr-sm-2 nav-search' type='search' placeholder='Search hotel here' aria-label='Search'></input>
          <button className='btn btn-outline-success my-2 my-sm-0 btn-nav-search' type='submit'>Search</button>
        </form>
        <button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNavAltMarkup' aria-controls='navbarNavAltMarkup' aria-expanded='false' aria-label='Toggle navigation'>
          <span className='navbar-toggler-icon'></span>
        </button>
        <div className='collapse navbar-collapse' id='navbarNavAltMarkup'>
          <div className='navbar-nav ml-auto'>
            <a className='nav-item nav-link' href='#'>Login <span className='sr-only'>(current)</span></a>
            <a className='nav-item nav-link' href='#'>Sign up</a>
          </div>
        </div>
      </div>
    </nav>
  )
}

Save the file, go to the terminal, and start the React development server using the following command.

yarn start

It will open the browser with this link: http://localhost:3000/

That is it. We have successfully created a Custom Navigation Menu in React with Sass stylesheets.

If you return to the terminal, you will see a few warnings

We have not provided the routing links inside the <a href> elements. Ignore that for now.

If we add routing links to the Navbar, we must use a react-router-dom package.

React Router is the collection of navigational components that compose declaratively with your application. Whether you need bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering.

That’s it.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.