18 - Customising and Creating Navbar in our Second Project

 

What kind of navbar do we want?

 We want a navbar that can perform following operations:

--> Working options like Home, Business , Entertainment , Health , Science , Sports ,Technology.

NOTE: We will make each option working while adding BrowserRouter in our project at last.

Creating our first component Navbar

These are the following steps we will perform to create our Navbar

1-  First we will create a folder name components in our src folder of project

and add Navbar.js  in components folder.

2-  In Navbar.js  , Copy paste navbar code inside return from bootstrap website and make desired  customisations like margin , colour ,etc 

Note: Write rce in Navbar.js and the snippet extension will help with the required jsx format 

 Make changes according to jsx format in Navbar.js 

-->  class   written as   className

-->  for   written as   htmlFor

-->  tabindex   written as   tabIndex.

src --> components  -->  Navbar.js

import React, { Component } from 'react'

export class Navbar extends Component {

    render() {

        return (

            <div>

                <nav className="navbar navbar-expand-lg navbar-dark bg-dark">

                    <a className="navbar-brand mx-2" href="/">NewsLearn</a>

                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

                        <span className="navbar-toggler-icon"></span>

                    </button>

                    <div className="collapse navbar-collapse" id="navbarNav">

                        <ul className="navbar-nav">

                            <li className="nav-item active">

                                <a className="nav-link mx-3" href="/">Home</a>

                            </li>

                            <li className="nav-item active">

                                <a className="nav-link mx-3" href="/">Business</a>

                            </li>

                            <li className="nav-item active">

                                <a className="nav-link mx-3" href="/">Entertainment</a>

                            </li>

                            <li className="nav-item active">

                                <a className="nav-link mx-3" href="/">Health</a>

                            </li>

                            <li className="nav-item active">

                                <a className="nav-link mx-3" href="/">Science </a>

                            </li>

                            <li className="nav-item active">

                                <a className="nav-link mx-3" href="/">Sports</a>

                            </li>

                            <li className="nav-item active">

                                <a className="nav-link mx-3" href="/">Technology</a>

                            </li>

                        </ul>

                    </div>

                </nav>

            </div>

        )

    }

}

export default Navbar

src  -->  App.js

import './App.css';

import React, { Component } from 'react'

import Navbar from './components/Navbar';

export class App extends Component {

  render() {

    return (

      <div>

        <Navbar />

      </div>

    )

  }

}

export default App

Image 1 -  Navbar Appearance