Syncfusion Angular Appbar

Implementing Syncfusion Angular AppBar

The Syncfusion Angular AppBar component is a flexible navigation component also known as an action bar or nav bar. It displays information and actions related to the current application screen and is used to show branding, screen titles, navigation, and actions. The AppBar supports height modes, color modes, positioning, and integrates seamlessly with other Syncfusion components like Buttons, Menus, and Sidebars.

When to Use This Skill

• Navigation Headers: Creating top or bottom navigation bars for applications
• Sticky Headers: Building persistent headers that stay visible while scrolling
• Responsive Navigation: Designing navigation that adapts to different screen sizes
• Component Integration: Combining AppBar with Buttons, Menus, DropDownButtons, and Sidebars
• Branding & Layout: Displaying logos, titles, and action buttons
• Visual Styling: Customizing AppBar appearance with size modes and color themes
• Content Spacing: Using spacers and separators to organize AppBar content

Component Overview

The AppBar component provides:

• Positioning options: Top (default), Bottom, Sticky
• Size modes: Regular (default), Prominent (tall), Dense (compact)
• Color modes: Light, Dark, Primary, Inherit
• Built-in spacing: Spacer elements and Separators for content organization
• Component integration: Works with Buttons, DropDownButtons, Menus, and Sidebars
• Customization: CSS classes, custom styling, and theme support

Documentation and Navigation Guide

Choose the reference that matches your task:

Getting Started

📄 Read: references/getting-started.md

• Angular environment setup and Angular CLI installation
• Syncfusion AppBar package installation (Ivy and ngcc versions)
• Basic component implementation
• CSS imports and theme configuration
• Running the application

Positioning and Layout

📄 Read: references/positioning-and-layout.md

• Top AppBar positioning (default)
• Bottom AppBar positioning
• Sticky AppBar behavior during scrolling
• Position and isSticky property configuration
• Examples for each positioning type

Sizing and Colors

📄 Read: references/sizing-and-colors.md

• Size modes: Regular, Prominent, Dense (mode property)
• Color modes: Light, Dark, Primary, Inherit (colorMode property)
• Visual customization with different combinations
• Height adjustments for Prominent AppBar
• Comprehensive examples for all configurations

Design Patterns

📄 Read: references/design-patterns.md

• Spacer element for spacing between AppBar content
• Separator element for visual grouping
• AppBar with Menu component integration
• AppBar with Button and DropDownButton integration
• AppBar with Sidebar integration
• Media queries for responsive behavior

Styling and Customization

📄 Read: references/styling-and-customization.md

• Built-in CSS classes (.e-appbar, .e-prominent, .e-dense, .e-light, .e-dark, .e-primary, .e-inherit)
• CssClass property for custom styling
• HtmlAttributes directive for inline attributes
• Theme Studio integration
• Custom theming and styling approaches

API Reference

📄 Read: references/api-reference.md - Complete API Documentation

• All 9 properties with usage examples and defaults
• All 2 events (created, destroyed) with examples
• CSS classes and HTML elements
• Property combinations and patterns
• Accessibility and internationalization

Quick Start

Here's a minimal AppBar implementation:

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

