Syncfusion React Appbar

Implementing Syncfusion React AppBar

The AppBar component creates flexible navigation headers and toolbars at the top or bottom of your application. It's used to display branding, screen titles, navigation controls, and actions while supporting responsive layouts, multiple positioning modes, and rich styling options.

When to Use This Skill

Use AppBar when you need to:

• Display application branding and navigation at the top/bottom of pages
• Create action bars with buttons, menus, or dropdowns
• Build responsive toolbars that adapt to screen size
• Implement sticky/fixed navigation that stays visible while scrolling
• Create responsive sidebars with menu navigation
• Add visual separation between grouped controls
• Support accessibility standards (WCAG 2.2, Section 508, keyboard navigation)

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package installation and dependencies
• React setup (Vite and Create React App)
• CSS imports and theme configuration
• Basic AppBar with buttons and icons
• First working example

Positioning and Layout

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

• Position modes: Top (default), Bottom, Sticky
• Spacer for horizontal content spacing
• Separator for visual grouping
• Media queries for responsive design
• Layout patterns for different screen sizes

Size and Color Modes

📄 Read: references/size-and-color-modes.md

• Mode property: Regular, Prominent, Dense
• ColorMode property: Light, Dark, Primary, Inherit
• When to use each mode combination
• Height customization for prominent AppBars
• Visual hierarchy with color modes

Design Patterns

📄 Read: references/design-patterns.md

• AppBar with Menu component integration
• AppBar with Button and DropDownButton
• AppBar with Sidebar for responsive navigation
• Navigation and branding patterns
• e-inherit CSS class usage
• Responsive sidebar with TreeView

Styling and Accessibility

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

• CSS customization with cssClass property
• HTML attributes and aria-label
• CSS class reference (.e-appbar, .e-prominent, etc.)
• WCAG 2.2 and Section 508 compliance
• Keyboard navigation support
• RTL, color contrast, and mobile support

API Reference

📄 Read: references/api-reference.md

• Complete property documentation (colorMode, mode, position, isSticky, cssClass, htmlAttributes, enableRtl, enablePersistence, locale)
• Event documentation (created, destroyed)
• Working code examples for every property
• Event handler examples
• Common property combinations
• Summary table of all APIs

Quick Start

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass='e-inherit menu' iconCss='e-icons e-menu'></ButtonComponent>
      <span className="regular">My App</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass='e-inherit login'>Login</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Common Patterns

Pattern 1: Basic Navigation Bar

<AppBarComponent colorMode="Primary">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">About</ButtonComponent>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Contact</ButtonComponent>
</AppBarComponent>

Pattern 2: Prominent AppBar with Title

<AppBarComponent colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span className="prominent">Large Title Section</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Action</ButtonComponent>
</AppBarComponent>

Pattern 3: Dense Toolbar

<AppBarComponent colorMode="Dark" mode="Dense">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
  <div className="e-appbar-separator"></div>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bold"></ButtonComponent>
</AppBarComponent>

Pattern 4: Sticky AppBar with Bottom Position

<AppBarComponent colorMode="Primary" isSticky position="Bottom">
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Save</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Cancel</ButtonComponent>
</AppBarComponent>

Key Props

Quick reference for the most commonly used AppBar properties:

For detailed explanations and code examples for all properties, events, and methods, see the [API Reference](references/api-reference.md).

Common Use Cases

Use Case 1: E-commerce Product Page

• Primary AppBar at top with brand logo and search
• Navigation buttons (Home, Products, About)
• Right-aligned user account and cart icons
• Sticky so it stays visible when scrolling products

Use Case 2: Admin Dashboard

• Dark AppBar with application name
• Left sidebar toggle button (e-menu icon)
• Center spacer for balance
• Right-aligned user profile and logout

Use Case 3: Mobile-First App

• Responsive menu button (hidden on desktop)
• Dense mode to save screen space
• Bottom AppBar with action buttons on mobile
• Top AppBar on desktop with full navigation

Use Case 4: Document Editor

• Dense AppBar with editing tools (cut, copy, paste)
• Separators to group related buttons
• Undo/Redo on left, Format options on right
• Sticky while editing document

---

Next Steps: Choose a reference file above based on your specific task. For example, if you're getting started, read "Getting Started". If you need to position the AppBar, read "Positioning and Layout".

API Reference

Table of Contents

• Overview
• Properties
• Events
• Common Property Combinations

Overview

The AppBarComponent provides a comprehensive set of properties and events to customize and control the behavior of your navigation bar. This reference covers all available APIs with detailed explanations and practical examples.

---

Properties

colorMode

Type: AppBarColor (enum) Default: "Light" Possible Values: "Light" | "Dark" | "Primary" | "Inherit"

Specifies the color mode that defines the background and text colors of the AppBar component.

Example 1: Light Color Mode

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Light">
      <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent isPrimary>Login</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Example 2: Dark Color Mode

<AppBarComponent colorMode="Dark">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>Dark Navigation</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Settings</ButtonComponent>
</AppBarComponent>

Example 3: Primary Color Mode

<AppBarComponent colorMode="Primary">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>My Application</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Logout</ButtonComponent>
</AppBarComponent>

Example 4: Inherit Color Mode

import React from "react";

const App = () => {
  return (
    <div style={{ backgroundColor: '#ff6b6b', color: 'white' }}>
      <AppBarComponent colorMode="Inherit">
        <span>Custom Colored AppBar</span>
      </AppBarComponent>
    </div>
  );
}

export default App;

---

mode

Type: AppBarMode (enum) Default: "Regular" Possible Values: "Regular" | "Prominent" | "Dense"

Specifies the height mode of the AppBar component. The mode controls the vertical space available for content.

Example 1: Regular Mode (Default)

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary" mode="Regular">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span className="regular">Regular AppBar</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Example 2: Prominent Mode

<AppBarComponent colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span className="prominent">AppBar with Prominent Mode</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
</AppBarComponent>

CSS for Prominent Mode:

.prominent-appbar.e-prominent {
  height: 200px;  /* Custom height adjustment */
}

.prominent {
  align-self: center;
  font-size: 24px;
  font-weight: bold;
}

Example 3: Dense Mode

<AppBarComponent colorMode="Primary" mode="Dense">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
  <div className="e-appbar-separator"></div>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bold"></ButtonComponent>
</AppBarComponent>

---

position

Type: AppBarPosition (enum) Default: "Top" Possible Values: "Top" | "Bottom"

Specifies the vertical position of the AppBar within the viewport.

Example 1: Top Position (Default)

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <>
      <AppBarComponent colorMode="Primary" position="Top">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <span>My App</span>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
      </AppBarComponent>
      
      <div style={{ padding: '20px' }}>
        <h2>Main Content</h2>
        <p>Your content goes here.</p>
      </div>
    </>
  );
}

export default App;

Example 2: Bottom Position

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <>
      <div style={{ padding: '20px', minHeight: '400px' }}>
        <h2>Document Content</h2>
        <p>Your document or form content goes here.</p>
      </div>
      
      <AppBarComponent colorMode="Primary" position="Bottom">
        <ButtonComponent cssClass="e-inherit">Cancel</ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit" isPrimary>Save</ButtonComponent>
      </AppBarComponent>
    </>
  );
}

export default App;

---

isSticky

Type: boolean Default: false

Defines whether the AppBar position is fixed to the viewport while scrolling page content. When set to true, the AppBar will remain visible at its position (top or bottom) while the user scrolls.

Use Cases:

• Keep main navigation always accessible while scrolling long pages
• Fixed toolbars that users need constant access to
• Sticky headers in dashboards and admin panels

Example 1: Sticky Top AppBar

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <>
      <AppBarComponent colorMode="Primary" isSticky>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <span>Sticky Navigation</span>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">Profile</ButtonComponent>
      </AppBarComponent>
      
      <div className="appbar-content" style={{ padding: '20px' }}>
        <h2>Scroll Down to See Sticky AppBar</h2>
        {Array.from({ length: 30 }).map((_, i) => (
          <p key={i}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        ))}
      </div>
    </>
  );
}

