Base UI

Topbar
Topbar Light
Topbar Dark
Topbar Light with Breadcrumb
Topbar Dark with Breadcrumb
Documentation
Available Parameters
Parameter Type Description
isFixedTop Boolean
Default : false 		Set true value for isFixedTop parameter to set the topbar fixed on top of page.
theme Text
Default : light 		Set variation for Breadcrumb component.
List of available variations :
  • light
  • dark
navbarMenu Array of Menu Item Set list of Menu items.
Example:
[
    {
        "id"      : "dashboard",
        "type"    : "item",

        "link"    : "javascript:void()",
        "title"   : "Dashboard",

        "icon"    : "ic-menu-dashboard",
    }
]
activeMenu Text Set ID for activated menu in topbar.
navbarRightMenu Array of Menu Item Set list of Menu items that will be displayed on the right side of topbar.
Example:
[
    {
        "link"    : "javascript:void()",
        
        "icon"    : "ic-bell",
        "badge"   : "bg-danger"
    }
]
navbarAvatar Avatar Object Set configuration for avatar in topbar.
Example:
{
    "image"       : "avatar-1.png",
    "text"        : "Charles Quitzon"
}
Starter Kit Codes
Starter Kit Code 
 {# include components/navbar  #}
 {% include "../../components/navbar.twig", with {
    	isFixedTop		: false,
	theme		: 'light',
	breadcrumbItems	: false,
	navbarMenu		: [
		{
			id 		: 'dashboard',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Dashboard',

			icon		: 'ic-menu-dashboard',
		},
		{
			id		: 'calendar',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Calendar',

			icon		: 'ic-menu-calendar',
		},
		{
			id		: 'chat',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Chat',

			icon		: 'ic-menu-chat',
		},
		{
			id 		: 'email',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Email',

			icon		: 'ic-menu-email',
		},
	],
	activeMenu			: 'dashboard',
	navbarRightMenu		: [
		{
			link		: 'javascript:void()',
			
			icon		: 'ic-bell',
			badge	: 'bg-danger'
		},
	],
	navbarAvatar	 : {
		image		: 'avatar-1.png',
	}
 } %}
Starter Kit Code 
 {# include components/navbar  #}
 {% include "../../components/navbar.twig", with {
    	isFixedTop		: false,
	theme		: 'dark',
	breadcrumbItems	: false,
	navbarMenu		: [
		{
			id 		: 'dashboard',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Dashboard',

			icon		: 'ic-menu-dashboard white',
		},
		{
			id		: 'calendar',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Calendar',

			icon		: 'ic-menu-calendar white',
		},
		{
			id		: 'chat',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Chat',

			icon		: 'ic-menu-chat white',
		},
		{
			id 		: 'email',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Email',

			icon		: 'ic-menu-email white',
		},
	],
	activeMenu			: 'dashboard',
	navbarRightMenu		: [
		{
			link		: 'javascript:void()',
			
			icon		: 'ic-bell white',
			badge	: 'bg-danger'
		},
	],
	navbarAvatar	 : {
		image		: 'avatar-1.png',
	}
 } %}
Starter Kit Code 
 {# include components/navbar  #}
 {% include "../../components/navbar.twig", with {
    	isFixedTop		: false,
	theme		: 'light',
	breadcrumbItems	: [
		{
			title	: 'Base UI'
		},
		{
			isActive: true,
			title 	: 'Topbar Light'
		}
	],
	navbarRightMenu		: [
		{
			link		: 'javascript:void()',
			
			icon		: 'ic-gear',
		},
		{
			link		: 'javascript:void()',
			
			icon		: 'ic-bell',
			badge	: 'bg-danger'
		},
	],
	navbarAvatar	 : {
		image		: 'avatar-1.png',
		text		: 'Charles Quitzon'
	}
 } %}
Starter Kit Code 
 {# include components/navbar  #}
 {% include "../../components/navbar.twig", with {
    	isFixedTop		: false,
	theme		: 'dark',
	breadcrumbItems	: [
		{
			title	: 'Base UI'
		},
		{
			isActive: true,
			title 	: 'Topbar Dark'
		}
	],
	navbarRightMenu		: [
		{
			link		: 'javascript:void()',
			
			icon		: 'ic-gear white',
		},
		{
			link		: 'javascript:void()',
			
			icon		: 'ic-bell white',
			badge	: 'bg-danger'
		},
	],
	navbarAvatar	 : {
		image		: 'avatar-1.png',
		text		: 'Charles Quitzon'
	}	
 } %}