@Component({
  imports: [AppBarModule, ButtonModule],
  standalone: true,
  selector: "app-root",
  template: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <span style="margin: 0 5px">Angular AppBar</span>
        <div class="e-appbar-spacer"></div>
        <button ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>
  `
})
export class AppComponent { }

Add CSS imports to your style.css:

@import "../node_modules/@syncfusion/ej2-base/styles/material3";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3";

Common Patterns

Pattern 1: Spacer for Content Distribution

Use .e-appbar-spacer to push content to the ends:

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">FREE TRIAL</button>
</ejs-appbar>

Pattern 2: Separator for Content Grouping

Use .e-appbar-separator to visually separate button groups:

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-copy"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-paste"></button>
  <div class="e-appbar-separator"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-bold"></button>
</ejs-appbar>

Pattern 3: Bottom Positioned AppBar

Set position to Bottom for footer-style navigation:

<ejs-appbar colorMode="Primary" position="Bottom">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">Settings</button>
</ejs-appbar>

Pattern 4: Sticky Header

Use isSticky property for headers that persist while scrolling:

<ejs-appbar colorMode="Primary" [isSticky]="true">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>My App</span>
</ejs-appbar>

Key Properties Reference

→ See [API Reference](references/api-reference.md) for complete API documentation with examples

Related Syncfusion Components

• Button - Interactive buttons within AppBar
• DropDownButton - Dropdown menus in AppBar
• Menu - Menu bar integration
• Sidebar - Side navigation alongside AppBar
• Toolbar - Similar action bar component with different styling

---

Ready to implement? Start with references/getting-started.md to set up your first AppBar, or jump to the specific reference that matches your use case.

API Reference - Syncfusion Angular AppBar

Table of Contents

• Properties
• Events
• CSS Classes
• HTML Elements

---

Properties

position

Type: "Top" | "Bottom" Default: "Top"

Specifies the position of the AppBar on the page. The AppBar can be positioned at the top or bottom of the viewport.

Example - Top Position:

<ejs-appbar position="Top" colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
</ejs-appbar>

Example - Bottom Position:

<ejs-appbar position="Bottom" colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
</ejs-appbar>

---

isSticky

Type: boolean Default: false

Defines whether the AppBar position is fixed while scrolling the page. When set to true, the AppBar remains visible at its position while the user scrolls through the page content.

Example - Sticky AppBar:

<ejs-appbar [isSticky]="true" colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>My App</span>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">Login</button>
</ejs-appbar>

<!-- Content that scrolls -->
<div class="page-content">
  <p>Scrollable content goes here...</p>
</div>

---

mode

Type: "Regular" | "Prominent" | "Dense" Default: "Regular"

Specifies the height mode of the AppBar. Controls the overall appearance and available space for content:

• Regular: Standard height (~56px) - suitable for most applications
• Prominent: Larger height (~128px) - for emphasis, large titles, or images
• Dense: Compressed height (~48px) - for space-constrained layouts

Example - Regular Mode (Default):

<ejs-appbar mode="Regular" colorMode="Primary">
  <span>Regular AppBar</span>
</ejs-appbar>

Example - Prominent Mode:

<ejs-appbar mode="Prominent" colorMode="Primary">
  <span class="prominent-title">Prominent AppBar with Large Title</span>
</ejs-appbar>

Example - Dense Mode:

<ejs-appbar mode="Dense" colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>Compact AppBar</span>
</ejs-appbar>

---

colorMode

Type: "Light" | "Dark" | "Primary" | "Inherit" Default: "Light"

Specifies the color theme of the AppBar:

• Light: Light background with dark text - minimal, professional appearance
• Dark: Dark background with light text - modern, sleek appearance
• Primary: Primary brand color background with light text - branded, prominent
• Inherit: Inherits colors from parent element - useful for custom backgrounds

Example - Light Mode (Default):

<ejs-appbar colorMode="Light">
  <button ejs-button cssClass="e-inherit">Navigation</button>
</ejs-appbar>

Example - Dark Mode:

<ejs-appbar colorMode="Dark">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
</ejs-appbar>

Example - Primary Mode:

<ejs-appbar colorMode="Primary">
  <span>Branded AppBar</span>
</ejs-appbar>

Example - Inherit Mode:

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  <ejs-appbar colorMode="Inherit">
    <button ejs-button cssClass="e-inherit">Custom Background</button>
  </ejs-appbar>
</div>

---

cssClass

Type: string

Accepts single or multiple CSS classes (separated by spaces) for custom styling of the AppBar. Use this to apply application-specific styles without modifying component internals.

Example - Single Class:

<ejs-appbar colorMode="Primary" cssClass="custom-appbar">
  <span>Styled AppBar</span>
</ejs-appbar>

CSS:

.custom-appbar.e-appbar {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 12px 24px;
}

Example - Multiple Classes:

<ejs-appbar 
  colorMode="Primary" 
  cssClass="custom-appbar shadowed-appbar responsive-appbar">
  <span>Multi-classed AppBar</span>
</ejs-appbar>

CSS:

.shadowed-appbar { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
.responsive-appbar { padding: 12px 8px; }

@media (min-width: 768px) {
  .responsive-appbar { padding: 16px 24px; }
}

---

enablePersistence

Type: boolean Default: false

Enable or disable persisting the AppBar component's state between page reloads. When enabled, the component state is saved to browser localStorage and restored on subsequent visits.

Example - With Persistence:

<ejs-appbar 
  colorMode="Primary" 
  [enablePersistence]="true">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
</ejs-appbar>

Use Case: Useful for remembering user preferences or AppBar state (though basic AppBar state is typically not heavily persisted).

---

enableRtl

Type: boolean Default: false

Enable or disable rendering the AppBar in right-to-left (RTL) direction. Set to true for languages that read right-to-left (Arabic, Hebrew, Urdu, etc.).

Example - RTL Support:

<ejs-appbar 
  colorMode="Primary" 
  [enableRtl]="true">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>تطبيقي</span>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">تسجيل الدخول</button>
</ejs-appbar>

CSS for RTL:

.e-appbar[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

---

htmlAttributes

Type: Record<string, any>

Accepts HTML attributes/custom attributes that will be applied directly to the AppBar DOM element. Useful for accessibility, data attributes, or custom properties.

Example - With Accessibility Attributes:

<ejs-appbar 
  colorMode="Primary"
  aria-label="Main application header"
  role="banner"
  data-theme="primary">
  <button 
    ejs-button 
    cssClass="e-inherit" 
    aria-label="Open menu"
    iconCss="e-icons e-menu">
  </button>
</ejs-appbar>

Example - With Custom Data Attributes:

<ejs-appbar 
  colorMode="Primary"
  [htmlAttributes]="{ 'data-section': 'header', 'data-tracked': 'true' }">
  <span>Tracked AppBar</span>
</ejs-appbar>

Component TypeScript:

export class AppComponent {
  htmlAttrs = {
    'data-section': 'header',
    'data-tracked': 'true',
    'aria-label': 'Main navigation'
  };
}

---

locale

Type: string Default: "en-US"

Overrides the global culture and localization value for this specific AppBar component. Set to different locale codes for multi-language support.

Example - With Locale:

<ejs-appbar 
  colorMode="Primary" 
  locale="ar-AE">
  <span>معلومات المحلية</span>
</ejs-appbar>

Supported Locales:

• en-US (English - US, default)
• ar-AE (Arabic)
• de-DE (German)
• fr-FR (French)
• ja-JP (Japanese)
• zh-CN (Chinese Simplified)
• es-ES (Spanish)
• And many others supported by Angular i18n

---

Events

created

Type: EmitType<Event>

Triggered after the AppBar component is created and fully initialized.

Usage:

<ejs-appbar 
  colorMode="Primary"
  (created)="onAppBarCreated()">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
</ejs-appbar>

Component TypeScript:

export class AppComponent {
  onAppBarCreated() {
    console.log('AppBar component created');
    // Perform initialization tasks
  }
}

Use Case: Initialize event handlers, load dynamic content, or trigger parent component updates after the AppBar is ready.

---

destroyed

Type: EmitType<Event>

Triggered when the AppBar component is destroyed or removed from the DOM.

Usage:

<ejs-appbar 
  colorMode="Primary"
  (destroyed)="onAppBarDestroyed()">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
</ejs-appbar>

Component TypeScript:

export class AppComponent {
  onAppBarDestroyed() {
    console.log('AppBar component destroyed');
    // Clean up resources, listeners, etc.
  }
}

Use Case: Clean up resources, remove event listeners, or save final state before the component is removed.

---

CSS Classes

The AppBar component automatically applies CSS classes based on configuration. These classes can be targeted for custom styling.

Base Classes

Position Classes

Mode Classes

Color Classes

CSS Customization Example:

/* Target prominent dark AppBar */
.e-appbar.e-prominent.e-dark {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Target regular primary AppBar */
.e-appbar.e-regular.e-primary {
  border-bottom: 2px solid #1976d2;
}

/* Target dense light AppBar */
.e-appbar.e-dense.e-light {
  border-bottom: 1px solid #e0e0e0;
}

---

HTML Elements

Spacer Element

Class: .e-appbar-spacer

Creates flexible spacing within the AppBar. Uses flexbox to distribute available space.

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit">Left</button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">Right</button>
</ejs-appbar>

CSS:

.e-appbar-spacer {
  flex: 1;
}

---

Separator Element

Class: .e-appbar-separator

Displays a vertical line that visually groups or separates AppBar content.

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-copy"></button>
  <div class="e-appbar-separator"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-paste"></button>
</ejs-appbar>

CSS:

.e-appbar-separator {
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 8px;
}

---

Complete Property Reference Table

Complete Events Reference Table

---

API Combinations

Common Property Combinations

Top Sticky Navigation:

<ejs-appbar 
  position="Top" 
  [isSticky]="true" 
  mode="Regular" 
  colorMode="Primary">
</ejs-appbar>

Prominent Branded Header:

<ejs-appbar 
  mode="Prominent" 
  colorMode="Primary"
  cssClass="branded-header">
</ejs-appbar>

Dense Dark Toolbar:

<ejs-appbar 
  mode="Dense" 
  colorMode="Dark"
  cssClass="toolbar">
</ejs-appbar>

RTL-Enabled AppBar:

<ejs-appbar 
  [enableRtl]="true"
  locale="ar-AE"
  colorMode="Primary">
</ejs-appbar>

Accessible Navigation:

<ejs-appbar 
  colorMode="Primary"
  role="banner"
  aria-label="Main navigation">
</ejs-appbar>

---

Next: Explore specific features in Design Patterns or Styling and Customization.

Design Patterns in Angular AppBar

Table of Contents

• Overview
• Spacer Pattern
• Separator Pattern
• AppBar with Menu
• AppBar with Buttons
• AppBar with Sidebar
• Responsive AppBar

Overview

The AppBar component can be combined with other Syncfusion components and CSS elements to create flexible navigation layouts. This section covers common design patterns and integration techniques.

Spacer Pattern

The .e-appbar-spacer element creates flexible spacing within the AppBar. It automatically distributes available space, allowing you to push content to the ends or create balanced layouts.

Basic Spacer Usage

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: `
    <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 { }

How Spacer Works

The spacer uses flexbox to distribute space:

• flex: 1 - Takes up available space
• Multiple spacers divide space equally
• Creates responsive layouts automatically

Spacer Patterns

Pattern 1: Two-End Layout (Navigation | Actions)

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>MyApp</span>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-user"></button>
</ejs-appbar>

Pattern 2: Centered Content

<ejs-appbar colorMode="Primary">
  <div class="e-appbar-spacer"></div>
  <span style="text-align: center">Centered Title</span>
  <div class="e-appbar-spacer"></div>
</ejs-appbar>

Pattern 3: Three-Section Layout

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <div class="e-appbar-spacer"></div>
  <span>Brand Logo</span>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-user"></button>
</ejs-appbar>

Separator Pattern

The .e-appbar-separator element displays a vertical line that visually groups or separates AppBar content elements.

Basic Separator Usage

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: `
    <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 { }

Separator Styling

/* Separator is a simple div with vertical line styling */
.e-appbar-separator {
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.3); /* Transparent white for dark backgrounds */
}

When to Use Separators

• Group related buttons functionally
• Create visual sections in toolbar-like AppBars
• Separate navigation from actions
• Enhance readability in dense layouts

AppBar with Menu

The AppBar integrates seamlessly with the Menu component. The Menu inherits the AppBar's styling using the cssClass="e-inherit" attribute.

AppBar with Menu Example

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: `
    <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 #defaultMenuCareers cssClass="e-inherit" [items]='careerMenuItems'></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 careerMenuItems: MenuItemModel[] = [
    { text: 'Careers' }
  ];
}