export default App;

Example 2: Sticky Bottom AppBar (Mobile Action Bar)

<>
  <div style={{ padding: '20px', minHeight: '600px' }}>
    <h2>Form Content</h2>
    <p>Fill out the form above...</p>
  </div>
  
  <AppBarComponent 
    colorMode="Primary" 
    position="Bottom" 
    isSticky
  >
    <ButtonComponent cssClass="e-inherit">Clear</ButtonComponent>
    <div className="e-appbar-spacer"></div>
    <ButtonComponent cssClass="e-inherit" isPrimary>Submit</ButtonComponent>
  </AppBarComponent>
</>

---

cssClass

Type: string Default: undefined

Accepts single or multiple CSS classes (separated by spaces) to be applied to the AppBar container for custom styling and theming.

Use Cases:

• Apply custom CSS rules for AppBar styling
• Create theme variants
• Add specific styling for different sections
• Combine with media queries for responsive design

Example 1: Single Custom Class

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";
import './App.css';

const App = () => {
  return (
    <AppBarComponent colorMode="Primary" cssClass="custom-appbar">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-home"></ButtonComponent>
      <span>Custom Styled AppBar</span>
    </AppBarComponent>
  );
}

export default App;

CSS Styling:

.custom-appbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid #ff6b6b;
  padding: 12px 24px;
}

.custom-appbar .e-inherit {
  font-weight: 500;
  letter-spacing: 0.5px;
}

Example 2: Multiple Classes

<AppBarComponent 
  colorMode="Primary" 
  mode="Prominent"
  cssClass="elevated-shadow gradient-bg rounded-corners"
>
  <span>Multi-Class AppBar</span>
</AppBarComponent>

CSS Styling:

.elevated-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.rounded-corners {
  border-radius: 8px;
}

---

htmlAttributes

Type: Record<string, any> Default: {}

Accepts HTML attributes and custom attributes (as a Record/object) to be applied directly to the AppBar DOM element. Useful for accessibility attributes, data attributes, and other custom properties.

Use Cases:

• Add ARIA labels for screen readers
• Set data attributes for testing
• Add custom attributes for analytics
• Implement accessibility features

Example 1: ARIA Labels for Accessibility

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent 
      colorMode="Primary"
      htmlAttributes={{
        'role': 'banner',
        'aria-label': 'Main application navigation bar',
        'aria-description': 'Navigation bar containing main menu and user options'
      }}
    >
      <ButtonComponent 
        cssClass="e-inherit" 
        iconCss="e-icons e-menu"
        aria-label="Toggle navigation menu"
      ></ButtonComponent>
      
      <span>Application</span>
      
      <div className="e-appbar-spacer"></div>
      
      <ButtonComponent 
        cssClass="e-inherit"
        aria-label="User profile menu"
        aria-haspopup="menu"
      >
        Profile
      </ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Example 2: Data Attributes for Testing

<AppBarComponent 
  colorMode="Primary"
  htmlAttributes={{
    'data-testid': 'main-appbar',
    'data-component': 'appbar',
    'data-version': '1.0',
    'data-analytics': 'navigation-bar'
  }}
>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>Test AppBar</span>
</AppBarComponent>

Example 3: Mixed Attributes

<AppBarComponent 
  colorMode="Primary"
  htmlAttributes={{
    'role': 'navigation',
    'aria-label': 'Main navigation',
    'data-testid': 'nav-appbar',
    'id': 'app-navigation',
    'title': 'Application Navigation Bar'
  }}
>
  {/* Content */}
</AppBarComponent>

---

enableRtl

Type: boolean Default: false

Enable or disable rendering the AppBar component in right-to-left direction. Essential for supporting RTL languages like Arabic, Hebrew, and Persian.

Use Cases:

• Support for Arabic (ar), Hebrew (he), Persian (fa) languages
• Bidirectional text support
• Regional application localization

Example 1: RTL Support with Arabic

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  const isArabic = true;  // Set based on language selection
  
  return (
    <div dir={isArabic ? "rtl" : "ltr"}>
      <AppBarComponent 
        colorMode="Primary"
        enableRtl={isArabic}
      >
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <span>{isArabic ? 'التطبيق' : 'Application'}</span>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">
          {isArabic ? 'تسجيل الدخول' : 'Login'}
        </ButtonComponent>
      </AppBarComponent>
    </div>
  );
}

export default App;

Example 2: Dynamic RTL Toggle

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React, { useState } from "react";

const App = () => {
  const [isRTL, setIsRTL] = useState(false);
  
  const toggleRTL = () => {
    setIsRTL(!isRTL);
  };
  
  return (
    <div dir={isRTL ? "rtl" : "ltr"}>
      <AppBarComponent 
        colorMode="Primary"
        enableRtl={isRTL}
      >
        <ButtonComponent 
          cssClass="e-inherit" 
          onClick={toggleRTL}
        >
          {isRTL ? 'LTR' : 'RTL'}
        </ButtonComponent>
        <span>{isRTL ? 'اتجاه النص' : 'Text Direction'}</span>
      </AppBarComponent>
    </div>
  );
}

export default App;

---

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 storage (localStorage) and restored on subsequent page loads.

Use Cases:

• Maintain AppBar state across page refreshes
• Preserve user preferences for AppBar configuration
• Store layout preferences persistently

Example 1: Enable Persistence

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React, { useState } from "react";

const App = () => {
  const [colorMode, setColorMode] = useState<string>("Primary");
  
  const toggleColorMode = () => {
    const newMode = colorMode === "Primary" ? "Dark" : "Primary";
    setColorMode(newMode);
  };
  
  return (
    <AppBarComponent 
      colorMode={colorMode as any}
      enablePersistence={true}
    >
      <ButtonComponent 
        cssClass="e-inherit" 
        onClick={toggleColorMode}
      >
        Toggle Theme
      </ButtonComponent>
      <span>State will persist after reload</span>
    </AppBarComponent>
  );
}

export default App;

Example 2: With User Preferences

<AppBarComponent 
  colorMode="Primary"
  mode="Regular"
  enablePersistence={true}
  htmlAttributes={{
    'data-persist-key': 'appbar-state'
  }}
>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>Persistent AppBar Configuration</span>
</AppBarComponent>

---

locale

Type: string Default: "en-US"

Overrides the global culture and localization value for the AppBar component. Allows you to set language-specific formatting and content for this component instance without affecting other components.

Supported Locales:

• "en-US" - English (United States)
• "de-DE" - German (Germany)
• "fr-FR" - French (France)
• "es-ES" - Spanish (Spain)
• "ar-AR" - Arabic
• "ja-JP" - Japanese
• "zh-CN" - Chinese (Simplified)
• And many more language-region combinations

Example 1: German Locale

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent 
      colorMode="Primary"
      locale="de-DE"
    >
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span>Deutsch AppBar</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">Anmelden</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Example 2: Arabic Locale with RTL

<AppBarComponent 
  colorMode="Primary"
  locale="ar-AR"
  enableRtl={true}
>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>تطبيقي</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">تسجيل الدخول</ButtonComponent>
</AppBarComponent>

Example 3: Dynamic Locale Switching

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React, { useState } from "react";

const App = () => {
  const [locale, setLocale] = useState<string>("en-US");
  
  const locales = [
    { code: "en-US", label: "English" },
    { code: "de-DE", label: "Deutsch" },
    { code: "fr-FR", label: "Français" },
    { code: "es-ES", label: "Español" }
  ];
  
  return (
    <>
      <AppBarComponent 
        colorMode="Primary"
        locale={locale}
      >
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <span>Language Settings</span>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">Options</ButtonComponent>
      </AppBarComponent>
      
      <div style={{ padding: '20px' }}>
        <h3>Select Language:</h3>
        {locales.map(loc => (
          <ButtonComponent
            key={loc.code}
            onClick={() => setLocale(loc.code)}
            isPrimary={locale === loc.code}
            style={{ marginRight: '10px' }}
          >
            {loc.label}
          </ButtonComponent>
        ))}
      </div>
    </>
  );
}

