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

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.

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

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.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
color	String	false	Sets navbar background color. Use mdb color palette	color="indigo"
dark	Boolean	false	Change navbar's theme to dark (text color will be white)	dark=true
light	Boolean	false	Change navbar's theme to light (text color will be black)	light=true
double	Boolean	false	Allows navbar to be used along with Sidebar	double=true
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.	expand="xs"
fixed	String		Sets Navbar position to fixed. Use `top` or `bottom` values	fixed="top"
scrolling	Boolean	false	Changes Navbar's size on scroll. Combine with prop transparent to archive color changing effect	scrolling=true
scrollingNavbarOffset	Number	50	Number of pixels after which the Navbar changes 'scrolling' state	scrollingNavbarOffset=100
transparent	Boolean	false	Sets Navbar background to transparent. Combine with prop `scrolling` and `color` to archive color changing effect	transparent=true
sticky	String		enables 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.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
href	String		Sets passed URL	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
class	String		Adds custom classes	class="myClass"
active	Boolean		Sets active state of the NavItem	active=true

API Reference: Contrast Navbar Link Properties

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

Name	Type	Description	Example
className	String	Adds custom classes	class="myClass"
active	Boolean	Sets active state of the NavLink	active
disabled	Boolean	Disables element, element could not be clicked	<CDBNavLink disabled ... />
to	String	Sets passed URL	to="./components/custom"
link	Boolean	Change NavLink	link=true

API Reference: Contrast Navbar Toggle Properties

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

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
type	String	button	Changes elements type attribute	type="button"
image	String		Sets background-image of the toggler	image="../asset/image"
left	Boolean		Pulls element to the left side of the Navbar	left=true
right	Boolean		Pulls element to the right side of the Navbar	right=true

API Reference: Contrast Navbar Nav Properties

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

Name	Type	Description	Example
class	String	Adds custom classes	class="myClass"
left	Boolean	Pulls element to the left side of the Navbar	left=true
right	Boolean	Pulls element to the right side of the Navbar	right=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

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

Pagination

Sidebar2