Key Implementation Points

• e-inherit class: Critical for menus to inherit AppBar styling
• Multiple menus: Can add multiple menu components horizontally
• Submenu support: Menu items can have child items for nested navigation
• Responsive: Menus adapt to mobile layouts

AppBar with Buttons

The AppBar can contain Button and DropDownButton components that inherit AppBar styling for visual consistency.

AppBar with Buttons and DropDownButtons Example

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: `
    <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' }
  ];
}

Button Integration Pattern

<ejs-appbar colorMode="Primary">
  <!-- Icon buttons -->
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  
  <!-- Dropdown button -->
  <button ejs-dropdownbutton cssClass="e-inherit" [items]='items'>
    Menu
  </button>
  
  <!-- Spacer to separate groups -->
  <div class="e-appbar-spacer"></div>
  
  <!-- Text button -->
  <button ejs-button cssClass="e-inherit">Action</button>
</ejs-appbar>

AppBar with Sidebar

The AppBar integrates with the Sidebar component for navigation pane patterns. Clicking a menu button toggles the sidebar visibility.

AppBar with Sidebar Example

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: `
    <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 responsive navigation pattern combining AppBar and Sidebar.
          </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();
  }
}

AppBar + Sidebar Pattern Details

• Click handler: Toggle button calls sidebar's toggle() method
• Target property: Sidebar targets .main-sidebar-content for responsive behavior
• TreeView integration: Sidebar contains searchable navigation tree
• Responsive: MediaQuery shows/hides sidebar on mobile/desktop