export default App;

---

Events

created

Type: EmitType<Event> Triggers: After the AppBar component is created and initialized

The created event fires once the AppBar component has been fully created and all initialization is complete. Use this event to perform any setup operations after the component is ready.

Event Arguments:

• args: Event - Standard React/JavaScript Event object

Example 1: Basic Created Event

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  const handleCreated = (args: any) => {
    console.log('AppBar component has been created:', args);
    // Perform initialization tasks here
  };
  
  return (
    <AppBarComponent 
      colorMode="Primary"
      created={handleCreated}
    >
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span>AppBar with Created Event</span>
    </AppBarComponent>
  );
}

export default App;

Example 2: Logging Component Metadata

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  const handleCreated = (args: any) => {
    console.log('AppBar Created Event Details:');
    console.log('- Event Type:', args.type);
    console.log('- Timestamp:', new Date().toISOString());
    console.log('- Component initialized successfully');
    
    // You can initialize custom behavior here
    localStorage.setItem('appbar-created-at', new Date().toISOString());
  };
  
  return (
    <AppBarComponent 
      colorMode="Primary"
      created={handleCreated}
    >
      <ButtonComponent cssClass="e-inherit">Navigation</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Example 3: Setup Analytics on Component Creation

<AppBarComponent 
  colorMode="Primary"
  created={(args) => {
    // Track component initialization
    if (window.analytics) {
      window.analytics.trackEvent('appbar_initialized', {
        timestamp: new Date().toISOString(),
        colorMode: 'Primary',
        component: 'AppBar'
      });
    }
  }}
>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>Tracked AppBar</span>
</AppBarComponent>

---

destroyed

Type: EmitType<Event> Triggers: When the AppBar component is destroyed/unmounted

The destroyed event fires when the AppBar component is being removed from the DOM or destroyed. Use this event to perform cleanup operations, unsubscribe from events, or save state.

Event Arguments:

• args: Event - Standard React/JavaScript Event object

Example 1: Basic Destroyed Event

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  const handleDestroyed = (args: any) => {
    console.log('AppBar component is being destroyed:', args);
    // Perform cleanup tasks here
  };
  
  return (
    <AppBarComponent 
      colorMode="Primary"
      destroyed={handleDestroyed}
    >
      <ButtonComponent cssClass="e-inherit">Navigation</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Example 2: Cleanup and Logging

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React, { useState } from "react";

const App = () => {
  const [isAppBarVisible, setIsAppBarVisible] = useState(true);
  
  const handleDestroyed = (args: any) => {
    console.log('AppBar Destroyed Event:');
    console.log('- Component cleanup started');
    console.log('- Timestamp:', new Date().toISOString());
    
    // Remove from localStorage or perform cleanup
    localStorage.removeItem('appbar-state');
    
    console.log('- Cleanup completed');
  };
  
  return (
    <>
      {isAppBarVisible && (
        <AppBarComponent 
          colorMode="Primary"
          destroyed={handleDestroyed}
        >
          <ButtonComponent cssClass="e-inherit">Navigation</ButtonComponent>
        </AppBarComponent>
      )}
      
      <div style={{ padding: '20px' }}>
        <ButtonComponent 
          onClick={() => setIsAppBarVisible(!isAppBarVisible)}
          isPrimary
        >
          {isAppBarVisible ? 'Hide' : 'Show'} AppBar
        </ButtonComponent>
      </div>
    </>
  );
}

export default App;

Example 3: Save State on Destroy

<AppBarComponent 
  colorMode="Primary"
  destroyed={(args) => {
    // Save component state before destruction
    const appbarState = {
      colorMode: 'Primary',
      lastActive: new Date().toISOString(),
      sessionDuration: calculateSessionDuration()
    };
    
    // Send to server or save locally
    localStorage.setItem('last-appbar-state', JSON.stringify(appbarState));
    
    console.log('AppBar state saved before destruction');
  }}
>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>AppBar with State Management</span>
</AppBarComponent>

---

Common Property Combinations

Combination 1: Professional Enterprise Navigation

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent 
      colorMode="Primary"
      mode="Regular"
      position="Top"
      isSticky={true}
      cssClass="enterprise-appbar"
      htmlAttributes={{
        'role': 'navigation',
        'aria-label': 'Main application navigation',
        'data-component': 'enterprise-navbar'
      }}
      enablePersistence={true}
      enableRtl={false}
      locale="en-US"
      created={(args) => console.log('Enterprise AppBar ready')}
    >
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span>Enterprise Application</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">Profile</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Combination 2: Mobile-First Design

<AppBarComponent 
  colorMode="Dark"
  mode="Dense"
  position="Top"
  isSticky={true}
  cssClass="mobile-appbar"
  htmlAttributes={{
    'data-device': 'mobile'
  }}
  enableRtl={false}
>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>Mobile App</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-user"></ButtonComponent>
</AppBarComponent>

Combination 3: Multilingual RTL Support

<AppBarComponent 
  colorMode="Primary"
  mode="Regular"
  position="Top"
  enableRtl={true}
  locale="ar-AR"
  htmlAttributes={{
    'dir': 'rtl',
    'aria-label': 'شريط التنقل الرئيسي'
  }}
>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>تطبيق متعدد اللغات</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">الإعدادات</ButtonComponent>
</AppBarComponent>

Combination 4: Custom Themed Prominent Header

<AppBarComponent 
  colorMode="Inherit"
  mode="Prominent"
  cssClass="custom-hero-appbar gradient-bg"
  htmlAttributes={{
    'data-section': 'hero',
    'data-testid': 'hero-appbar'
  }}
  created={(args) => console.log('Hero AppBar initialized')}
>
  <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
    <h1>Welcome to Our Platform</h1>
  </div>
</AppBarComponent>

CSS for Custom Theme:

.custom-hero-appbar.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.custom-hero-appbar h1 {
  margin: 0;
  font-size: 2rem;
}

---

Summary Table

Design Patterns

Table of Contents

• AppBar with Menu Component
• AppBar with Button and DropDownButton
• AppBar with Sidebar
• Common Layout Patterns
• Navigation Best Practices

AppBar with Menu Component

Integrate the Menu component with AppBar for dropdown navigation menus. The e-inherit CSS class ensures the Menu inherits AppBar styling.

When to use:

• Multi-level navigation hierarchies
• Dropdown menus with submenus
• Grouped navigation options
• Professional menu structures

Basic Menu Integration

import { AppBarComponent, MenuComponent, MenuItemModel } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  const companyMenuItems: MenuItemModel[] = [
    {
      text: 'Company',
      items: [
        { text: 'About Us' },
        { text: 'Customers' },
        { text: 'Blog' },
        { text: 'Careers' }
      ]
    }
  ];

  const productMenuItems: MenuItemModel[] = [
    {
      text: 'Products',
      items: [
        { text: 'Developer Tools' },
        { text: 'Analytics' },
        { text: 'Reporting' },
        { text: 'Help Desk' }
      ]
    }
  ];

  const supportMenuItems: MenuItemModel[] = [
    {
      text: 'Support',
      items: [
        { text: 'Documentation' },
        { text: 'API Reference' },
        { text: 'Contact Us' }
      ]
    }
  ];

  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      
      {/* Menus inherit AppBar styling */}
      <MenuComponent cssClass="e-inherit" items={companyMenuItems}></MenuComponent>
      <MenuComponent cssClass="e-inherit" items={productMenuItems}></MenuComponent>
      <MenuComponent cssClass="e-inherit" items={supportMenuItems}></MenuComponent>
      
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">Login</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Menu with Icons and Event Handling

import { AppBarComponent, MenuComponent, MenuItemModel } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  const fileMenuItems: MenuItemModel[] = [
    {
      text: 'New',
      iconCss: 'e-icons e-file',
      items: [
        { text: 'Document', iconCss: 'e-icons e-document' },
        { text: 'Spreadsheet', iconCss: 'e-icons e-spreadsheet' },
        { text: 'Presentation', iconCss: 'e-icons e-presentation' }
      ]
    },
    {
      text: 'Open',
      iconCss: 'e-icons e-folder-open'
    },
    {
      text: 'Save',
      iconCss: 'e-icons e-save'
    },
    { separator: true },
    {
      text: 'Exit',
      iconCss: 'e-icons e-exit'
    }
  ];

  const handleMenuSelect = (args: any) => {
    console.log('Selected:', args.item.text);
  };

  return (
    <AppBarComponent colorMode="Dark" mode="Dense">
      <MenuComponent 
        cssClass="e-inherit" 
        items={fileMenuItems}
        select={handleMenuSelect}
      ></MenuComponent>
      
      <div className="e-appbar-separator"></div>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-undo"></ButtonComponent>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-redo"></ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Key Points:

• Use cssClass="e-inherit" to inherit AppBar styling
• Menu automatically positions dropdown below trigger
• Separator between menu groups improves visual hierarchy
• Icons in menu items enhance recognition

AppBar with Button and DropDownButton

Combine AppBar with Button and DropDownButton components for flexible content layouts.

When to use:

• Quick action buttons
• Dropdown selections without full menu
• Call-to-action buttons
• Split buttons for primary + secondary actions

DropDownButton in AppBar

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import React from "react";

const App = () => {
  const productItems: ItemModel[] = [
    { text: 'Developer Tools' },
    { text: 'Analytics Platform' },
    { text: 'Reporting Suite' },
    { text: 'E-Signature' },
    { text: 'Help Desk' }
  ];

  const accountItems: ItemModel[] = [
    { text: 'Profile' },
    { text: 'Settings' },
    { text: 'Preferences' },
    { separator: true },
    { text: 'Logout' }
  ];

  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      
      <DropDownButtonComponent 
        cssClass="e-inherit" 
        items={productItems}
      >
        Products
      </DropDownButtonComponent>
      
      <ButtonComponent cssClass="e-inherit">Documentation</ButtonComponent>
      
      <div className="e-appbar-spacer"></div>
      <div className="e-appbar-separator"></div>
      
      <DropDownButtonComponent 
        cssClass="e-inherit" 
        items={accountItems}
        iconCss="e-icons e-user"
      >
        Account
      </DropDownButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Multiple Dropdowns with Separators

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import React from "react";

const App = () => {
  const viewOptions: ItemModel[] = [
    { text: 'Grid View' },
    { text: 'List View' },
    { text: 'Kanban View' }
  ];

  const sortOptions: ItemModel[] = [
    { text: 'By Name' },
    { text: 'By Date' },
    { text: 'By Priority' }
  ];

  const filterOptions: ItemModel[] = [
    { text: 'Active' },
    { text: 'Archived' },
    { text: 'All' }
  ];

  return (
    <AppBarComponent colorMode="Primary" mode="Dense">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      
      {/* View Controls */}
      <DropDownButtonComponent 
        cssClass="e-inherit" 
        items={viewOptions}
        iconCss="e-icons e-list"
      >
        View
      </DropDownButtonComponent>
      
      <div className="e-appbar-separator"></div>
      
      {/* Data Controls */}
      <DropDownButtonComponent 
        cssClass="e-inherit" 
        items={sortOptions}
        iconCss="e-icons e-sort"
      >
        Sort
      </DropDownButtonComponent>
      
      <DropDownButtonComponent 
        cssClass="e-inherit" 
        items={filterOptions}
        iconCss="e-icons e-filter"
      >
        Filter
      </DropDownButtonComponent>
      
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit" isPrimary>Export</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

AppBar with Sidebar

Combine AppBar with Sidebar for responsive navigation. Common on mobile apps where sidebar toggles on menu click.

When to use:

• Mobile-friendly navigation
• Collapsible menus
• Navigation drawers
• Responsive layouts

Basic Sidebar Toggle

import React, { useState, useRef } from "react";
import { AppBarComponent, SidebarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import './App.css';

const App = () => {
  const [isOpen, setIsOpen] = useState(true);
  const sidebarRef = useRef<SidebarComponent>(null);

  const toggleSidebar = () => {
    if (sidebarRef.current) {
      sidebarRef.current.toggle();
    }
  };

  return (
    <div id="responsive-wrapper">
      {/* AppBar Header */}
      <AppBarComponent>
        <ButtonComponent 
          cssClass="e-inherit" 
          iconCss="e-icons e-menu"
          onClick={toggleSidebar}
        ></ButtonComponent>
        <div className="e-folder">
          <div className="e-folder-name">My Application</div>
        </div>
      </AppBarComponent>

      {/* Sidebar Navigation */}
      <SidebarComponent 
        ref={sidebarRef}
        width="250px"
        target=".main-content"
        mediaQuery="(min-width: 600px)"
        isOpen={isOpen}
      >
        <div className="sidebar-menu">
          <div className="menu-section">
            <h4>Navigation</h4>
            <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </SidebarComponent>

      {/* Main Content */}
      <div className="main-content" style={{ padding: '20px' }}>
        <h2>Main Content Area</h2>
        <p>Click the menu icon to toggle sidebar on mobile devices.</p>
      </div>
    </div>
  );
}

export default App;

Sidebar with TreeView Navigation

import React, { useState, useRef } from "react";
import { AppBarComponent, SidebarComponent, TreeViewComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import './App.css';

const App = () => {
  const [isOpen, setIsOpen] = useState(true);
  const sidebarRef = useRef<SidebarComponent>(null);

  const navData: { [key: string]: Object }[] = [
    { nodeId: '01', nodeText: 'Getting Started' },
    { nodeId: '02', nodeText: 'Installation' },
    {
      nodeId: '03',
      nodeText: 'Components',
      nodeChild: [
        { nodeId: '03-01', nodeText: 'Grid' },
        { nodeId: '03-02', nodeText: 'Chart' },
        { nodeId: '03-03', nodeText: 'Calendar' },
        { nodeId: '03-04', nodeText: 'Button' }
      ]
    },
    { nodeId: '04', nodeText: 'API Reference' },
    { nodeId: '05', nodeText: 'Support' }
  ];

  const toggleSidebar = () => {
    if (sidebarRef.current) {
      sidebarRef.current.toggle();
    }
  };

  const treeFields = {
    dataSource: navData,
    id: 'nodeId',
    text: 'nodeText',
    child: 'nodeChild'
  };

  return (
    <div id="responsive-wrapper">
      {/* AppBar */}
      <AppBarComponent>
        <ButtonComponent 
          cssClass="e-inherit"
          iconCss="e-icons e-menu"
          onClick={toggleSidebar}
        ></ButtonComponent>
        <div className="e-folder">
          <div className="e-folder-name">Documentation</div>
        </div>
      </AppBarComponent>

      {/* Sidebar with TreeView */}
      <SidebarComponent 
        ref={sidebarRef}
        width="220px"
        target=".main-sidebar-content"
        mediaQuery="(min-width: 600px)"
        isOpen={isOpen}
      >
        <div className="res-main-menu">
          <div className="table-content">
            <TextBoxComponent placeholder="Search..."></TextBoxComponent>
            <p className="main-menu-header">TABLE OF CONTENTS</p>
          </div>
          <div>
            <TreeViewComponent 
              cssClass="main-treeview"
              fields={treeFields}
              expandOn='Click'
            />
          </div>
        </div>
      </SidebarComponent>

      {/* Main Content */}
      <div className="main-sidebar-content" id="main-text">
        <div className="sidebar-content">
          <h2>Component Documentation</h2>
          <p>Select a topic from the sidebar to view documentation.</p>
        </div>
      </div>
    </div>
  );
}

export default App;

Common Layout Patterns

Pattern 1: E-commerce Header

<AppBarComponent colorMode="Primary">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span className="logo">ShopHub</span>
  
  <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Shop</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Sale</ButtonComponent>
  
  <div className="e-appbar-spacer"></div>
  <div className="e-appbar-separator"></div>
  
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-search"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-shopping-cart"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-user"></ButtonComponent>
</AppBarComponent>

Pattern 2: Admin Dashboard Header

<AppBarComponent colorMode="Dark">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>Dashboard</span>
  
  <div className="e-appbar-spacer"></div>
  
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bell"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-mail"></ButtonComponent>
  <div className="e-appbar-separator"></div>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-user"></ButtonComponent>
</AppBarComponent>

Pattern 3: Document Editor Toolbar

<AppBarComponent colorMode="Primary" mode="Dense">
  {/* File Operations */}
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-new"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-open"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-save"></ButtonComponent>
  
  <div className="e-appbar-separator"></div>
  
  {/* Edit Operations */}
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-undo"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-redo"></ButtonComponent>
  
  <div className="e-appbar-separator"></div>
  
  {/* Formatting */}
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bold"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-italic"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-underline"></ButtonComponent>
</AppBarComponent>

Navigation Best Practices

1. Use e-inherit for Component Styling

// ✓ Correct: Components inherit AppBar styles
<MenuComponent cssClass="e-inherit" items={menuItems}></MenuComponent>
<ButtonComponent cssClass="e-inherit">Button</ButtonComponent>

// ✗ Incorrect: Components styled separately
<MenuComponent items={menuItems}></MenuComponent>  // Won't match AppBar

2. Organize Content with Spacer and Separator

// Good structure: Left navigation | Right actions
<AppBarComponent>
  <ButtonComponent>Menu</ButtonComponent>
  <MenuComponent>Navigation</MenuComponent>
  
  <div className="e-appbar-spacer"></div>     {/* Push right */}
  <div className="e-appbar-separator"></div>  {/* Visual break */}
  
  <ButtonComponent>Settings</ButtonComponent>
  <ButtonComponent>Logout</ButtonComponent>
</AppBarComponent>

3. Responsive Sidebar Toggle

// Always provide toggle capability on mobile
<ButtonComponent 
  cssClass="e-inherit"
  iconCss="e-icons e-menu"
  onClick={() => sidebarRef.current?.toggle()}
></ButtonComponent>

4. Color Mode for Visual Hierarchy

// Use different colors for different sections
<AppBarComponent colorMode="Primary">
  {/* Main navigation */}
</AppBarComponent>

<AppBarComponent colorMode="Dark" mode="Dense">
  {/* Secondary toolbar */}
</AppBarComponent>

<AppBarComponent colorMode="Light">
  {/* Footer toolbar */}
</AppBarComponent>

5. Consistent Icon Usage

// Use consistent icon library (e-icons)
<ButtonComponent iconCss='e-icons e-menu'></ButtonComponent>  // ✓ Correct
<ButtonComponent iconCss='e-icons e-home'></ButtonComponent>
<ButtonComponent iconCss='custom-icon'></ButtonComponent>     // ✗ Inconsistent

These patterns provide solid foundations for building professional AppBar-based navigation systems.

Getting Started with AppBar

Table of Contents

• Installation
• Setup Development Environment
• Adding Packages
• CSS Imports
• Basic AppBar
• First Example

Installation

To use AppBar in your React application, install the required Syncfusion packages from npm.

Dependencies Required

The AppBar component requires the following packages:

@syncfusion/ej2-react-navigations      // Main navigation components
  ├── @syncfusion/ej2-react-base       // Base utilities
  ├── @syncfusion/ej2-navigations      // Navigation core
  │   └── @syncfusion/ej2-base        // Core utilities
  └── @syncfusion/ej2-react-buttons   // Button component (optional, for AppBar content)

Setup Development Environment

Using Vite (Recommended)

Vite provides faster development builds and smaller bundle sizes:

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

For TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

Using Create React App

If you prefer Create React App:

npx create-react-app my-app
cd my-app
npm start

Adding Packages

Install the required Syncfusion packages:

npm install @syncfusion/ej2-react-navigations --save
npm install @syncfusion/ej2-react-buttons --save

These commands install:

• ej2-react-navigations: AppBar, Menu, Sidebar components
• ej2-react-buttons: Button component for AppBar content
• All dependencies automatically (ej2-react-base, ej2-base, etc.)

CSS Imports

Add Syncfusion styles to your main CSS file (App.css or index.css):

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

Available Theme Options:

• tailwind3.css - Tailwind CSS theme (modern, minimal)
• bootstrap5.css - Bootstrap 5 theme (familiar Bootstrap look)
• material.css - Material Design theme (Google Material Design)
• fluent2.css - Microsoft Fluent 2 theme (Office 365 style)
• fabric.css - Fabric (Office 365) theme

Choose one theme that matches your project. Replace tailwind3 with your preferred theme.

Basic AppBar

Minimal Example

The most basic AppBar requires: 1. Import AppBarComponent from @syncfusion/ej2-react-navigations 2. Import ButtonComponent from @syncfusion/ej2-react-buttons 3. Render the AppBar with content

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass='e-inherit'>Menu</ButtonComponent>
      <span>My Application</span>
    </AppBarComponent>
  );
}

export default App;

With Icons

Add icons to buttons using the iconCss property:

<AppBarComponent colorMode="Primary">
  <ButtonComponent cssClass='e-inherit' iconCss='e-icons e-menu'></ButtonComponent>
  <span className="regular">React AppBar</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass='e-inherit' iconCss='e-icons e-setting'></ButtonComponent>
</AppBarComponent>

Common Icons:

• e-menu - Hamburger menu
• e-home - Home icon
• e-setting - Settings gear
• e-cut, e-copy, e-paste - Edit operations
• e-bold, e-italic, e-underline - Text formatting
• e-align-left, e-align-center, e-align-right - Text alignment

First Example

Here's a complete working example for a new React app:

App.tsx:

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";
import './App.css';

const App = () => {
  return (
    <div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass='e-inherit menu' iconCss='e-icons e-menu'></ButtonComponent>
        <span className="regular">React AppBar</span>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass='e-inherit login'>FREE TRIAL</ButtonComponent>
      </AppBarComponent>
      
      <div className="appbar-content" style={{ padding: '20px' }}>
        <h2>Welcome to AppBar Demo</h2>
        <p>This is your main content area below the AppBar.</p>
      </div>
    </div>
  );
}

export default App;

App.css:

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

.control-container {
  width: 100%;
}

.appbar-content {
  font-family: Arial, sans-serif;
  color: #333;
}

Running the App

Start the development server:

npm run dev     # If using Vite
# or
npm start       # If using Create React App

The app will open in your browser at url (Vite) or url (Create React App).

What You Should See

• A blue/primary colored bar at the top
• Menu icon (hamburger) on the left
• "React AppBar" text next to the menu
• Flexible space in the middle
• "FREE TRIAL" button on the right
• Content area below the AppBar

Next Steps

• Positioning: Learn about top, bottom, and sticky positioning in positioning-and-layout.md
• Styling: Explore color modes and size modes in size-and-color-modes.md
• Advanced: Build complex layouts with menus and sidebars in design-patterns.md

Positioning and Layout

Table of Contents

• Position Overview
• Top AppBar (Default)
• Bottom AppBar
• Sticky AppBar
• Spacer for Content Alignment
• Separator for Visual Grouping
• Responsive Design

Position Overview

The AppBar position can be controlled using:

• `position` prop: Sets vertical position ("Top" | "Bottom")
• `isSticky` prop: Makes AppBar fixed during scroll (boolean)

Top AppBar (Default)

Top positioning is the default behavior. The AppBar sits at the top of your content.

When to use:

• Main application header
• Navigation menus
• Logo and branding placement
• Desktop applications

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
      </AppBarComponent>
      
      <div className="appbar-content" style={{ padding: '20px', fontSize: '12px' }}>
        <p>Main content of your application goes here.</p>
        <p>Scroll down to see more content while AppBar stays at top.</p>
        {/* Add more content */}
      </div>
    </>
  );
}

export default App;

Key Points:

• Default position value is "Top"
• Content flows below the AppBar
• No prop needed to set top position

Bottom AppBar

Bottom positioning places the AppBar at the bottom of your content. Use for mobile action bars or floating action buttons.

When to use:

• Mobile apps (bottom navigation is standard)
• Action bars (Save, Cancel, Delete buttons)
• Floating action buttons
• Secondary navigation

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <>
      <div className="main-content" style={{ height: '400px', padding: '20px' }}>
        <h2>Document or Form Content</h2>
        <p>Your main content goes here.</p>
      </div>
      
      <AppBarComponent colorMode="Primary" position="Bottom">
        <ButtonComponent cssClass="e-inherit">Cancel</ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit" isPrimary>Save</ButtonComponent>
      </AppBarComponent>
    </>
  );
}

export default App;

Common Patterns:

• Mobile navigation: Bottom AppBar with home, search, profile buttons
• Document editor: Bottom AppBar with Save/Cancel/Delete
• List with actions: Bottom AppBar with select, delete, share options

Sticky AppBar

Sticky AppBar stays fixed at the top (or bottom) of the viewport while you scroll the content beneath it.

When to use:

• Keep navigation always accessible
• Long scrolling pages or documents
• Fixed toolbars that users always need access to
• Sticky headers in dashboards

Method 1: Using isSticky Prop

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <>
      <AppBarComponent colorMode="Primary" isSticky>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <span>My App</span>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">Profile</ButtonComponent>
      </AppBarComponent>
      
      <div style={{ padding: '20px' }}>
        <h2>Scroll Down to See Sticky AppBar</h2>
        {/* Long content that scrolls */}
        {Array.from({length: 30}).map((_, i) => (
          <p key={i}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        ))}
      </div>
    </>
  );
}

