New Contrast Pro UI Kit and template with 5 admin dashboards, 23 pages and 10000+ components for $49 ($50 off)🎉

Navbar

ad-banner

Navbar

Angular Bootstrap 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.

image info

html
<header>
<CDBNavbar style="background-color: black;" [dark]=true expand="lg" [scrolling]=true>
<CDBNavBrand href="/">
<strong>Navbar</strong>
</CDBNavBrand>
<CDBNavToggle (click)="content.toggleCollapse()"></CDBNavToggle>
<CDBCollapse #content class="w-100" [navbar]=true expand="lg">
<CDBNavbarNav [left]=true>
<CDBNavItem>
<CDBNavLink to="/" style="color: #ffffff">
<CDBIcon [fab]=true icon="facebook-f"></CDBIcon>
</CDBNavLink>
</CDBNavItem>
<CDBNavItem>
<CDBNavLink to="/" style="color: #ffffff">
<CDBIcon [fab]=true icon="twitter"></CDBIcon>
</CDBNavLink>
</CDBNavItem>
<CDBNavItem>
<CDBNavLink to="/" style="color: #ffffff">
<CDBIcon [fab]=true icon="instagram"></CDBIcon>
</CDBNavLink>
</CDBNavItem>
</CDBNavbarNav>
<CDBNavbarNav [right]=true class="align-items-center">
<CDBNavItem [active]=true>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">
<CDBIcon class="mr-2" icon="home"></CDBIcon> Home
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="#" style="color: #ffffff">
<CDBIcon class="mr-2" icon="feather"></CDBIcon> Features
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="#" style="color: #ffffff">
<CDBIcon class="mr-2" icon="dollar-sign"></CDBIcon>
Pricing
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBDropDown>
<CDBDropDownToggle [caretDropDown]=true style="padding: 0" color="dark"
(click)="menu.toggleDropdown($event)">
<CDBIcon class="mr-2" icon="cogs"></CDBIcon> Options
</CDBDropDownToggle>
<CDBDropDownMenu #menu="cdbDropdownMenu" placement="bottom">
Coming soon #pleaseStayUpdated.
</CDBDropDownMenu>
</CDBDropDown>
</CDBNavItem>
</CDBNavbarNav>
</CDBCollapse>
</CDBNavbar>
</header>

Example 2

image info

html
<header>
<CDBNavbar style="background: black; color: #f4f4f4" [dark]=true expand="lg" [scrolling]=true>
<CDBNavBrand>
<strong>Navbar</strong>
</CDBNavBrand>
<CDBNavToggle (click)="content2.toggleCollapse()" image="/assets/img/ball.png"></CDBNavToggle>
<CDBCollapse #content2 class="w-100" [navbar]=true expand="lg">
<CDBNavbarNav [left]=true class="align-items-center">
<CDBNavItem>
<CDBDropDown>
<CDBDropDownToggle [caretDropDown]=true style="padding: 0" color="dark"
(click)="menu2.toggleDropdown($event)">
Categories
</CDBDropDownToggle>
<CDBDropDownMenu #menu2="cdbDropdownMenu" placement="bottom">
Coming soon #pleaseStayUpdated.
</CDBDropDownMenu>
</CDBDropDown>
</CDBNavItem>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">Help</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">About</CDBNavLink>
</CDBBtn>
</CDBNavItem>
</CDBNavbarNav>
<CDBNavbarNav [right]=true>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">
<CDBIcon class="mr-2" icon="globe"></CDBIcon>
EN
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">
<CDBIcon class="mr-2" icon="user"></CDBIcon>
Login
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn color="white" style="padding: 0">
<CDBNavLink to="/" style="color: #000000;">
Sign Up
</CDBNavLink>
</CDBBtn>
</CDBNavItem>
</CDBNavbarNav>
</CDBCollapse>
</CDBNavbar>
</header>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast Navbar Bootstrap Modules used

import {NavbarModule } from 'cdbangular';

API Reference: Contrast Navbar Inputs

The table below shows the possible input of the Navbar component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
colorStringfalseSets navbar background color. Use mdb color palettecolor="indigo"
darkBooleanfalseChange navbar's theme to dark (text color will be white)dark=true
lightBooleanfalseChange navbar's theme to light (text color will be black)light=true
doubleBooleanfalseAllows navbar to be used along with Sidebardouble=true
expandBoolean or StringfalseDetermines on which viewport navbar should be expanded. Accepts: xs, sm, md, lg, xl. If empty - navbar won't ever collapse.expand="xs"
fixedStringSets Navbar position to fixed. Use top or bottom valuesfixed="top"
scrollingBooleanfalseChanges Navbar's size on scroll. Combine with prop transparent to archive color changing effectscrolling=true
scrollingNavbarOffsetNumber50Number of pixels after which the Navbar changes 'scrolling' statescrollingNavbarOffset=100
transparentBooleanfalseSets Navbar background to transparent. Combine with prop scrolling and color to archive color changing effecttransparent=true
stickyStringenables navbar to stick to the when you reach its scroll position.sticky="100%"

API Reference: Contrast Navbar Brand Properties

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

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
hrefStringSets passed URLhref="./components/custom"

API Reference: Contrast Navbar Item Properties

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

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
activeBooleanSets active state of the NavItemactive=true

API Reference: Contrast Navbar Link Properties

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

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesclass="myClass"
activeBooleanSets active state of the NavLinkactive
disabledBooleanDisables element, element could not be clicked<CDBNavLink disabled ... />
toStringSets passed URLto="./components/custom"
linkBooleanChange NavLinklink=true

API Reference: Contrast Navbar Toggle Properties

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

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
typeStringbuttonChanges elements type attributetype="button"
imageStringSets background-image of the togglerimage="../asset/image"
leftBooleanPulls element to the left side of the Navbarleft=true
rightBooleanPulls element to the right side of the Navbarright=true

API Reference: Contrast Navbar Nav Properties

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

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
leftBooleanPulls element to the left side of the Navbarleft=true
rightBooleanPulls element to the right side of the Navbarright=true

Create Stunning websites and web apps

Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro.Try contrast pro

ad-banner

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components.Learn more about Contrast Pro