Responsive AppBar

Create responsive AppBars that adapt to different screen sizes using CSS media queries.

Responsive AppBar Example

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: `
    <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 mobile-hidden">Home</button>
        <button #defaultButtonAbout ejs-button cssClass="e-inherit mobile-hidden">About</button>
        <button #defaultButtonProducts ejs-button cssClass="e-inherit mobile-hidden">Products</button>
        <button #defaultButtonContacts ejs-button cssClass="e-inherit mobile-hidden">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 { }

Responsive CSS

/* Desktop: Show all buttons */
.mobile-hidden {
  display: inline-flex;
}

/* Mobile: Hide non-critical buttons */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

/* Tablet: Show some buttons */
@media (min-width: 769px) and (max-width: 1024px) {
  .mobile-hidden:nth-child(3),
  .mobile-hidden:nth-child(4) {
    display: none;
  }
}

Media Query Pattern Details

• Desktop (>1024px): Show all navigation items
• Tablet (769-1024px): Show reduced navigation
• Mobile (<768px): Show only essential items (hamburger menu)

Best Practices

1. Use e-inherit class: Ensures components inherit AppBar styling 2. Apply spacers strategically: Use for layout distribution, not random spacing 3. Group with separators: Visually organize related buttons/menus 4. Keep mobile-first: Design responsive AppBars for mobile screens first 5. Limit content: Avoid overcrowding AppBar with too many items 6. Consistent theming: Use same colorMode and mode throughout app 7. Accessibility: Use icon buttons with text labels or aria-labels 8. Test responsiveness: Verify AppBar works on all screen sizes

Getting Started with Angular AppBar

Table of Contents

• Prerequisites
• Angular CLI Setup
• Creating a New Application
• Installing Syncfusion AppBar Package
• Adding AppBar Component
• Adding CSS References
• Running the Application

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js and npm package manager
• Basic understanding of Angular and TypeScript
• An Angular development environment

Angular CLI Setup

Install Angular CLI globally on your machine:

npm install -g @angular/cli

To install a specific version of Angular CLI (e.g., Angular 21):

npm install -g @angular/cli@21.0.0

Creating a New Application

Create a new Angular application using the Angular CLI:

ng new syncfusion-angular-app

During project setup, you'll be prompted to: 1. Configure stylesheet format (CSS, SCSS, LESS, or Sass) 2. Choose Server-side rendering (SSR) configuration 3. Select an AI tool integration (or 'none')

By default, a CSS-based application is created. To use SCSS:

ng new syncfusion-angular-app --style=scss

Navigate to your new project directory:

cd syncfusion-angular-app

Note: In Angular 20+, the CLI generates simpler structure with src/app/app.ts, app.html, and app.css. In Angular 19 and below, files use the .component.ts suffix.

Installing Syncfusion AppBar Package

Syncfusion packages are distributed as scoped @syncfusion npm packages. Currently, two package structures are available:

Ivy Library Distribution (Angular 12+)

For Angular 12 and above, install the modern Ivy library distribution:

npm install @syncfusion/ej2-angular-navigations --save

This package includes all navigation components and is compatible with Angular 12+.

Angular Compatibility Compiler Package (Angular <12)

For Angular versions below 12, use the legacy ngcc (Angular compatibility compiler) package:

npm install @syncfusion/ej2-angular-navigations@ngcc --save

Update your package.json to include the ngcc suffix:

{
  "dependencies": {
    "@syncfusion/ej2-angular-navigations": "20.2.38-ngcc"
  }
}

Note: If the ngcc tag is not specified during installation, the Ivy Library Package will be installed and may throw a warning.

Dependencies

The AppBar module has the following dependency structure:

@syncfusion/ej2-angular-navigations
├── @syncfusion/ej2-angular-base
├── @syncfusion/ej2-navigations
│   └── @syncfusion/ej2-base

These dependencies are installed automatically with the navigations package.

Adding AppBar Component

Modify your component file to import and use the AppBar:

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

@Component({
  imports: [AppBarModule, ButtonModule],
  standalone: true,
  selector: "app-root",
  template: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #regularBtn ejs-button cssClass="e-inherit menu" iconCss="e-icons e-menu"></button>
        <span class="regular" style="margin: 0 5px">Angular AppBar</span>
        <div class="e-appbar-spacer"></div>
        <button ejs-button cssClass="e-inherit login">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `
})
export class AppComponent { }

Key Implementation Points

1. Import AppBarModule: Required to use the ejs-appbar component 2. Standalone: true: Modern Angular uses standalone components 3. cssClass="e-inherit": Buttons inside AppBar inherit the AppBar's theme styling 4. colorMode="Primary": Sets the AppBar to use primary theme colors 5. e-appbar-spacer: Creates flexible space to push content apart

Adding CSS References

Add the required Syncfusion CSS imports to your global style.css file:

@import "../node_modules/@syncfusion/ej2-base/styles/material3";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3";

Available Theme Options:

• material3 (Material Design 3 - modern default)
• material (Material Design)
• bootstrap5 (Bootstrap 5 theme)
• bootstrap4 (Bootstrap 4 theme)
• fluent2 (Microsoft Fluent 2 theme)
• tailwindcss (Tailwind CSS theme)
• highcontrast (High contrast for accessibility)

Choose one theme based on your design requirements. If needed, you can import multiple theme files for different components.

Running the Application

Start the development server:

ng serve