export default App;

Sticky + Bottom Position

Combine sticky with bottom position for action bars:

<AppBarComponent 
  colorMode="Primary" 
  position="Bottom" 
  isSticky
>
  <ButtonComponent cssClass="e-inherit">Discard</ButtonComponent>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit" isPrimary>Submit</ButtonComponent>
</AppBarComponent>

Spacer for Content Alignment

The spacer (e-appbar-spacer) creates flexible horizontal spacing to push content to edges.

When to use:

• Logo/brand on left, navigation in center, user profile on right
• Left-aligned menu button, right-aligned search box
• Centering content with balanced spacing

Single Spacer (Right-Align)

<AppBarComponent colorMode="Primary">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span>My App</span>
  <div className="e-appbar-spacer"></div>
  {/* Everything below pushes to the right */}
  <ButtonComponent cssClass="e-inherit">Settings</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Logout</ButtonComponent>
</AppBarComponent>

Multiple Spacers (Distributed Layout)

<AppBarComponent colorMode="Primary">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <div className="e-appbar-spacer"></div>
  {/* Center content */}
  <span>Centered Title</span>
  <div className="e-appbar-spacer"></div>
  {/* Right-aligned buttons */}
  <ButtonComponent cssClass="e-inherit">Help</ButtonComponent>
