Search...

Navbar

React Bootstrap 5 Navbar

A React Bootstrap 5 Navbar is a user interface element that links a user to other sections of the website.

The Contrast React Bootstrap 5 Navbar has predefined styles you can access via passing values into a prop on the component.

Importing the Contrast Navbar Component

To use the Contrast React Bootstrap 5 Navbar component, you import CDBNavbar into your project.

js
import { CDBNavbar } from 'cdbreact';

Default Navbar

In this section of the tutorial we use the CDBDropDown component for our dropdowns, the CDBBtn component for our button , the CDBIcon component for our icons, the CDBCollapse component alongside the CDBNavbar component. Check out the docs to have more information.

js
import React from 'react';
const Navbar = () => {
const [collapse, setCollapse] = useState(false);
const bgBlack = { backgroundColor: '#000000', color: '#f4f4f4' };
return (
<CDBContainer>
<Router style={{ width: '100%' }}>
<CDBNavbar style={bgBlack} dark expand="md" scrolling>
<CDBNavBrand href="/">
<strong>Navbar</strong>
</CDBNavBrand>
<CDBNavToggle
onClick={() => {
setCollapse(!collapse);
}}
/>
<CDBCollapse id="navbarCollapse1" isOpen={collapse} navbar>
<CDBNavbarNav left>
<CDBNavItem>
<CDBNavLink to="#">
<CDBIcon fab icon="facebook-f" />
</CDBNavLink>
</CDBNavItem>
<CDBNavItem>
<CDBNavLink to="#">
<CDBIcon fab icon="twitter" />
</CDBNavLink>
</CDBNavItem>
<CDBNavItem>
<CDBNavLink to="#">
<CDBIcon fab icon="instagram" />
</CDBNavLink>
</CDBNavItem>
</CDBNavbarNav>
<CDBNavbarNav right className="align-items-center">
<CDBNavItem active>
<CDBBtn circle color="dark" style={{ padding: 0 }}>
<CDBNavLink to="#">
<CDBIcon className="me-2" icon="home" /> Home
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn circle color="dark" style={{ padding: 0 }}>
<CDBNavLink to="#">
<CDBIcon className="me-2" icon="feather" /> Features
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn circle color="dark" style={{ padding: 0 }}>
<CDBNavLink to="#">
<CDBIcon className="me-2" icon="dollar-sign" /> Pricing
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBDropDown>
<CDBDropDownToggle caret style={{ padding: 0 }} color="dark" circle>
<CDBIcon className="me-2" icon="cogs" /> Options
</CDBDropDownToggle>
<CDBDropDownMenu>Coming soon #pleaseStayUpdated.</CDBDropDownMenu>
</CDBDropDown>
</CDBNavItem>
</CDBNavbarNav>
</CDBCollapse>
</CDBNavbar>
</Router>
</CDBContainer>
);
};
export default Navbar;

Example 2

js
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
CDBNavbar,
CDBNavBrand,
CDBNavItem,
CDBNavLink,
CDBDropDown,
CDBDropDownMenu,
CDBDropDownToggle,
CDBBtn,
CDBNavToggle,
CDBIcon,
CDBCollapse,
CDBNavbarNav,
CDBContainer,
} from 'cdbreact';
const Navbar = () => {
const [collapse2, setCollapse2] = useState(false);
const bgBlack = { backgroundColor: '#000000', color: '#f4f4f4' };
return (
<CDBContainer>
<Router style={{ width: '100%' }}>
<CDBNavbar style={bgBlack} dark expand="md" scrolling>
<CDBNavBrand href="/">
<strong>Navbar</strong>
</CDBNavBrand>
<CDBNavToggle
onClick={() => {
setCollapse2(!collapse2);
}}
/>
<CDBCollapse id="navbarCollapse1" isOpen={collapse2} navbar>
<CDBNavbarNav left className="align-items-center">
<CDBNavItem>
<CDBDropDown>
<CDBDropDownToggle caret style={{ padding: 0 }} color="dark" circle>
Categories
</CDBDropDownToggle>
<CDBDropDownMenu>Coming soon #pleaseStayUpdated.</CDBDropDownMenu>
</CDBDropDown>
</CDBNavItem>
<CDBNavItem>
<CDBBtn circle color="dark" style={{ padding: 0 }}>
<CDBNavLink to="#">Help</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn circle color="dark" style={{ padding: 0 }}>
<CDBNavLink to="#">About</CDBNavLink>
</CDBBtn>
</CDBNavItem>
</CDBNavbarNav>
<CDBNavbarNav right>
<CDBNavItem>
<CDBBtn circle color="dark" style={{ padding: 0 }}>
<CDBNavLink to="#">
<CDBIcon className="me-2" icon="globe" />
EN
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn circle color="dark" style={{ padding: 0 }}>
<CDBNavLink to="#">
<CDBIcon className="me-2" icon="user" />
Login
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn color="white" style={{ padding: '0px 10px' }}>
<CDBNavLink to="#" style={{ color: '#000' }}>
Sign Up
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
</CDBNavbarNav>
</CDBCollapse>
</CDBNavbar>
</Router>
</CDBContainer>
);
};
export default Navbar;

