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

With button and menus

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-appbar and global CSS variables for better customization.

Updated in v2.2.0

Local CSSGlobal CSS

scss

.md-appbar {
  --md-appbar-bg: var(--appbar-background);
  --md-appbar-color: var(--appbar-foreground);
  --md-appbar-height: var(--appbar-height, 4rem);
  --md-appbar-padding: #{vars.$padding-sm (vars.$padding-md - 0.25) vars.$padding-sm vars.$padding-md};
  --md-appbar-title-font-size: 1.5rem;
  --md-appbar-title-font-weight: var(--font-weight-normal) ;
}

css

:root {
  --appbar-background: var(--background);
  --appbar-foreground: var(--foreground);
  --appbar-height: 4rem;
}

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`	`'header'`	HTML tag used to render the component. Updated in v2.2.0

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.

Appbar ​

Examples ​

Basic usage ​

With button and menus ​

CSS Variables ​

API Reference ​

BsAppbar ​

BsAppbarItems ​

BsAppbarTitle ​