</AppBarComponent>

Key Points:

• <div className="e-appbar-spacer"></div> takes remaining horizontal space
• Multiple spacers distribute content evenly
• No width/flex properties needed—spacer handles it

Separator for Visual Grouping

The separator (e-appbar-separator) displays a vertical line to visually group related buttons or content.

When to use:

• Group editing tools (Cut, Copy, Paste)
• Separate navigation from actions (Menu | Home, About | Settings, Logout)
• Organize toolbar buttons into logical sections

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary" mode="Dense">
      {/* Editing tools group */}
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
      
      {/* Visual separator */}
      <div className="e-appbar-separator"></div>
      
      {/* Formatting group */}
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bold"></ButtonComponent>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-italic"></ButtonComponent>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-underline"></ButtonComponent>
      
      {/* Another separator */}
      <div className="e-appbar-separator"></div>
      
      {/* Alignment group */}
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-left"></ButtonComponent>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-center"></ButtonComponent>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-align-right"></ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Responsive Design

Use media queries to adjust AppBar layout for different screen sizes.

Example: Responsive Navigation

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React, { useState } from "react";
import './App.css';

const App = () => {
  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span className="brand">My Brand</span>
      
      {/* Visible on desktop, hidden on mobile */}
      <div className="nav-desktop">
        <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
        <ButtonComponent cssClass="e-inherit">About</ButtonComponent>
        <ButtonComponent cssClass="e-inherit">Services</ButtonComponent>
      </div>
      
      <div className="e-appbar-spacer"></div>
      
      <ButtonComponent cssClass="e-inherit">Contact</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

App.css:

/* Desktop: Show navigation buttons */
@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
    gap: 10px;
  }
}

