AppDividend
Latest Code Tutorials

How To Create Custom Navigation Menu In React With Sass

0

To create custom navigation menu in React.js is essential functionality. If you are using the Bootstrap CSS framework, then it is straightforward. Just copy and paste the Navbar code and include the CSS. That is it. But in this example, we will use the Sass to style the React components. If you don’t know how to use Sass in React, then check out Sass in React guide.

How To Create Custom Navigation Menu In React

We will use Bootstrap CSS Framework and Node-sass module to work with Sass styling. As we all know, Bootstrap offers us a ready-made navbar so that we will use that, and then we will modify that according to our needs using Sass styling.

Now, our first step is to install React.js using create-react-app.

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 reactx.

Now, go inside that folder and open the folder in Visual Studio Code.

Now, open the package.json file, and you can see the current version of React.js. As a time of this tutorial, the current version of React: 16.3.1. The ReactDom also has the same version.

Okay, now let’s install the following two CSS modules.

yarn add bootstrap node-sass

You can also use the NPM to install the 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, then 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

As we know, we will use Sass styles instead of CSS styles.

So, create a new file called 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.

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

Import is the feature comes with Sass styling, which is not available 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 _, then that means 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 provided by the Bootstrap Navbar component so that we can customize it in our way.

Now, 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 of the Bootstrap class properties need to be overridden; that is why we are adding ! 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, then you can use the ! important attribute. That means browsers have to apply this style and not the by 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 in 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 and now 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/

How To Create Navigation Menu In ReactThat is it. We have successfully created a Custom Navigation Menu in React with Sass stylesheets.

If you go back to the terminal, then you will see a few warnings like the following.

Compiled with warnings.

./src/shared/Header.js
  Line 17:13:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 18:13:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

This is because we have not provided the routing links inside the <a href> elements. Ignore that for now.

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

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

Conclusion

In this example, we have seen how to build a custom navigation menu in React 16 with Sass stylesheet.

We will add routing to our Header component, but we will see in the next tutorial.

Leave A Reply

Your email address will not be published.

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