Vue AppBar - Lightweight and Fully Customizable Component

Size

Display the AppBar with predefined sizes: normal, long, or short. The size of an AppBar can be changed using the regular, prominent, and dense properties.

• Size demo
• Size documentation

Color

The AppBar has predefined background colors for different visual representations: light, dark, primary, and inherit.

• Color demo
• Color documentation

Position

A row of content can be aligned horizontally at the top or bottom of the AppBar.

• Position documentation

Sticky

AppBar can stick to the top of a page while scrolling the content.

• Sticky documentation

Content alignment

The Vue AppBar component aligns the content using a spacer and separator.

• Content alignment documentation

Responsive design

The AppBar layout will adjust automatically to the current screen size.

• Responsive design documentation

Separator

A separator is a vertical line that visually separates or groups items in an AppBar.

• Separator documentation

AppBar code example

Easily get started with the Vue AppBar using a few simple lines of Vue code, as demonstrated below. Also, explore our Vue AppBar example, which shows how to render and configure an AppBar in Vue.

<template>
<div class="col-lg-12 control-section">
    <div>
        <ejs-appbar colorMode="Primary">
            <ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
            <span class="regular" style="margin:0 5px">Vue AppBar</span>
            <div class="e-appbar-spacer"></div>
            <ejs-button cssClass="e-inherit">FREE TRIAL</ejs-button>
        </ejs-appbar>
    </div>
</div>
</template>

<script lang="ts">
import Vue from "vue";
import { AppBarPlugin  } from "@syncfusion/ej2-vue-navigations";
import { ButtonPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(AppBarPlugin);
Vue.use(ButtonPlugin);

export default Vue.extend({
  data: () => {
    return {};
  }
});
</script>

Other supported frameworks

The AppBar component is also available in our Blazor, React, Angular, and JavaScript frameworks. Check out the component on other platforms using these links:

• Blazor AppBar

• Angular AppBar

• React AppBar

• JavaScript AppBar