/* Mobile: Hide navigation buttons */
@media (max-width: 767px) {
  .nav-desktop {
    display: none;
  }
}

.brand {
  margin-left: 10px;
  font-weight: bold;
}

Responsive Bottom AppBar

For mobile-first apps, switch to bottom AppBar on mobile and top on desktop:

const App = () => {
  const isMobile = window.innerWidth < 768;
  
  return (
    <AppBarComponent 
      colorMode="Primary"
      position={isMobile ? "Bottom" : "Top"}
    >
      {/* AppBar content */}
    </AppBarComponent>
  );
}

Complete Example: Full-Featured Layout

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <>
      {/* Main Navigation AppBar - Sticky at top */}
      <AppBarComponent 
        colorMode="Primary" 
        isSticky
      >
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <span className="logo">MyApp</span>
        
        <div className="e-appbar-spacer"></div>
        <div className="e-appbar-separator"></div>
        
        <ButtonComponent cssClass="e-inherit">Profile</ButtonComponent>
      </AppBarComponent>
      
      {/* Main content with long scrolling */}
      <div style={{ padding: '20px', minHeight: '2000px' }}>
        <h2>Long Content Area</h2>
        {/* Your page content */}
      </div>
      
      {/* Bottom Action AppBar - Fixed at bottom */}
      <AppBarComponent 
        colorMode="Primary" 
        position="Bottom"
      >
        <ButtonComponent cssClass="e-inherit">Cancel</ButtonComponent>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit" isPrimary>Save</ButtonComponent>
      </AppBarComponent>
    </>
  );
}

export default App;

This creates a sophisticated layout with sticky top navigation and fixed bottom actions.

Size and Color Modes

Table of Contents

• Mode Property Overview
• Regular Mode (Default)
• Prominent Mode
• Dense Mode
• ColorMode Property Overview
• Light Color Mode
• Dark Color Mode
• Primary Color Mode
• Inherit Color Mode
• Mode and ColorMode Combinations

Mode Property Overview

The mode prop controls the height/size of the AppBar. Choose based on your content and visual hierarchy needs.

Regular Mode (Default)

Regular mode is the default height, suitable for most applications.

When to use:

• Standard navigation bars
• Most web applications
• Desktop apps
• When you don't need extra vertical space

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span className="regular">Regular AppBar</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Characteristics:

• Default height provides good balance
• Suitable for icons + text content
• Works well with regular-sized buttons
• Recommended height: ~56px

Prominent Mode

Prominent mode has extra height, ideal for large titles, branding, or hero sections.

When to use:

• Main page headers with large titles
• Application branding with logos
• Hero sections with background images
• Sections requiring visual hierarchy

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent 
      colorMode="Primary" 
      mode="Prominent" 
      cssClass="prominent-appbar"
    >
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span className="prominent">AppBar with Prominent Mode</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Customizing Prominent Height

By default, prominent mode has a standard height. Customize it with CSS:

/* Adjust the height of prominent AppBar */
.prominent-appbar.e-prominent {
  height: 200px; /* Custom height */
}

.prominent {
  align-self: center;  /* Vertically center text */
  white-space: normal; /* Allow text wrapping */
  font-size: 24px;     /* Larger font for prominent mode */
}

Prominent with Background Image

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";
import './App.css';

