🤩
Windframe Import Update is finally here.

Navbar

Angular Bootstrap Navbar

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

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

Default Navbar

In this section of the tutorial we use the CDBDropDown component to have dropdowns in our Navbar, the CDBBtncomponent for our buttons, the CDBIcon component for our icons, and the CDBCollapse component alongside the CDBNavbar component. For more information, check out our docs .

Angular Bootstrap Navbar Default

html
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>

Layout 2

Angular Bootstrap Navbar Layout 2

html
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

typescript
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

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast