Hope-Ui React | Responsive Bootstrap 5 Admin doc Template

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

<Navbar bg="light" expand="lg">
    <Container fluid>   
        <Navbar.Brand href="#">Navbar</Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarScroll" />
        <Navbar.Collapse id="navbarScroll">
            <Nav className="me-auto" navbarScroll>
                <Nav.Link href="#action1">Home</Nav.Link>
                <Nav.Link href="#action2">Link</Nav.Link>
                <NavDropdown title="Dropdown" id="navbarScrollingDropdown">
                    <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.Link href="#" disabled>
                Disabled
                </Nav.Link>
            </Nav>
            <Form className="d-flex">
                <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
                <Button variant="outline-success">Search</Button>
            </Form>
        </Navbar.Collapse>
    </Container>
</Navbar>

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.

Text

Add your text within an element with the .navbar-brand class.

<Navbar expand="lg" variant="light" bg="light">
    <Container fluid>
        <Navbar.Brand href="#">Navbar</Navbar.Brand>
    </Container>
</Navbar>

Image

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

<Navbar bg="dark">
    <Container>
        <Navbar.Brand href="#home">
        <img
            src={image1}
            width="30"
            height="30"
            className="d-inline-block align-top"
            alt="React Bootstrap logo"
        />
        </Navbar.Brand>
    </Container>
</Navbar>

Image and text

You can also make use of some additional utilities to add an image and text at the same time. Note the addition of .d-inline-block and .align-text-top on the <img>.

<Navbar bg="dark" variant="dark">
    <Container>
        <Navbar.Brand href="#home">
            <img
            alt=""
            src="{image1}"
            width="30"
            height="30"
            className="d-inline-block align-top"
            />{' '}
            React Bootstrap
        </Navbar.Brand>
    </Container>
</Navbar>

Nav

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

<Navbar bg="light" variant="light">
    <Container fluid>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#features">Features</Nav.Link>
        <Nav.Link href="#pricing">Pricing</Nav.Link>
        <Nav.Link href="#" disabled>Disabled</Nav.Link>
        </Nav>
    </Container>
</Navbar>

You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.

<Navbar bg="light" expand="lg">
    <Container fluid>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <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.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
            </NavDropdown>
        </Nav>
        </Navbar.Collapse>
    </Container>
</Navbar>

Forms

Place various form controls and components within a navbar:

<Navbar bg="light" expand="lg">
    <Container fluid>
    <Form className="d-flex">
        <FormControl
            type="search"
            placeholder="Search"
            className="mr-2"
            aria-label="Search"
        />
        <Button variant="outline-success">Search</Button>
        </Form>
    </Container>
</Navbar>

Immediate child elements of Navbar use flex layout and will default to justify-content: space-between.

<Navbar bg="light" expand="lg">
    <Container fluid>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <form className="d-flex">
            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
            <button className="btn btn-outline-success" type="submit">Search</button>
        </form>
    </Container>
</Navbar>

Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the <form> element as the container and save some HTML.

<Navbar bg="light" expand="lg">
    <Container fluid>
        <InputGroup className="mb-3">
            <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
            <FormControl
            placeholder="Username"
            aria-label="Username"
            aria-describedby="basic-addon1"
            />
        </InputGroup>
    </Container>
</Navbar>

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

<Navbar bg="light" expand="lg">
    <Container fluid>
        <Form className="d-flex justify-content-start">
            <Button variant="outline-success" className="me-2">Main button</Button>
            <Button-small variant="outline-secondary" className="me-2">smaller button</Button-small>
        </Form>
    </Container>
</Navbar>

Text

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

<Navbar bg="light" expand="lg">
    <Container fluid>
        <Navbar.Text>Navbar text with an inline element</Navbar.Text>
    </Container>
</Navbar>

Mix and match with other components and utilities as needed.

<Navbar bg="light" expand="lg">
    <Navbar.Brand href="#">Navbar with text</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbarScroll" />
    <Navbar.Collapse id="navbarScroll">
        <Nav
        className="mr-auto my-2 my-lg-0"
        style={{ maxHeight: '100px' }}
        navbarScroll
        >
        <Nav.Link href="#action1">Home</Nav.Link>
        <Nav.Link href="#action2">Feature</Nav.Link>
        <Nav.Link href="#action3" >Pricing</Nav.Link>
        </Nav>
        <Navbar.Text >Navbar text with an inline element</Navbar.Text>
    </Navbar.Collapse>
</Navbar>

Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from variant="light" for use with light background colors, or variant="dark" for dark background colors. Then, customize with the bg prop or any custom css!

<Navbar bg="dark" variant="dark">
    <Container fluid>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
            <Nav.Link href="#pricing">About</Nav.Link>
        </Nav>
        <Form className="d-flex">
            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
            <Button variant="outline-light">Search</Button>
        </Form>
    </Container>
</Navbar>
<br />
<Navbar bg="primary" variant="dark">
    <Container fluid>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
            <Nav.Link href="#pricing">About</Nav.Link>
        </Nav>
        <Form className="d-flex">
            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
            <Button variant="outline-light">Search</Button>
        </Form>
        
    </Container>
</Navbar>
<br />
<Navbar bg="light" expand="lg">
    <Container fluid>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="me-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#features">Features</Nav.Link>
        <Nav.Link href="#pricing">Pricing</Nav.Link>
        <Nav.Link href="#pricing">About</Nav.Link>
    </Nav>
    <Form className="d-flex">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <Button variant="outline-light">Search</Button>
    </Form>
    </Container>
</Navbar>

Containers

Although it’s not required, you can wrap a navbar in a .container to center it on a page–though note that an inner container is still required. Or you can add a container inside the .navbar to only center the contents of a fixed or static top navbar.

<Container>
    <Navbar expand="lg" variant="light" bg="light">
        <Container fluid>
            <Navbar.Brand href="#">Navbar</Navbar.Brand>
        </Container>
    </Navbar>
</Container>

Use any of the responsive containers to change how wide the content in your navbar is presented.

<Container>
    <Navbar expand="lg" variant="light" bg="light">
        <Container fluid="md">
            <Navbar.Brand href="#">Navbar</Navbar.Brand>
        </Container>
    </Navbar>
</Container>

Updated on September, 6 2025

Was this page helpful?Yes No

Documentation

Quick Start

Installation

Customization

Components

Forms

Contents

Plugin

Navbar

Supported content

Brand

Text

Image

Image and text

Nav

Forms

Text

Color schemes

Containers

Updated on September, 6 2025