const App = () => {
  return (
    <AppBarComponent 
      colorMode="Primary" 
      mode="Prominent" 
      cssClass="prominent-hero"
    >
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span className="hero-title">Welcome to Our App</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">Get Started</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

App.css:

.prominent-hero {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
              url('hero-image.jpg') center/cover;
  height: 250px;
}

.hero-title {
  font-size: 28px;
  color: white;
  font-weight: bold;
}

Dense Mode

Dense mode has reduced height, perfect for tight spaces and toolbars.

When to use:

• Compact toolbars
• Mobile layouts (save vertical space)
• Multiple AppBars on same page
• Document editors with tool palettes

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary" mode="Dense">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span className="dense">Dense AppBar</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Characteristics:

• Compact height (~48px)
• Saves vertical screen real estate
• Better for mobile devices
• Good for stacked toolbars

Dense Toolbar Example

<AppBarComponent colorMode="Dark" mode="Dense">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
  <div className="e-appbar-separator"></div>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-undo"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-redo"></ButtonComponent>
</AppBarComponent>

ColorMode Property Overview

The colorMode prop controls the background and text colors. Choose to match your brand or visual hierarchy.

Light Color Mode (Default)

Light mode displays with a light background and dark text. It's the default and most accessible.

When to use:

• Default navigation bars
• When you need minimal visual emphasis
• Accessibility priority
• Clean, minimalist designs

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Light">
      <a href="/" role="link" aria-label="Syncfusion">
        <div className="syncfusion-logo"></div>
      </a>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent isPrimary>Sign In</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Characteristics:

• Light/white background
• Dark text for contrast
• Most accessible by default
• Professional appearance

Dark Color Mode

Dark mode displays with a dark background and light text. Great for modern, high-contrast designs.

When to use:

• Dark/night mode interfaces
• Modern applications
• High contrast needs
• Gaming or media applications

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Dark">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span>Dark Mode AppBar</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-setting"></ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Characteristics:

• Dark/black background
• Light/white text
• High contrast, modern look
• Reduces eye strain in low-light environments

Primary Color Mode

Primary mode uses your brand's primary color for maximum visual impact and navigation emphasis.

When to use:

• Main application navigation
• Brand emphasis
• Call-to-action headers
• Primary navigation bars

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
      <span>Primary AppBar</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass="e-inherit">FREE TRIAL</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Characteristics:

• Brand primary color background
• Automatically adjusted text color
• Strong visual emphasis
• Most commonly used in modern apps

Inherit Color Mode

Inherit mode takes colors from the parent element, allowing you to create custom themes and context-aware AppBars.

When to use:

• Custom color schemes
• Dynamic theming
• Context-aware styling
• Advanced customization

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";
import './App.css';

const App = () => {
  return (
    <div className="custom-appbar-container">
      <AppBarComponent colorMode="Inherit">
        <a href="/" role="link">
          <div className="syncfusion-logo"></div>
        </a>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent isPrimary>Sign In</ButtonComponent>
      </AppBarComponent>
    </div>
  );
}

export default App;

App.css:

.custom-appbar-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.custom-appbar-container .e-appbar {
  /* AppBar inherits background and color from parent */
  background: inherit;
  color: inherit;
}

Mode and ColorMode Combinations

Combine mode and colorMode for different effects:

Example 1: Prominent Dark Header

<AppBarComponent 
  mode="Prominent" 
  colorMode="Dark" 
  cssClass="prominent-dark"
>
  <span>Large Dark Header</span>
</AppBarComponent>

Example 2: Dense Primary Toolbar

<AppBarComponent 
  mode="Dense" 
  colorMode="Primary"
>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
</AppBarComponent>

Example 3: Regular Light Navigation

<AppBarComponent colorMode="Light">
  <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">About</ButtonComponent>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent>Login</ButtonComponent>
</AppBarComponent>

Example 4: Dense Inherit (Custom)

<div style={{ background: '#ff6b6b', color: 'white' }}>
  <AppBarComponent mode="Dense" colorMode="Inherit">
    <span>Custom Colored Compact Bar</span>
  </AppBarComponent>
</div>

Complete Example: Multiple AppBars with Different Modes

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <>
      {/* Main Navigation - Regular Primary */}
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <span>My Application</span>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">Account</ButtonComponent>
      </AppBarComponent>
      
      {/* Secondary Toolbar - Dense Dark */}
      <AppBarComponent mode="Dense" colorMode="Dark">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
      </AppBarComponent>
      
      {/* Hero Section - Prominent Light */}
      <AppBarComponent mode="Prominent" colorMode="Light">
        <span className="hero-text">Welcome to Our Service</span>
      </AppBarComponent>
      
      <div style={{ padding: '20px' }}>
        <h2>Page Content</h2>
        <p>Your main content goes here.</p>
      </div>
    </>
  );
}

export default App;

This demonstrates how different combinations create visual hierarchy and serve different purposes in your application.

Styling and Accessibility

Table of Contents

• CSS Customization
• Available CSS Classes
• CssClass Property
• HTML Attributes
• Accessibility Features
• WCAG 2.2 Compliance
• Keyboard Navigation
• Screen Reader Support
• Color Contrast
• Mobile and RTL Support

CSS Customization

The AppBar component provides CSS classes for styling different aspects of the component. You can override these classes to customize appearance.

Basic Customization