Open your browser and navigate to:

http://localhost:4200

The application will automatically reload when you make code changes.

Complete Example

Here's a complete, production-ready AppBar example:

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #regularBtn ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <span class="regular" style="margin: 0 5px">Angular AppBar</span>
        <div class="e-appbar-spacer"></div>
        <button ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Bootstrap the application:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Production Example with Properties

Real-world example demonstrating key properties and events:

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { AppBarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

@Component({
  imports: [AppBarModule, ButtonModule],
  standalone: true,
  selector: "app-root",
  template: `
    <div class="control-container">
      <ejs-appbar 
        #appbar
        colorMode="Primary"
        mode="Regular"
        position="Top"
        [isSticky]="true"
        [enableRtl]="false"
        [enablePersistence]="true"
        (created)="onAppBarCreated()"
        (destroyed)="onAppBarDestroyed()">
        <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu" (click)="toggleMenu()"></button>
        <span class="app-title">My Application</span>
        <div class="e-appbar-spacer"></div>
        <button ejs-button cssClass="e-inherit" iconCss="e-icons e-user"></button>
      </ejs-appbar>
      
      <div class="page-content">
        <p>Your page content here</p>
      </div>
    </div>
  `,
  styles: [`
    .app-title {
      margin: 0 12px;
      font-weight: 600;
      color: white;
    }
  `]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('appbar') appbar: any;

  ngAfterViewInit() {
    console.log('AppBar component initialized');
  }

  onAppBarCreated() {
    console.log('AppBar created event triggered');
    // Initialize any AppBar-specific logic
  }

  onAppBarDestroyed() {
    console.log('AppBar destroyed event triggered');
    // Clean up resources
  }

  toggleMenu() {
    console.log('Menu toggled');
  }
}

Code Examples for Each Feature

Spacer Example

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-pan"></button>
</ejs-appbar>

Separator Example

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-copy"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-paste"></button>
  <div class="e-appbar-separator"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-bold"></button>
</ejs-appbar>

Dense Mode Example

<ejs-appbar colorMode="Primary" mode="Dense">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>Compact AppBar</span>
</ejs-appbar>

Prominent Mode Example

<ejs-appbar colorMode="Primary" mode="Prominent">
  <span class="prominent">Large AppBar Component</span>
</ejs-appbar>

Sticky AppBar Example

<ejs-appbar colorMode="Primary" [isSticky]="true">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">FREE TRIAL</button>
</ejs-appbar>
<div class="page-content">
  <!-- Scrollable content -->
</div>

Troubleshooting Common Issues

Issue: Module not found errors for @syncfusion/ej2-angular-navigations

• Solution: Run npm install again to ensure packages are correctly installed

Issue: Styles not loading

• Solution: Verify CSS imports are in your global style.css file and the theme path is correct

Issue: Icons not displaying

• Solution: Ensure icon CSS class names (e.g., e-icons e-menu) match available icon names in Syncfusion icon library

Issue: Component not rendering

• Solution: Confirm AppBarModule is imported in the component's imports array and the component is standalone or part of an NgModule

Positioning and Layout in Angular AppBar

Table of Contents

• Positioning Overview
• Top AppBar
• Bottom AppBar
• Sticky AppBar
• Position Property Reference

Positioning Overview

The AppBar component supports three positioning options controlled by the position and isSticky properties:

1. Top AppBar (default) - Appears at the top of the page 2. Bottom AppBar - Appears at the bottom of the page 3. Sticky AppBar - Remains visible while scrolling

Use positioning to determine where the AppBar is displayed in your application layout.

Top AppBar

The Top AppBar is the default positioning option and places the AppBar at the top of the page content. This is ideal for primary navigation, branding, and application actions.

Basic Top AppBar Example

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
      <div class="appbar-content" style="font-size: 12px">
        <p>
          The AppBar also known as action bar or nav bar displays information and actions 
          related to the current application screen. It is used to show branding, screen titles, 
          navigation, and actions.
        </p>
      </div>
    </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));

When to Use Top AppBar

• Primary application navigation
• Main application header and branding
• Top-level menu and actions
• Most common application layout pattern
• Mobile-friendly navigation (default behavior)

Bottom AppBar

The Bottom AppBar positioning places the AppBar at the bottom of the page content. This layout is useful for mobile applications, bottom navigation patterns, and action toolbars.

Basic Bottom AppBar Example

To create a Bottom AppBar, set the position property to "Bottom":

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary" position="Bottom">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
      <div class="appbar-content" style="font-size: 12px">
        <p>
          The AppBar also known as action bar or nav bar displays information and actions 
          related to the current application screen. The bottom positioned AppBar is useful 
          for mobile navigation patterns.
        </p>
      </div>
    </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));

CSS for Bottom AppBar Layout

When using a Bottom AppBar, ensure your page layout has bottom margin or padding to accommodate it:

body {
  margin: 0;
  padding: 0;
}

.control-container {
  min-height: 100vh;
  padding-bottom: 60px; /* Height for bottom AppBar */
}

When to Use Bottom AppBar

• Mobile application bottom navigation
• Secondary action bar
• Material Design bottom navigation pattern
• Touch-friendly interface for mobile users
• Action sheets and quick actions at bottom

Sticky AppBar

The Sticky AppBar positioning makes the AppBar remain visible while scrolling through page content. This is controlled by the isSticky property set to true.

Basic Sticky AppBar Example

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary" [isSticky]="true">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
      <div class="appbar-content" style="font-size: 12px">
        <p>
          The AppBar also known as action bar or nav bar displays information and actions 
          related to the current application screen. It is used to show branding, screen titles, 
          navigation, and actions. The AppBar will be sticky while scrolling the AppBar content.
        </p>
        <p>
          Scroll down to see the sticky behavior. The AppBar remains visible at the top while 
          you scroll through the content.
        </p>
        <!-- Add content that causes scrolling -->
        <p>Additional content to demonstrate scrolling...</p>
        <p>More content here...</p>
        <p>And more content here...</p>
      </div>
    </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));

