React Bootstrap Navbar

Bootstrap navbar is a horizontal navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

MDB provides you with stylish Navbars, with distinctive for Material Design details (such as shadows, living colors or charming wave effects triggered by clicking on the link). Apart from traditional, text links, Bootstraps Navbar might embed regular & social icons, dropdowns, avatars or search forms.

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars take in numerous props, including color and expand for responsive collapsing.

  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.

  • Navbars and their contents are built with flexbox, providing easy alignment options via utility classes.

  • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse component.

  • To ensure accessibility, our Navbars use the nav HTML tag by default, but in case of setting the tag prop to something else, they also provide role="navigation" attribute within. That way it is possible to explicitly identify it as a landmark region for users of assistive technologies.

Read on for an example and list of supported sub-components.

As of MBD React version 1.5, the navigation is React-Router compatible. As such, it requires importing { BrowserRouter } component from react-router-dom at the beginning of the file and wrapping the contents of (render's) return() statement in a <BrowserRouter> component. The <NavLink>'s to attribute is now required.


Basic example

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

import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class NavbarFeatures extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: false,
            isWideEnough: false,
        };
    this.onClick = this.onClick.bind(this);
    }

    onClick(){
        this.setState({
            collapse: !this.state.collapse,
        });
    }
    render() {
        return (
            <Router>
                <Navbar color="indigo" dark expand="md" scrolling>
                    <NavbarBrand href="/">
                        <strong>Navbar</strong>
                    </NavbarBrand>
                    { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
                    <Collapse isOpen = { this.state.collapse } navbar>
                        <NavbarNav left>
                          <NavItem active>
                              <NavLink to="#">Home</NavLink>
                          </NavItem>
                          <NavItem>
                              <NavLink to="#">Features</NavLink>
                          </NavItem>
                          <NavItem>
                              <NavLink to="#">Pricing</NavLink>
                          </NavItem>
                          <NavItem>
                            <Dropdown>
                                <DropdownToggle nav caret>Dropdown</DropdownToggle>
                                <DropdownMenu>
                                    <DropdownItem href="#">Action</DropdownItem>
                                    <DropdownItem href="#">Another Action</DropdownItem>
                                    <DropdownItem href="#">Something else here</DropdownItem>
                                    <DropdownItem href="#">Something else here</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                          </NavItem>
                        </NavbarNav>
                        <NavbarNav right>
                          <NavItem>
                            <form className="form-inline md-form mt-0">
                              <input className="form-control mr-sm-2 mb-0 text-white" type="text" placeholder="Search" aria-label="Search"/>
                            </form>
                          </NavItem>
                        </NavbarNav>
                    </Collapse>
                </Navbar>
            </Router>
        );
    }
}

            

Color schemes

Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and background-color utilities. Put another way, you specify light or dark and apply a background color.

You can choose one of over 300 colors form our material palette

.


<!--/.Navbar red color-->
<Navbar dark color="red">
    ...
</Navbar>
<!--/.Navbar red color-->

<!--/.Navbar purple color-->
<Navbar dark color="purple">
    ...
</Navbar>
<!--/.Navbar purple color-->

<!--/.Navbar green color-->
<Navbar light color="green">
    ...
</Navbar>
<!--/.Navbar green color-->

If you want to use light background you should apply light prop to the Navbar, to provide a proper contrast for links.

<!--Navbar-->

<Navbar light color="blue-grey lighten-5" expand="lg">

    ...

</Navbar>

<!--/.Navbar-->

Supported content

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

  • <NavbarBrand> for your company, product, or project name.

  • <NavbarNav> for a full-height and lightweight navigation (including support for dropdowns).

  • <NavbarToggler> for use with our Collapse component and other navigation toggling behaviors.

  • <Collapse> for grouping and hiding navbar contents by a parent breakpoint.

Brand

The <NavbarBrand> can be host virtually any element, while it itself is an anchor by default.


<!-- As a link -->

<Navbar color="indigo" dark>
    <NavbarBrand href="#">
        Link
    </NavbarBrand>
</Navbar>

<br/>

<!-- As a heading -->

<Navbar color="blue-grey lighten-4" light>
    <NavbarBrand tag="span">
        Heading
    </NavbarBrand>
</Navbar>

Images

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

<!-- Just an image -->

<Navbar color="unique-color-dark" dark>
    <NavbarBrand href="#">
        <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30"/>
    </NavbarBrand>
</Navbar>

<!-- Image and text -->

<Navbar color="unique-color-dark" dark>
    <NavbarBrand href="#">
        <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" className="d-inline-block align-top"/>
         Bootstrap
    </NavbarBrand>
</Navbar>

NavbarNav

Navbar items and links build on our navigation options. By default, NavItems will grow to occupy as much horizontal space as possible within the NavbarNav component. This behavior is subject to modifications through the left and right props, what comes especially handy when more than one NavbarNav component is involved.

Active states — with the active props — are used to indicate the current page or items of significance and are best applied directly to NavbarItem component.

<Router>
    <Navbar color="indigo" dark expand="lg">
        <NavbarBrand href="/">
            <strong>Navbar</strong>
        </NavbarBrand>
        { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
        <Collapse isOpen = { this.state.collapse } navbar>
            <NavbarNav>
            <NavItem active>
                <NavLink className="nav-link" to="#">Home</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#">Features</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#">Pricing</NavLink>
            </NavItem>
        </Collapse>
    </Navbar>
<Router>

To present a NavLink as disabled, simply pass it a disabled prop.

<Router>
    <Navbar color="indigo" dark expand="md">
        <NavbarBrand href="/">
            <strong>Navbar</strong>
        </NavbarBrand>
        { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
        <Collapse isOpen = { this.state.collapse } navbar>
            <NavbarNav>
            <NavItem active>
                <NavLink className="nav-link" to="#">Home</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#">Features</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#">Pricing</NavLink>
            </NavItem>
            <NavItem>
            <NavLink className="nav-link" to="#" disabled>Disabled</NavLink>
            </NavItem>
        </Collapse>
    </Navbar>
</Router>

You may also utilize the Dropdown component in your navbar. To give it appropriate styling and positioning, be sure to pass your DropdownToggle a nav prop.

<Router>
    <Navbar color="indigo" dark expand="lg">
        <NavbarBrand href="/">
            <strong>Navbar</strong>
        </NavbarBrand>
        { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
        <Collapse isOpen = { this.state.collapse } navbar>
            <NavbarNav>
            <NavItem active>
                <NavLink className="nav-link" to="#">Home</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#">Features</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#">Pricing</NavLink>
            </NavItem>
            <NavItem>
            <Dropdown>
                    <DropdownToggle nav caret>Dropdown</DropdownToggle>
                    <DropdownMenu>
                    <DropdownItem href="#">Action</DropdownItem>
                    <DropdownItem href="#">Anothercentor Action</DropdownItem>
                    <DropdownItem href="#">Something else here</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </NavItem>
        </Collapse>
    </Navbar>
</Router>

Containers

Although it’s not required, you can wrap a navbar in a Container to center it on a page or add one within to only center the contents of a fixed or static top navbar

Live demo
<Container>
    <Navbar dark color="indigo" expand="lg">
        <NavbarBrand href="#">
            <strong>Navbar</strong>
        </NavbarBrand>
    ...
    </Navbar>
</Container>

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified expand prop. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

Live demo
<Navbar dark color="indigo" expand="lg">
    <Container>
        <NavbarBrand href="#">
            <strong>Navbar</strong>
        </NavbarBrand>
    ...
    </Container>
</Navbar>

Placement

Use Navbar props to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. Note that position: sticky, used with the sticky prop, isn’t fully supported in every browser.

Fixed top

Live demo
<Navbar dark color="purple" expand="lg" fixed="top">
        <NavbarBrand href="#">
            <strong>Navbar</strong>
        </NavbarBrand>
    ...
</Navbar>

Fixed bottom

Live demo
<Navbar dark color="bg-default" expand="lg" fixed="bottom">
    <NavbarBrand href="#">
        <strong>Navbar</strong>
    </NavbarBrand>
    ...
</Navbar>

Sticky top

Live demo
<Navbar dark color="cyan lighten-3" expand="lg" sticky="top">
    <NavbarBrand href="#">
        <strong>Navbar</strong>
    </NavbarBrand>
    ...
</Navbar>

Responsive behaviors

Navbars can utilize NavbarToggler, Collapse, and the expand prop to change when their content collapses behind a button. Using these allows to decide programmatically when to show or hide particular elements.

For navbars that never collapse, pass them the expand prop. To use width breakpoints for collapsing, pass the expand prop with one of the values - sm, md, lg or xl. To have a navbars that is always collapsed, simply don’t add any expand-related prop.

NavbarToggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a NavbarBrand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.

With no NavbarBrand shown in lowest breakpoint:

<Navbar color="indigo" expand="md" dark >
    { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
    <Collapse isOpen = { this.state.collapse } navbar>
        <NavbarBrand href="#">
            Hidden brand
        </NavbarBrand>
        <NavbarNav left>
            <NavItem active>
                <NavLink className="nav-link" to="#">Home</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#">Link</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#" disabled>Disabled</NavLink>
            </NavItem>
        </NavbarNav>
    </Collapse>
</Navbar>

With a brand name shown on the left and toggler on the right:

<Navbar color="indigo" expand="md" dark >
    <NavbarBrand href="#">
        Navbar
    </NavbarBrand>
    { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
    <Collapse isOpen = { this.state.collapse } navbar>
        <NavbarNav left>
            <NavItem active>
                <NavLink className="nav-link" to="#">Home</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#">Link</NavLink>
            </NavItem>
            <NavItem>
                <NavLink className="nav-link" to="#" disabled>Disabled</NavLink>
            </NavItem>
        </NavbarNav>
    </Collapse>
</Navbar>

Scrolling navbar

By adding the scrolling prop to your fixed="top" navbar, you can give it an smooth animation on a scroll.

Live demo
<Navbar color="br-primary" expand="lg" fixed="top" scrolling>
    ...
</Navbar>