Mobile View

The React Bootstrap 5 Navbar is a responsive component, it shows and hide navbar contents by its parent breakpoint. It uses a toggle element to set the display of its content. Navbar Mobile View

Mobile View - Collapsed

Navbar Mobile View - Collapsed

API Reference: Contrast React Bootstrap 5 Navbar Props

This section will build on your information about the props you get to use with the Contrast React Bootstrap 5 Navbar component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBNavbar component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBNavbar className="myClass" ... />
tagStringnavChanges default tag<CDBNavbar tag="div" ... />
colorStringfalseSets navbar background color. Use mdb color palette<CDBNavbar color="indigo" .../>
darkBooleanfalseChange navbar's theme to dark (text color will be white)<CDBNavbar dark .../>
lightBooleanfalseChange navbar's theme to light (text color will be black)<CDBNavbar light .../>
doubleBooleanfalseAllows navbar to be used along with Sidebar<CDBNavbar double .../>
expandBoolean or StringfalseDetermines on which viewport navbar should be expanded. Accepts: xs, sm, md, lg, xl. If empty - navbar won't ever collapse.<CDBNavbar expand="xs" .../>
fixedStringSets Navbar position to fixed. Use top or bottom values<CDBNavbar fixed="top" .../>
scrollingBooleanfalseChanges Navbar's size on scroll. Combine with prop transparent to archive color changing effect<CDBNavbar scrolling .../>
scrollingNavbarOffsetNumber50Number of pixels after which the Navbar changes 'scrolling' state<CDBNavbar scrollingNavbarOffset={100} .../>
transparentBooleanfalseSets Navbar background to transparent. Combine with prop scrolling and color to archive color changing effect<CDBNavbar transparent .../>
stickyStringenables navbar to stick to the when you reach its scroll position.<CDBNavbar sticky="100%" .../>

API Reference: Contrast React Bootstrap Navbar Brand Properties

The table below lists other prop options of the CDBNavBrand component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBNavBrand className="myClass" ... />
hrefStringSets passed URL (component use react-router-dom)<CDBNavBrand href="./components/custom" ... />

API Reference: Contrast React Bootstrap 5 Navbar Item Properties

The table below lists other prop options of the CDBNavItem component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBNavItem className="myClass" ... />
activeBooleanSets active state of the NavItem<CDBNavItem active ... />
tagStringliChanges default tag<CDBNavItem tag="div" ... />

API Reference: Contrast React Bootstrap Navbar Link Properties

The table below lists other prop options of the CDBNavLink component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBNavLink className="myClass" ... />
activeBooleanSets active state of the NavLink<CDBNavLink active ... />
tagStringliChanges default tag<CDBNavLink tag="div" ... />
disabledBooleanDisables element, element could not be clicked<CDBNavLink disabled ... />
toStringSets passed URL (component use react-router-dom)<CDBNavBrand to="./components/custom" ... />
linkBooleanChange NavLink to Link Component from 'react-router-dom'<CDBNavLink link ... />

API Reference: Contrast React Bootstrap Navbar Toggle Properties

The table below lists other prop options of the CDBNavToggle component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBNavLink className="myClass" ... />
tagfunction or StringbuttonChanges default tag<CDBNavLink tag="button" ... />
typeStringbuttonChanges elements type attribute<CDBNavLink type="button" ... />
imageStringSets background-image of the toggler<CDBNavBrand image="../asset/image" ... />
leftBooleanPulls element to the left side of the Navbar<CDBNavLink left ... />
rightBooleanPulls element to the right side of the Navbar<CDBNavLink right ... />

API Reference: Contrast React Bootstrap 5 Navbar Nav Properties

The table below lists other prop options of the CDBNavbarNav component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBNavbarNav className="myClass" ... />
tagfunction or StringulChanges default tag<CDBNavbarNav tag="div" ... />
leftBooleanPulls element to the left side of the Navbar<CDBNavbarNav left ... />
rightBooleanPulls element to the right side of the Navbar<CDBNavbarNav right ... />

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner