Sidebar2

Angular Bootstrap Sidebar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

By virtue of its clarity and simplicity it remarkably increases User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Multiple link embedding functionality enables you to implement more advanced content categorisation, which is almost essential within bigger projects.

Thanks to CDB you can easily implement Sidebar in your own projects, by using one of various, alluring Side Menus.

Navigation on the left is a live demo of Sidebar.

Sidebar example

html

<CDBSidebar textColor="#f4f4f4" backgroundColor="#000000">
    <CDBSidebarHeader [prefix]="icon">
        <ng-template #icon>
            <CDBIcon icon="bars" size="lg"></CDBIcon>
        </ng-template>
        Contrast
    </CDBSidebarHeader>
    <CDBSidebarContent>
        <CDBSidebarMenu>
            <CDBSidebarMenuItem icon="th-large" [suffix]="badge1">
                <ng-template #badge1>
                    <CDBBadge color="danger" size="small" borderType="pill">new</CDBBadge>
                </ng-template>
                Dashboard
            </CDBSidebarMenuItem>
            <CDBSidebarMenuItem icon="sticky-note" [suffix]="badge2">
                <ng-template #badge2>
                    <CDBBadge color="danger" size="small" borderType="pill">new</CDBBadge>
                </ng-template>
                Components
            </CDBSidebarMenuItem>
        </CDBSidebarMenu>
        <CDBSidebarMenu>
            <CDBSidebarSubMenu title="Sidemenu" icon="th" textColor="#f4f4f4" backgroundColor="#000000">
                <CDBSidebarMenuItem>submenu 1</CDBSidebarMenuItem>
                <CDBSidebarMenuItem>submenu 2</CDBSidebarMenuItem>
                <CDBSidebarMenuItem>submenu 3</CDBSidebarMenuItem>
            </CDBSidebarSubMenu>
            <CDBSidebarSubMenu title="Sidemenu2" icon="book" [suffix]="badge3" textColor="#f4f4f4"
                backgroundColor="#000000">
                <ng-template #badge3>
                    <CDBBadge color="danger" size="small" borderType="pill">new</CDBBadge>
                </ng-template>
                <CDBSidebarMenuItem>submenu 1</CDBSidebarMenuItem>
                <CDBSidebarMenuItem>submenu 2</CDBSidebarMenuItem>
                <CDBSidebarMenuItem>submenu 3</CDBSidebarMenuItem>
            </CDBSidebarSubMenu>
            <CDBSidebarSubMenu title="MultiLevel with Icon" icon="table" textColor="#f4f4f4"
                backgroundColor="#000000">
                <CDBSidebarMenuItem>submenu 1</CDBSidebarMenuItem>
                <CDBSidebarMenuItem>submenu 2</CDBSidebarMenuItem>
                <CDBSidebarSubMenu title="submenu 3" textColor="#f4f4f4" backgroundColor="#000000">
                    <CDBSidebarMenuItem>submenu 3.1</CDBSidebarMenuItem>
                    <CDBSidebarMenuItem>submenu 3.2</CDBSidebarMenuItem>
                    <CDBSidebarSubMenu title="subnt" textColor="#f4f4f4" backgroundColor="#000000">
                        <CDBSidebarMenuItem>submenu 3.3.1</CDBSidebarMenuItem>
                        <CDBSidebarMenuItem>submenu 3.3.2</CDBSidebarMenuItem>
                        <CDBSidebarMenuItem>submenu 3.3.3</CDBSidebarMenuItem>
                    </CDBSidebarSubMenu>
                </CDBSidebarSubMenu>
            </CDBSidebarSubMenu>
        </CDBSidebarMenu>
    </CDBSidebarContent>
    <div class="mt-auto">
        <CDBSidebarFooter style="text-align: center">
            <div class="sidebar-btn-wrapper" style="padding: 20px 5px">
                Sidebar Footer
            </div>
        </CDBSidebarFooter>
    </div>
</CDBSidebar>

API

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

Contrast Sidebar Bootstrap Modules used

import {SidebarModule } from 'cdbangular';

API Reference: Contrast Sidebar Inputs

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

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
textColor	String	#fff	Changes default input tag	textColor="#000"
backgroundColor	String	#000	Changes the text color	backgroundColor="#fff"

API Reference: Contrast CDBSidebarMenuItem Properties

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

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
icon	String		Adds font-awesome icon	icon="envelope"
iconClassName	String		Adds custom classes to icon element	iconClassName="custom_class" icon="envelope"
active	Boolean	false	Sets the menu item to active	active=true

API Reference: Contrast CDBSidebarSubMenu Properties

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

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
icon	String		Adds font-awesome icon	icon="envelope"
iconClassName	String		Adds custom classes to icon element	iconClassName="custom_class" icon="envelope"
active	Boolean	false	Sets the menu item to active	active=true
title	node		Sets the name of the sub menu	title="Submenu1"
defaultOpen	Boolean	false	Render opened Sidebar submenu at page load	defaultOpen=true
Open	Boolean	false	Sidebar sub menu toggles accordingly to this property (opens/closes on change)	Open=true

Pagination

Navbar