Appbar

BsAppbar is a lightweight component which is placed at the top of the page as a container for page title, logo, menus, and action buttons which is usually known as Navigation Bar.

Examples

Basic usage

Page Title

With button and menus

CSS Variables

Added since v2.0.0

--md-appbar-bg: #fff;
--md-appbar-color: #212121;
--md-appbar-height: 64px;
--md-appbar-margin: 0.5rem 0.75rem 0.5rem 1rem;
--md-appbar-title-font-size: 1.5rem;
--md-appbar-title-font-weight: 400;

API Reference

BsAppbar

Property	Type	Default	Description
clipped-left	Boolean	false	Cut off the left side of the component. Use this property if BsSideDrawer is on the left.
clipped-right	Boolean	false	Cut off the right side of the component. Use this property if BsSideDrawer is on the right. v2.0.0
fixed-top	Boolean	false	Place the component fixed at the top of the page. See Bootstrap Position documentation.
sticky-top	Boolean	false	Stick the component at the top of the page. See Bootstrap Position documentation. v2.0.3
shadow	Boolean	false	Add shadow effect to the component.
tag	String	'nav'	Html tag used to render the component.

Name	Arguments	Description
resize	( target:HTMLElement)	Triggers when the component is resized. v2.0.0

Name	Description
default	The outlet slot used to place the main content.

BsAppbarItems

Optional component to create a component's container inside <bs-appbar> which may contains buttons, menus and others.

Name	Description
default	The outlet slot used to place the main content.

BsAppbarTitle

Lightweight component to put page title on Appbar.

Property	Type	Default	Description
title	String		The text to display.

Name	Description
default	The outlet slot used to place the custom content.