CSS for Sticky AppBar

The sticky behavior is handled by the component, but you may want to add overflow handling:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.control-container {
  position: relative;
  overflow-y: auto;
}

When to Use Sticky AppBar

• Navigation should always be accessible
• Important actions need constant visibility
• Long scrolling content pages
• Dashboard layouts with persistent header
• Document viewers or content-heavy applications

Position Property Reference

Property Usage Examples

Top Position (default):

<ejs-appbar position="Top">
  <!-- content -->
</ejs-appbar>

Bottom Position:

<ejs-appbar position="Bottom">
  <!-- content -->
</ejs-appbar>

Sticky at Top:

<ejs-appbar [isSticky]="true">
  <!-- content -->
</ejs-appbar>

Sticky at Bottom:

<ejs-appbar position="Bottom" [isSticky]="true">
  <!-- content -->
</ejs-appbar>

Combining Positions with Other Properties

Positions work with other AppBar properties for complete control:

Top Position with Size Mode

<ejs-appbar position="Top" mode="Prominent" colorMode="Primary">
  <!-- Creates a tall primary AppBar at top -->
</ejs-appbar>

Bottom Position with Dense Mode

<ejs-appbar position="Bottom" mode="Dense" colorMode="Dark">
  <!-- Creates a compact dark AppBar at bottom -->
</ejs-appbar>

Sticky Prominent AppBar

<ejs-appbar [isSticky]="true" mode="Prominent" colorMode="Primary">
  <!-- Creates a tall sticky AppBar at top -->
</ejs-appbar>

Layout Considerations

Fixed vs Absolute Positioning

By default, the sticky AppBar uses CSS position: fixed for sticky behavior. This:

• Takes the AppBar out of the normal document flow
• Makes it overlay on top of content
• Requires bottom/top margin on content to prevent overlap

Content Layout with AppBar

When using AppBar, plan your content layout:

/* For top AppBar */
body {
  padding-top: 60px; /* Adjust based on AppBar height */
}

/* For bottom AppBar */
body {
  padding-bottom: 60px; /* Adjust based on AppBar height */
}

/* For sticky AppBar */
/* Use margin to create space automatically */

Common Patterns

Pattern 1: Top Navigation with Sticky Behavior

<ejs-appbar colorMode="Primary" [isSticky]="true">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>MyApp</span>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">Settings</button>
</ejs-appbar>

Pattern 2: Bottom Mobile Navigation

<ejs-appbar position="Bottom" mode="Dense" colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-search"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-user"></button>
</ejs-appbar>

Troubleshooting

Sticky AppBar not working:

• Verify isSticky property is set to true
• Check for overflow properties on parent containers that prevent fixed positioning

Content overlapping AppBar:

• Add margin/padding to body or container equal to AppBar height
• Use developer tools to inspect AppBar height

Bottom AppBar at wrong position:

• Verify position="Bottom" property is set
• Check CSS for conflicting positioning rules

Sizing and Colors in Angular AppBar

Table of Contents

• Overview
• Size Modes
• Regular AppBar
• Prominent AppBar
• Dense AppBar
• Color Modes
• Light AppBar
• Dark AppBar
• Primary AppBar
• Inherit AppBar
• Combining Sizes and Colors
• Property Reference

Overview

The Syncfusion Angular AppBar provides flexible sizing and color customization options through the mode and colorMode properties. These properties allow developers to create AppBars that fit various design requirements and application contexts.

Size Modes

The AppBar supports three distinct size modes controlled by the mode property. Use the appropriate mode to match your design and content requirements.

Regular AppBar

The Regular mode is the default and displays the AppBar with standard height. This is suitable for most applications and provides a balanced appearance for icons, text, and buttons.

Default height: ~56px (varies by theme)

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <span class="regular">Regular AppBar</span>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Prominent AppBar

The Prominent mode displays the AppBar with increased height, providing more space for larger titles, images, or additional content. This mode is useful for applications requiring more visual prominence for headers.

Default height: ~128px (varies by theme)

To enable Prominent mode, set the mode property to "Prominent":

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <span class="prominent">AppBar Component with Prominent mode</span>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

CSS Customization for Prominent AppBar

When using Prominent mode with large titles or images, you may need to customize the AppBar height and text alignment:

/* Adjust prominent AppBar height */
.prominent-appbar.e-appbar.e-prominent {
  height: 150px; /* Increase if needed for larger content */
}

/* Align text in prominent AppBar */
.prominent {
  align-self: center;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
}

Dense AppBar

The Dense mode displays the AppBar with reduced height, creating a compact appearance. This is ideal for applications with space constraints or dense layouts.

Default height: ~48px (varies by theme)

To enable Dense mode, set the mode property to "Dense":

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary" mode="Dense">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <span class="dense">Dense AppBar</span>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Mode Property Reference

Color Modes

The AppBar supports four color modes controlled by the colorMode property. These define the background and text colors of the AppBar.

Light AppBar

The Light mode is the default color mode. It displays the AppBar with a light background and corresponding dark text/icons, making it suitable for bright interfaces.

Characteristics:

• Light background color
• Dark text and icons
• Good contrast for readability
• Professional, minimal appearance

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: `
    <div class="control-container">
      <ejs-appbar>
        <a href="https://www.syncfusion.com/angular-components" target="_blank" rel="noopener">
          <div class="syncfusion-logo"></div>
        </a>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button [isPrimary]="true">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Dark AppBar

The Dark mode displays the AppBar with a dark background and light text/icons. This is suitable for modern interfaces or dark theme applications.

To enable Dark mode, set the colorMode property to "Dark":

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Dark">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Primary AppBar

The Primary mode displays the AppBar with primary theme colors (typically brand colors). This is the most commonly used mode for application branding.

Characteristics:

• Brand primary color background
• Light/white text and icons
• Professional, branded appearance
• High visual impact

To enable Primary mode, set the colorMode property to "Primary":

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Inherit AppBar

The Inherit mode makes the AppBar inherit background and text colors from its parent element. This is useful for creating AppBars that blend seamlessly with custom backgrounds.

To enable Inherit mode, set the colorMode property to "Inherit":

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: `
    <div class="control-container" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
      <ejs-appbar colorMode="Inherit">
        <a href="https://www.syncfusion.com/angular-components" target="_blank" rel="noopener">
          <div class="syncfusion-logo"></div>
        </a>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button [isPrimary]="true">FREE TRIAL</button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

ColorMode Property Reference

Combining Sizes and Colors

The mode and colorMode properties can be combined to create various AppBar styles:

Example: Regular + Primary

<ejs-appbar mode="Regular" colorMode="Primary">
  <!-- Standard height with brand colors -->
</ejs-appbar>

Example: Prominent + Dark

<ejs-appbar mode="Prominent" colorMode="Dark">
  <!-- Large height with dark theme -->
</ejs-appbar>

Example: Dense + Inherit

<ejs-appbar mode="Dense" colorMode="Inherit">
  <!-- Compact size inheriting parent colors -->
</ejs-appbar>

