Navbar

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

CDB 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.

Examples

Default Navbar example.

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="mr-2" icon="home" /> Home
                        </CDBNavLink>
                      </CDBBtn>
                    </CDBNavItem>
                    <CDBNavItem>
                      <CDBBtn circle color="dark" style={{ padding: 0 }}>
                        <CDBNavLink to="#">
                          <CDBIcon className="mr-2" icon="feather" /> Features
                        </CDBNavLink>
                      </CDBBtn>
                    </CDBNavItem>
                    <CDBNavItem>
                      <CDBBtn circle color="dark" style={{ padding: 0 }}>
                        <CDBNavLink to="#">
                          <CDBIcon className="mr-2" icon="dollar-sign" />{" "}
                          Pricing
                        </CDBNavLink>
                      </CDBBtn>
                    </CDBNavItem>
                    <CDBNavItem>
                      <CDBDropDown>
                        <CDBDropDownToggle
                          caret
                          style={{ padding: 0 }}
                          color="dark"
                          circle
                        >
                          <CDBIcon className="mr-2" icon="cogs" /> Options
                        </CDBDropDownToggle>
                        <CDBDropDownMenu>
                          Coming soon #pleaseStayUpdated.
                        </CDBDropDownMenu>
                      </CDBDropDown>
                    </CDBNavItem>
                  </CDBNavbarNav>
                </CDBCollapse>
              </CDBNavbar>
        </Router>
    </CDBContainer>
  );
};
export default  Navbar;

Example 2

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="mr-2" icon="globe" />
                          EN
                        </CDBNavLink>
                      </CDBBtn>
                    </CDBNavItem>
                    <CDBNavItem>
                      <CDBBtn circle color="dark" style={{ padding: 0 }}>
                        <CDBNavLink to="#">
                          <CDBIcon className="mr-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;

API

In this section you will find advanced information about the Navbar component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Navbar Import Statement

You need to import the proper components first.

import { CDBNavbar } from "cdbreact";

API Reference: Contrast Navbar Properties

The table below shows the configuration options of the CDBNavbar component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBNavbar className="myClass" ... />
tag	String	nav	Changes default tag	<CDBNavbar tag="div" ... />
color	String	false	Sets navbar background color. Use mdb color palette	<CDBNavbar color="indigo" .../>
dark	Boolean	false	Change navbar's theme to dark (text color will be white)	<CDBNavbar dark .../>
light	Boolean	false	Change navbar's theme to light (text color will be black)	<CDBNavbar light .../>
double	Boolean	false	Allows navbar to be used along with Sidebar	<CDBNavbar double .../>
expand	Boolean or String	false	Determines on which viewport navbar should be expanded. Accepts: `xs`, `sm`, `md`, `lg`, `xl`. If empty - navbar won't ever collapse.	<CDBNavbar expand="xs" .../>
fixed	String		Sets Navbar position to fixed. Use `top` or `bottom` values	<CDBNavbar fixed="top" .../>
scrolling	Boolean	false	Changes Navbar's size on scroll. Combine with prop transparent to archive color changing effect	<CDBNavbar scrolling .../>
scrollingNavbarOffset	Number	50	Number of pixels after which the Navbar changes 'scrolling' state	<CDBNavbar scrollingNavbarOffset={100} .../>
transparent	Boolean	false	Sets Navbar background to transparent. Combine with prop `scrolling` and `color` to archive color changing effect	<CDBNavbar transparent .../>
sticky	String		enables navbar to stick to the when you reach its scroll position.	<CDBNavbar sticky="100%" .../>

API Reference: Contrast Navbar Brand Properties

The table below shows the configuration options of the CDBNavBrand component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBNavBrand className="myClass" ... />
href	String		Sets passed URL (component use react-router-dom)	<CDBNavBrand href="./components/custom" ... />

API Reference: Contrast Navbar Item Properties

The table below shows the configuration options of the CDBNavItem component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBNavItem className="myClass" ... />
active	Boolean		Sets active state of the NavItem	<CDBNavItem active ... />
tag	String	li	Changes default tag	<CDBNavItem tag="div" ... />

API Reference: Contrast Navbar Link Properties

The table below shows the configuration options of the CDBNavLink component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBNavLink className="myClass" ... />
active	Boolean		Sets active state of the NavLink	<CDBNavLink active ... />
tag	String	li	Changes default tag	<CDBNavLink tag="div" ... />
disabled	Boolean		Disables element, element could not be clicked	<CDBNavLink disabled ... />
to	String		Sets passed URL (component use react-router-dom)	<CDBNavBrand to="./components/custom" ... />
link	Boolean		Change NavLink to Link Component from 'react-router-dom'	<CDBNavLink link ... />

API Reference: Contrast Navbar Toggle Properties

The table below shows the configuration options of the CDBNavToggle component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBNavLink className="myClass" ... />
tag	function or String	button	Changes default tag	<CDBNavLink tag="button" ... />
type	String	button	Changes elements type attribute	<CDBNavLink type="button" ... />
image	String		Sets background-image of the toggler	<CDBNavBrand image="../asset/image" ... />
left	Boolean		Pulls element to the left side of the Navbar	<CDBNavLink left ... />
right	Boolean		Pulls element to the right side of the Navbar	<CDBNavLink right ... />

API Reference: Contrast Navbar Nav Properties

The table below shows the configuration options of the CDBNavbarNav component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBNavbarNav className="myClass" ... />
tag	function or String	ul	Changes default tag	<CDBNavbarNav tag="div" ... />
left	Boolean		Pulls element to the left side of the Navbar	<CDBNavbarNav left ... />
right	Boolean		Pulls element to the right side of the Navbar	<CDBNavbarNav right ... />

Stepper

Pagination