/* Main AppBar container */
.e-appbar {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

/* Prominent AppBar */
.e-appbar.e-prominent {
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Dense AppBar */
.e-appbar.e-dense {
  height: 48px;
}

/* Light color mode */
.e-appbar.e-light {
  background-color: #f8f9fa;
  color: #333;
}

/* Dark color mode */
.e-appbar.e-dark {
  background-color: #212529;
  color: #fff;
}

Available CSS Classes

The AppBar generates specific CSS classes based on its properties:

CssClass Property

Use the cssClass prop to apply custom classes to the AppBar:

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";
import './App.css';

const App = () => {
  return (
    <AppBarComponent 
      colorMode="Primary" 
      cssClass="custom-appbar"
    >
      <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-home"></ButtonComponent>
      <span>Custom Styled AppBar</span>
    </AppBarComponent>
  );
}

export default App;

App.css:

/* Override default styling with custom class */
.custom-appbar {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-bottom: 3px solid #ff6b6b;
  padding: 12px 24px;
}

.custom-appbar .e-inherit {
  font-weight: 500;
}

Multi-Class Styling

Apply multiple classes for complex customization:

<AppBarComponent 
  colorMode="Primary" 
  mode="Prominent"
  cssClass="custom-appbar elevated-shadow gradient-bg"
>
  {/* Content */}
</AppBarComponent>

App.css:

.custom-appbar {
  /* Custom styling */
}

.elevated-shadow {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

HTML Attributes

Set HTML attributes on the AppBar using the standard JSX attributes:

ARIA Labels for Accessibility

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  return (
    <AppBarComponent 
      colorMode="Primary"
      role="banner"
      aria-label="Main application navigation bar"
    >
      <ButtonComponent 
        cssClass="e-inherit" 
        iconCss="e-icons e-menu"
        aria-label="Open navigation menu"
      ></ButtonComponent>
      
      <span>Application Title</span>
      
      <div className="e-appbar-spacer"></div>
      
      <ButtonComponent 
        cssClass="e-inherit" 
        aria-label="User account menu"
      >
        Account
      </ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Data Attributes for Custom Functionality

<AppBarComponent 
  colorMode="Primary"
  data-testid="main-appbar"
  data-analytics="navigation"
>
  {/* Content */}
</AppBarComponent>

Accessibility Features

The AppBar component is built with accessibility in mind and supports:

WCAG 2.2 Compliance

Section 508 Support

✓ Fully compliant with Section 508 accessibility standards

Screen Reader Support

✓ All AppBar content is announced correctly by screen readers

Keyboard Navigation

✓ Full keyboard support with Tab navigation between controls

Color Contrast

✓ All color modes meet WCAG contrast requirements

WCAG 2.2 Compliance

The AppBar meets WCAG 2.2 standards across all levels:

// Compliant AppBar structure
<AppBarComponent 
  colorMode="Primary"
  role="banner"
  aria-label="Application navigation"
>
  <ButtonComponent 
    cssClass="e-inherit"
    iconCss="e-icons e-menu"
    aria-label="Toggle navigation menu"
  ></ButtonComponent>
  
  <nav aria-label="Main navigation">
    <span>Navigation Items</span>
  </nav>
  
  <div className="e-appbar-spacer"></div>
  
  <div role="navigation" aria-label="User menu">
    <ButtonComponent>Profile</ButtonComponent>
  </div>
</AppBarComponent>

Sufficient Color Contrast

All color modes provide sufficient contrast ratios:

• Light mode: Dark text on light background (✓ 4.5:1)
• Dark mode: Light text on dark background (✓ 4.5:1)
• Primary mode: Adjusted text on brand color (✓ 4.5:1)

Keyboard Navigation

The AppBar fully supports keyboard navigation:

Navigation Keys

Example: Keyboard-Accessible AppBar

import { AppBarComponent, MenuComponent, MenuItemModel } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  const menuItems: MenuItemModel[] = [
    {
      text: 'File',
      items: [
        { text: 'New (Ctrl+N)' },
        { text: 'Open (Ctrl+O)' },
        { text: 'Save (Ctrl+S)' }
      ]
    },
    {
      text: 'Edit',
      items: [
        { text: 'Undo (Ctrl+Z)' },
        { text: 'Redo (Ctrl+Y)' },
        { text: 'Cut (Ctrl+X)' }
      ]
    }
  ];

  return (
    <AppBarComponent colorMode="Primary">
      {/* Keyboard accessible menu */}
      <MenuComponent 
        cssClass="e-inherit"
        items={menuItems}
      ></MenuComponent>
      
      {/* Keyboard accessible buttons */}
      <ButtonComponent 
        cssClass="e-inherit"
        tabIndex={0}
        aria-label="Save document (Ctrl+S)"
      >
        Save
      </ButtonComponent>
      
      <ButtonComponent 
        cssClass="e-inherit"
        tabIndex={0}
        aria-label="Print document (Ctrl+P)"
      >
        Print
      </ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

Screen Reader Support

The AppBar is fully compatible with screen readers (NVDA, JAWS, VoiceOver):

Screen Reader Announcements

<AppBarComponent 
  colorMode="Primary"
  role="banner"
  aria-label="Application header and main navigation"
>
  <ButtonComponent 
    cssClass="e-inherit"
    iconCss="e-icons e-menu"
    aria-label="Open navigation menu"
    title="Open navigation menu"  // Tooltip for mouse users
  ></ButtonComponent>
  
  <span aria-live="polite">Application Status</span>
  
  <div className="e-appbar-spacer"></div>
  
  <ButtonComponent 
    cssClass="e-inherit"
    iconCss="e-icons e-user"
    aria-label="User account menu"
    aria-haspopup="menu"
    aria-expanded="false"
  ></ButtonComponent>
</AppBarComponent>

Screen Reader Testing

The AppBar is validated with:

• NVDA (Windows)
• JAWS (Windows)
• VoiceOver (macOS/iOS)

All content is properly announced and navigable.

Color Contrast

All AppBar color modes meet WCAG AA standards (4.5:1 contrast ratio):

Contrast Verification

// Light Mode - Dark text on light background
<AppBarComponent colorMode="Light">
  {/* Contrast ratio: 5.2:1 - WCAG AAA ✓ */}
</AppBarComponent>

// Dark Mode - Light text on dark background
<AppBarComponent colorMode="Dark">
  {/* Contrast ratio: 5.1:1 - WCAG AAA ✓ */}
</AppBarComponent>

// Primary Mode - Theme color with adjusted text
<AppBarComponent colorMode="Primary">
  {/* Contrast ratio: 4.8:1 - WCAG AA ✓ */}
</AppBarComponent>

Custom Color Verification

When customizing colors, ensure sufficient contrast:

/* Good: High contrast */
.custom-appbar {
  background-color: #0066cc;  /* Blue */
  color: #ffffff;             /* White */
  /* Contrast ratio: 8.5:1 ✓ */
}

/* Bad: Insufficient contrast */
.custom-appbar {
  background-color: #cccccc;  /* Light gray */
  color: #999999;             /* Medium gray */
  /* Contrast ratio: 1.4:1 ✗ */
}

Use a contrast checker tool: url

Mobile and RTL Support

The AppBar fully supports mobile layouts and right-to-left languages:

Mobile Support

The AppBar responds to touch interactions and mobile viewports:

const App = () => {
  const isMobile = window.innerWidth < 768;
  
  return (
    <AppBarComponent 
      colorMode="Primary"
      mode={isMobile ? "Dense" : "Regular"}  // Compact on mobile
      position={isMobile ? "Top" : "Top"}
    >
      {/* Mobile-optimized content */}
    </AppBarComponent>
  );
}

Right-to-Left (RTL) Support

The AppBar automatically mirrors layout for RTL languages:

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";

const App = () => {
  const isRTL = true; // Set based on language
  
  return (
    <div dir={isRTL ? "rtl" : "ltr"}>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
        <span>التطبيق</span> {/* Arabic text */}
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass="e-inherit">تسجيل الدخول</ButtonComponent>
      </AppBarComponent>
    </div>
  );
}

export default App;

CSS for RTL:

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

[dir="rtl"] .e-appbar-separator {
  transform: scaleX(-1);
}

Device Support

✓ Desktop browsers ✓ Tablet/iPad ✓ Mobile phones ✓ Touch screens ✓ Keyboard navigation

Accessibility Validation Tools

The AppBar is validated using automated accessibility testing:

Tools Used

• Accessibility Checker - Automatic compliance validation
• Axe-core - Accessibility audit tool
• WAVE - Web accessibility evaluation tool

Running Accessibility Tests

# Install accessibility checker
npm install accessibility-checker

# Run validation
npx accessibility-checker --url url

Manual Testing Checklist

• [ ] Tab through all controls - all interactive elements accessible
• [ ] Test with screen reader - all content announced correctly
• [ ] Test with keyboard only - all functionality accessible
• [ ] Test color contrast - meets WCAG AA minimum
• [ ] Test with browser zoom - layout responsive at 200%
• [ ] Test RTL mode - layout mirrors correctly
• [ ] Test on mobile - touch interactions work
• [ ] Test with high contrast mode - visually distinct

Complete Accessible AppBar Example

import { AppBarComponent, MenuComponent, MenuItemModel } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import React from "react";
import './App.css';

const App = () => {
  const navItems: MenuItemModel[] = [
    { text: 'Home' },
    { text: 'About' },
    { text: 'Services' },
    { text: 'Contact' }
  ];

  return (
    <>
      {/* Accessible AppBar */}
      <AppBarComponent 
        colorMode="Primary"
        role="banner"
        aria-label="Application header and main navigation"
      >
        {/* Menu button */}
        <ButtonComponent 
          cssClass="e-inherit"
          iconCss="e-icons e-menu"
          aria-label="Open navigation menu"
          title="Open navigation menu"
        ></ButtonComponent>
        
        {/* Brand/title */}
        <h1 className="app-title" aria-label="My Application">
          My Application
        </h1>
        
        {/* Navigation menu */}
        <nav aria-label="Main navigation">
          <MenuComponent 
            cssClass="e-inherit"
            items={navItems}
          ></MenuComponent>
        </nav>
        
        {/* Spacer for layout */}
        <div className="e-appbar-spacer"></div>
        
        {/* User controls */}
        <div role="group" aria-label="User controls">
          <ButtonComponent 
            cssClass="e-inherit"
            aria-label="User settings"
          >
            Settings
          </ButtonComponent>
          <ButtonComponent 
            cssClass="e-inherit"
            aria-label="Logout"
          >
            Logout
          </ButtonComponent>
        </div>
      </AppBarComponent>
      
      {/* Page content */}
      <main className="app-content">
        <h2>Welcome</h2>
        <p>Your application content goes here.</p>
      </main>
    </>
  );
}

export default App;

App.css:

.app-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.app-content {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Focus indicators for keyboard navigation */
.e-appbar button:focus,
.e-appbar a:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

This example demonstrates best practices for accessible AppBar implementation.