Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic example

Navbars require a wrapping <Navbar> with expand = {sm|md|lg|xl|xxl} props for responsive collapsing and color scheme classes.

Preview

Jsx

import React, { useState } from 'react'
import { Button, Form, Nav, Navbar, NavDropdown } from 'react-bootstrap'

const BasicExample = () => {
  return (
    <Navbar bg="light" expand="lg">
        <Navbar.Brand href="#">Navbar</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto mb-2 mb-lg-0" defaultActiveKey="home" >
                <Nav.Item>
                    <Nav.Link eventKey="home" >Home</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="link-1" >Link</Nav.Link>
                </Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">
                        Another action
                    </NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.3">Something else here</NavDropdown.Item>
                </NavDropdown>
                <Nav.Item>
                    <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
                </Nav.Item>
            </Nav>
            <Form className="d-flex">
                <Form.Control className="me-2" type="search" placeholder="Search" aria-label="Search" />
                <Button variant="outline-success" type="submit">Search</Button>
            </Form>
        </Navbar.Collapse>
    </Navbar>
  )
}

export default BasicExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Brand

The <Navbar.Brand> can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.

Preview

Jsx

import React, { useState } from 'react'
import { Container, Navbar } from 'react-bootstrap'

const NavBrand = () => {
  return (
    <>
        // As a link 
       <Navbar bg="light" variant="light" className="mb-3">
           <Container>
               <Navbar.Brand href="#">Navbar</Navbar.Brand>
           </Container>
       </Navbar>
        // As a heading 
       <Navbar bg="light" variant="light">
           <Container>
               <Navbar.Brand as="h1" className="mb-0">Navbar</Navbar.Brand>
           </Container>
       </Navbar>
    </>
  )
}

export default NavBrand;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Image

You can replace the text within the .navbar-brand with an <img>.

Preview

Jsx

import React, { useState } from 'react'
import { Container, Navbar } from 'react-bootstrap'
//Image 
import logo from '../../../Assets/dist/img/logo-light.svg'

const NavImages = () => {
  return (
    <Navbar bg="light" variant="light">
        <Container>
            <Navbar.Brand href="#">
                <img src={logo} alt="logo" />
            </Navbar.Brand>
        </Container>
    </Navbar>
  )
}

export default NavImages;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Forms

Immediate child elements of <Navbar> use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior.

Preview

Jsx

import React, { useState } from 'react'
import { Form, Navbar } from 'react-bootstrap'

const NavForm = () => {
  return (
    <Navbar bg="light" variant="light">
        <Container>
            <Navbar.Brand href="#">Navbar</Navbar.Brand>
            <Form className="d-flex">
                <Form.Control className="me-2" type="search" placeholder="Search" aria-label="Search" />
                <Button variant="outline-success" type="submit">Search</Button>
            </Form>
        </Container>
    </Navbar>
  )
}

export default NavForm;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Text

Loose text and links can be wrapped Navbar.Text in order to correctly align it vertically.

Preview

Jsx

import React, { useState } from 'react'
import { Container, Navbar } from 'react-bootstrap'

const NavbarText = () => {
  return (
    <Navbar bg="light" variant="light">
        <Container>
            <Navbar.Text>
                Navbar text with an inline element
            </Navbar.Text>
        </Container>
    </Navbar>
  )
}

export default NavbarText;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Navbar dark

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

Preview

Jsx

import React, { useState } from 'react'
import { Container, Form, Navbar } from 'react-bootstrap'

const NavbarDark = () => {
  return (
    <Navbar bg="dark" expand="lg" variant="dark">
        <Navbar.Brand href="#">Navbar</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto mb-2 mb-lg-0" defaultActiveKey="home" >
                <Nav.Item>
                    <Nav.Link eventKey="home" >Home</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="link-1" >Link</Nav.Link>
                </Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">
                        Another action
                    </NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.3">Something else here</NavDropdown.Item>
                </NavDropdown>
                <Nav.Item>
                    <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
                </Nav.Item>
            </Nav>
            <Form className="d-flex">
                <Form.Control className="me-2" type="search" placeholder="Search" aria-label="Search" />
                <Button variant="outline-success" type="submit">Search</Button>
            </Form>
        </Navbar.Collapse>
    </Navbar>
  )
}

export default NavbarDark;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

External content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page.

Preview

Jsx

import React, { useState } from 'react'
import { Navbar } from 'react-bootstrap'

const ExternalContents = () => {
  return (
    <Navbar expand={false} bg="dark" variant="dark">
        <Navbar.Collapse id="navbarToggleExternalContent">
            <Navbar.Text as="h5" className="text-white">Collapsed content</Navbar.Text>
            <br />
            <Navbar.Text className="text-muted mb-3" >Toggleable via the navbar brand.</Navbar.Text>
        </Navbar.Collapse>
        <Navbar.Toggle aria-controls="navbarToggleExternalContent" />
    </Navbar>
  )
}

export default ExternalContents;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas component. We extend both the offcanvas default styles and use the expand prop to create a dynamic and flexible navigation sidebar.

In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, set the expand prop to false.

Preview

Jsx

import React, { useState } from 'react'
import { Button, Container, Form, Nav, Navbar, NavDropdown, Offcanvas } from 'react-bootstrap'

const NavbarOffcanvas = () => {
  return (
    <Navbar bg="light" expand={false}>
        <Container fluid>
            <Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
            <Navbar.Toggle aria-controls={`offcanvasNavbar-expand`} />
            <Navbar.Offcanvas
                id={`offcanvasNavbar-expand`}
                aria-labelledby={`offcanvasNavbarLabel-expand`}
                placement="end"
            >
                <Offcanvas.Header closeButton>
                    <Offcanvas.Title id={`offcanvasNavbarLabel-expand`}>
                        Offcanvas
                    </Offcanvas.Title>
                </Offcanvas.Header>
                <Offcanvas.Body>
                    <Nav className="justify-content-end flex-grow-1 pe-3">
                        <Nav.Link href="#action1">Home</Nav.Link>
                        <Nav.Link href="#action2">Link</Nav.Link>
                        <NavDropdown
                            title="Dropdown"
                            id={`offcanvasNavbarDropdown-expand`}
                        >
                            <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
                            <NavDropdown.Item href="#action4">
                                Another action
                            </NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item href="#action5">
                                Something else here
                            </NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                    <Form className="d-flex">
                        <Form.Control
                            type="search"
                            placeholder="Search"
                            className="me-2"
                            aria-label="Search"
                        />
                        <Button variant="outline-success">Search</Button>
                    </Form>
                </Offcanvas.Body>
            </Navbar.Offcanvas>
        </Container>
    </Navbar>
  )
}

export default NavbarOffcanvas;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.