Complete Example with All Combinations

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: `
    <div class="control-container">
      <!-- Regular + Primary -->
      <ejs-appbar mode="Regular" colorMode="Primary">
        <span>Regular Primary AppBar</span>
      </ejs-appbar>

      <!-- Prominent + Dark -->
      <ejs-appbar mode="Prominent" colorMode="Dark">
        <span class="prominent-text">Prominent Dark AppBar</span>
      </ejs-appbar>

      <!-- Dense + Light -->
      <ejs-appbar mode="Dense" colorMode="Light">
        <span>Dense Light AppBar</span>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Property Reference

CSS Classes for Sizing and Colors

The AppBar applies CSS classes based on mode and colorMode:

Size Mode Classes:

• .e-appbar - Base AppBar class
• .e-appbar.e-regular - Regular size
• .e-appbar.e-prominent - Prominent size
• .e-appbar.e-dense - Dense size

Color Mode Classes:

• .e-appbar.e-light - Light colors
• .e-appbar.e-dark - Dark colors
• .e-appbar.e-primary - Primary colors
• .e-appbar.e-inherit - Inherit colors

Custom Styling Example

/* Customize regular primary AppBar */
.e-appbar.e-regular.e-primary {
  padding: 12px 16px;
  /* Custom styles */
}

/* Customize prominent dark AppBar */
.e-appbar.e-prominent.e-dark {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Customize dense light AppBar */
.e-appbar.e-dense.e-light {
  border-bottom: 1px solid #e0e0e0;
}

Best Practices

1. Choose appropriate mode: Regular for most cases, Prominent for emphasis, Dense for space constraints 2. Use Primary color: Most effective for branding and user recognition 3. Maintain contrast: Ensure text is readable on background (especially with Inherit mode) 4. Consider content: Prominent mode works better with larger titles or additional content 5. Test responsiveness: AppBar sizes may appear differently on mobile devices 6. Combine consistently: Use same mode/colorMode throughout application for consistency

Styling and Customization in Angular AppBar

Table of Contents

• Overview
• Built-in CSS Classes
• CssClass Property
• HtmlAttributes
• Custom Styling
• Theme Studio Integration

Overview

The Syncfusion Angular AppBar component offers extensive customization options through built-in CSS classes, custom styling properties, and theme configuration. These options allow you to create AppBars that seamlessly integrate with your application's design system.

Built-in CSS Classes

The AppBar component automatically applies CSS classes based on its configuration. You can target these classes to customize appearance.

Core AppBar Classes

Content Element Classes

Usage Examples

/* Customize light AppBar */
.e-appbar.e-light {
  background-color: #f5f5f5;
  color: #333333;
}

/* Customize primary AppBar */
.e-appbar.e-primary {
  background-color: #2196F3;
  color: #ffffff;
}

/* Customize prominent dark AppBar */
.e-appbar.e-prominent.e-dark {
  height: 140px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Customize dense light AppBar */
.e-appbar.e-dense.e-light {
  height: 44px;
  border-bottom: 1px solid #e0e0e0;
}

/* Customize spacer appearance */
.e-appbar-spacer {
  flex: 1;
}

/* Customize separator */
.e-appbar-separator {
  margin: 0 8px;
  opacity: 0.5;
}

CssClass Property

The cssClass property allows you to apply one or more custom CSS classes to the AppBar. Use this for application-specific styling without modifying component internals.

Basic CssClass Usage

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary" cssClass="custom-appbar">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Multiple CSS Classes

Apply multiple classes by separating them with spaces:

<ejs-appbar colorMode="Primary" cssClass="custom-appbar shadowed-appbar responsive-appbar">
  <!-- content -->
</ejs-appbar>

Custom Styling Example

/* Custom AppBar with gradient background */
.custom-appbar.e-appbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 16px;
}

/* Add shadow to AppBar */
.shadowed-appbar {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Responsive padding */
.responsive-appbar {
  padding: 12px 8px;
}

@media (min-width: 768px) {
  .responsive-appbar {
    padding: 16px 24px;
  }
}

HtmlAttributes

The htmlAttributes directive allows you to add inline HTML attributes (like aria-label, data-*, etc.) to the AppBar element.

HtmlAttributes Example

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: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary" aria-label="Main application header" role="banner">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Common HTML Attributes

Accessibility Example

<ejs-appbar 
  colorMode="Primary"
  aria-label="Main navigation header"
  role="banner"
  tabindex="0">
  <button 
    ejs-button 
    cssClass="e-inherit" 
    iconCss="e-icons e-menu"
    aria-label="Open navigation menu">
  </button>
</ejs-appbar>

Custom Styling

Create custom styles for AppBar by targeting its classes or applying custom CSS.

Advanced Custom Styling Example

/* Modern gradient AppBar */
.modern-appbar.e-appbar {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
  border-radius: 0 0 12px 12px;
  position: relative;
  z-index: 1000;
}

/* Typography customization */
.modern-appbar.e-appbar span {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Button customization within AppBar */
.modern-appbar.e-appbar .e-btn {
  transition: all 0.3s ease;
}

.modern-appbar.e-appbar .e-btn:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.2);
}

/* Spacer and separator styling */
.modern-appbar .e-appbar-spacer {
  flex: 1;
}

.modern-appbar .e-appbar-separator {
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 12px;
}

Responsive Custom Styling

/* Desktop: Standard AppBar */
.responsive-custom-appbar.e-appbar {
  padding: 16px 32px;
  height: 70px;
}

/* Tablet: Reduced padding */
@media (max-width: 1024px) {
  .responsive-custom-appbar.e-appbar {
    padding: 12px 16px;
    height: 60px;
  }
}

/* Mobile: Minimal padding */
@media (max-width: 768px) {
  .responsive-custom-appbar.e-appbar {
    padding: 8px 12px;
    height: 50px;
  }
  
  .responsive-custom-appbar.e-appbar span {
    font-size: 14px;
  }
}

Animation and Transitions

/* Smooth color transitions */
.animated-appbar.e-appbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scroll effect: Change AppBar on scroll */
.animated-appbar.e-appbar.scrolled {
  background-color: rgba(33, 150, 243, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hover effects on buttons */
.animated-appbar button.e-btn {
  position: relative;
  overflow: hidden;
}

.animated-appbar button.e-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.animated-appbar button.e-btn:hover::after {
  width: 300px;
  height: 300px;
}

Theme Studio Integration

Syncfusion Theme Studio allows you to create and customize themes visually without writing CSS. Access it at Theme Studio.

Using Custom Themes

1. Visit Theme Studio: Go to https://ej2.syncfusion.com/themestudio/ 2. Customize Colors: Adjust primary, accent, and neutral colors 3. Export Theme: Download the custom theme CSS file 4. Import in Angular: Add the theme to your style.css:

/* Your custom theme from Theme Studio */
@import "../themes/custom-theme.css";

Example Theme Override

After generating a custom theme, you can override specific variables:

/* Custom theme variables */
:root {
  --primary-color: #667eea;
  --accent-color: #764ba2;
  --surface-color: #ffffff;
  --text-color: #333333;
}

/* Apply to AppBar */
.e-appbar {
  background: var(--primary-color);
  color: var(--text-color);
}

.e-appbar.e-dark {
  background: #1a1a1a;
  color: #ffffff;
}

Complete Customization Example

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: `
    <div class="control-container">
      <ejs-appbar 
        colorMode="Primary" 
        cssClass="fully-customized-appbar"
        aria-label="Customized application header"
        data-theme="modern">
        <button 
          #menuBtn 
          ejs-button 
          cssClass="e-inherit menu-btn" 
          iconCss="e-icons e-menu"
          aria-label="Menu">
        </button>
        <span class="appbar-title">My Custom App</span>
        <div class="e-appbar-spacer"></div>
        <button 
          #settingsBtn 
          ejs-button 
          cssClass="e-inherit" 
          iconCss="e-icons e-settings"
          aria-label="Settings">
        </button>
        <button 
          #profileBtn 
          ejs-button 
          cssClass="e-inherit" 
          iconCss="e-icons e-user"
          aria-label="Profile">
        </button>
      </ejs-appbar>
    </div>
  `,
})
export class AppComponent { }

Corresponding CSS

/* Fully customized AppBar */
.fully-customized-appbar.e-appbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
  padding: 12px 20px;
  position: relative;
}

/* Title styling */
.fully-customized-appbar .appbar-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 12px;
}

/* Menu button styling */
.fully-customized-appbar .menu-btn {
  margin-right: 12px;
}

/* Button hover effects */
.fully-customized-appbar .e-btn {
  color: #ffffff;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.fully-customized-appbar .e-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.fully-customized-appbar .e-btn:active {
  transform: translateY(0);
  background-color: rgba(255, 255, 255, 0.25);
}

/* Spacer spacing */
.fully-customized-appbar .e-appbar-spacer {
  flex: 1;
}

/* Separator styling */
.fully-customized-appbar .e-appbar-separator {
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .fully-customized-appbar.e-appbar {
    padding: 8px 12px;
  }
  
  .fully-customized-appbar .appbar-title {
    font-size: 16px;
    margin: 0 8px;
  }
}

Best Practices for Styling

1. Use cssClass for application-specific styling: Keep component styling separate 2. Maintain color contrast: Ensure text is readable on background (WCAG compliance) 3. Test across themes: Verify styling works with different color modes 4. Use CSS variables: Leverage custom properties for maintainability 5. Minimize specificity: Use low-specificity selectors to allow easy overrides 6. Responsive design: Test and adjust styles for all screen sizes 7. Animation performance: Use CSS transforms and opacity for smooth animations 8. Accessibility first: Test with screen readers and keyboard navigation 9. Theme consistency: Use Theme Studio for cohesive design across all components 10. Documentation: Comment complex styling for team maintenance