Creating NavBar Using React-Bootstrap

In This Blog, you are going to learn how to create responsive and attractive navbar in your react app by using react-bootstrap library. React-Bootstrap library supports bootstrap framework which provides us all the features of bootstrap.

Things To Cover In This Navbar Blog

• Navbar
• Navbar Brand
• Nav
• Nav Link
• Navbar Toggle
• Navbar Collapse
• NavDropdown
• NavDropdown Item
• NavDropdown Divider
• NavDropdown Header
• Navbar Text
• Fixed Top Or Bottom

Source Code

MyNavbar.js File Code – Complete Responsive Navbar Code

import React from 'react'
import { Col, Container, Nav, Navbar, NavDropdown, Row } from 'react-bootstrap'

function MyNavbar() {
    return (
        <>
            <Container>
                <Row>
                    <Col>
                        <Navbar fixed='top' variant='dark' bg='dark' expand='md'>
                            <Container>
                                <Navbar.Brand href='#'>
                                    <img
                                        src='logo192.png'
                                        height='30'
                                        width='30'
                                        className='align-top'
                                    />
                                    &nbsp;
                                    My Website
                                </Navbar.Brand>
                                <Navbar.Toggle aria-controls='my-nav'/>
                                <Navbar.Collapse id='my-nav'>
                                <Nav className='me-auto fw-bold'>
                                    <Nav.Link href='#'>Home</Nav.Link>
                                    <NavDropdown title='Services' id='my-nav'>
                                    <NavDropdown.Header>Heading 1</NavDropdown.Header>
                                        <NavDropdown.Item href='#'>Service 1</NavDropdown.Item>
                                        <NavDropdown.Item href='#'>Service 2</NavDropdown.Item>
                                        <NavDropdown.Divider/>
                                        <NavDropdown.Header>Heading 2</NavDropdown.Header>
                                        <NavDropdown.Item href='#'>Service 3</NavDropdown.Item>
                                    </NavDropdown>
                                    <Nav.Link href='#'>About</Nav.Link>
                                    <Nav.Link href='#'>Contact</Nav.Link>
                                </Nav>
                                <Navbar.Text>
                                    Sign In Here <a href='#'>Login</a>
                                </Navbar.Text>
                                </Navbar.Collapse>
                            </Container>
                        </Navbar>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        
                        <h2> this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text</h2>
                        <h2> this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text</h2>
                        <h2> this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text
                        this is a random text this is a random textthis is a random textthis is a random text</h2>
                    </Col>
                </Row>
            </Container>
        </>
    )
}

export default MyNavbar

App.js File Code

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import CallbackRefComp from './CallbackRefComp';
import HookuseRef from './HookuseRef';
import HookUseRef2 from './HookUseRef2';
import Validation from './Validation';
import FormikForm from './FormikForm';
import FormikForm2 from './FormikForm2';
import ReactBS from './ReactBS';
import GridBS from './GridBS';
import ImagesDemo from './ImagesDemo';
import CardsBS from './CardsBS';
import MyNavbar from './MyNavbar';
import MyCarousel from './MyCarousel';


function App() {
    return (
        <div>
          <MyNavbar/>
        </div>
    )
}

export default App

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/74qn5uho51wx831/79+-+NAVBAR.pptx/file