Design in Angular Appbar component

22 Sep 202518 minutes to read

Spacer

Spacer provides spacing between AppBar content elements, creating additional space in the content layout for better visual organization.

The following example demonstrates how to add spacing between the home and pan buttons in the AppBar:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppBarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from "@angular/core";

@Component({
imports: [ AppBarModule, ButtonModule],


standalone: true,
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonHome ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonCut ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonPan ejs-button cssClass="e-inherit" iconCss="e-icons e-pan"></button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Separator

Separator displays a vertical line that visually groups or separates AppBar content elements for improved organization.

The following example demonstrates how to add a vertical line between a group of buttons in the AppBar:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppBarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from "@angular/core";

@Component({
imports: [ AppBarModule, ButtonModule],


standalone: true,
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonCut ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
        <button #defaultButtonCopy ejs-button cssClass="e-inherit" iconCss="e-icons e-copy"></button>
        <button #defaultButtonPaste ejs-button cssClass="e-inherit" iconCss="e-icons e-paste"></button>
        <div class="e-appbar-separator"></div>
        <button #defaultButtonBold ejs-button cssClass="e-inherit" iconCss="e-icons e-bold"></button>
        <button #defaultButtonUnderline ejs-button cssClass="e-inherit" iconCss="e-icons e-underline"></button>
        <button #defaultButtonItalic ejs-button cssClass="e-inherit" iconCss="e-icons e-italic"></button>
        <div class="e-appbar-separator"></div>
        <button #defaultButtonAlignLeft ejs-button cssClass="e-inherit" iconCss="e-icons e-align-left"></button>
        <button #defaultButtonAlignRight ejs-button cssClass="e-inherit" iconCss="e-icons e-align-right"></button>
        <button #defaultButtonAlignCenter ejs-button cssClass="e-inherit" iconCss="e-icons e-align-center"></button>
        <button #defaultButtonJustify ejs-button cssClass="e-inherit" iconCss="e-icons e-justify"></button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Designing AppBar with Menu

The AppBar renders with a Menu component in its header area. The Menu component inherits styles from the AppBar component using the e-inherit CSS class, ensuring consistent theming and appearance.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppBarModule, MenuModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from "@angular/core";
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [ AppBarModule, ButtonModule, MenuModule],


standalone: true,
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <ejs-menu #defaultMenuCompany cssClass="e-inherit" [items]='companyMenuItems'></ejs-menu>
        <ejs-menu #defaultMenuProducts cssClass="e-inherit" [items]='productMenuItems'></ejs-menu>
        <ejs-menu #defaultMenuAbout cssClass="e-inherit" [items]='aboutMenuItems'></ejs-menu>
        <ejs-menu #defaultMenuCarrers cssClass="e-inherit" [items]='carrerMenuItems'></ejs-menu>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {
  public companyMenuItems: MenuItemModel[] = [
    {
        text : 'Company',
        items: [
            { text: 'About Us' },
            { text: 'Customers' },
            { text: 'Blog' },
            { text: 'Careers' }
        ]
    }
  ];
  public productMenuItems: MenuItemModel[] = [
    {
        text : 'Products',
        items: [
            { text: 'Developer' },
            { text: 'Analytics' },
            { text: 'Reporting' },
            { text: 'Help Desk' }
        ]
    }
  ];
  public aboutMenuItems: MenuItemModel[] = [
    {
        text : 'About Us'
    }
  ];
  public carrerMenuItems: MenuItemModel[] = [
    {
        text : 'Carrers'
    }
  ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Designing AppBar with Buttons

The AppBar renders with Button and DropDownButton components in its header area. These components inherit styles from the AppBar using the e-inherit CSS class, maintaining visual consistency across the interface.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppBarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'



import { Component } from "@angular/core";
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
imports: [ AppBarModule, ButtonModule, DropDownButtonModule],


standalone: true,
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <button #defaultDropDownButtonProduct ejs-dropdownbutton cssClass="e-inherit" [items]='productDropDownButtonItems' content="Products"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {
  public productDropDownButtonItems: ItemModel[] = [
    { text: 'Developer' },
    { text: 'Analytics' },
    { text: 'Reporting' },
    { text: 'E-Signature' },
    { text: 'Help Desk' }
  ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Designing AppBar with SideBar

The AppBar integrates with the SideBar component positioned below the AppBar. Click the menu icon to expand or collapse the Sidebar. This example uses the toggle method to show or hide the Sidebar when the AppBar button is clicked.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppBarModule, SidebarModule, TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'



import { Component, ViewChild } from "@angular/core";
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [ AppBarModule, ButtonModule, SidebarModule, TreeViewModule, TextBoxModule ],


standalone: true,
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-section" id="reswrapper">
        <div>
            <ejs-appbar>
                <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu" (click)="toggle()"></button>
                <div class="e-folder">
                    <div class="e-folder-name">Navigation Pane</div>
                </div>
            </ejs-appbar>
        </div>
        <ejs-sidebar id="sideTree" class="sidebar-treeview" #sidebarTreeviewInstance [width]="width" [target]="target" [mediaQuery]="mediaQuery" [isOpen]="true">
            <div class='main-menu'>
                <div class="table-content">
                    <ejs-textbox id="resSearch" placeholder="Search..."></ejs-textbox>
                    <p class="main-menu-header">TABLE OF CONTENTS</p>
                </div>
                <div>
                    <ejs-treeview id='mainTree' cssClass="main-treeview" [fields]="fields" expandOn='Click'>
                </ejs-treeview>
                </div>
            </div>
        </ejs-sidebar>
        <div class="main-sidebar-content" id="main-text">
            <div class="sidebar-content">
            <div class="sidebar-heading"> Responsive Sidebar with Treeview</div>
                <p class="paragraph-content">
                    This is a graphical aid for visualising and categorising the site, in the style of an expandable and
                    collapsable treeview component.
                    It auto-expands to display the node(s), if any, corresponding to the currently viewed title,
                    highlighting that node(s)
                    and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical
                    browsers),
                    falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered
                    so that
                    unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of
                    the treeview persists across page views in most situations.
                </p>
            </div>
        </div>
    </div>`,
})
export class AppComponent {
  @ViewChild('sidebarTreeviewInstance')
  public sidebarTreeviewInstance?: SidebarComponent;
  public data: { [key: string]: Object }[] = [
    {
        nodeId: '01', nodeText: 'Installation',
    },
    {
        nodeId: '02', nodeText: 'Deployment',
    },
    {
        nodeId: '03', nodeText: 'Quick Start',
    },
    {
        nodeId: '04', nodeText: 'Components',
        nodeChild: [
            { nodeId: '04-01', nodeText: 'Calendar' },
            { nodeId: '04-02', nodeText: 'DatePicker' },
            { nodeId: '04-03', nodeText: 'DateTimePicker' },
            { nodeId: '04-04', nodeText: 'DateRangePicker' },
            { nodeId: '04-05', nodeText: 'TimePicker' },
            { nodeId: '04-06', nodeText: 'SideBar' }
        ]
    }
  ];
  public width: string = '220px';
  public target: string = '.main-sidebar-content';
  public mediaQuery: string = '(min-width: 600px)';
  public fields: object = { dataSource: this.data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' };
  toggle() {
    (this.sidebarTreeviewInstance as SidebarComponent).toggle();
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Media Query

Media Query enables the AppBar to adapt to different screen sizes with responsive behavior. Resize the screen to observe how the AppBar layout adjusts dynamically.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppBarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from "@angular/core";

@Component({
imports: [ AppBarModule, ButtonModule],


standalone: true,
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <button #defaultButtonHome ejs-button cssClass="e-inherit">Home</button>
        <button #defaultButtonAbout ejs-button cssClass="e-inherit">About</button>
        <button #defaultButtonProducts ejs-button cssClass="e-inherit">Products</button>
        <button #defaultButtonContacts ejs-button cssClass="e-inherit">Contacts</button>
        <div class="e-appbar-spacer"></div>
        <div class="e-appbar-separator"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));