Implementing AppBar in Syncfusion TypeScript

When to Use This Skill

Use this skill when you need to:

• Create a responsive application header or navigation bar
• Display branding, screen titles, or navigation actions
• Build app bars with buttons, menus, or custom content
• Position bars at top, bottom, or as sticky elements
• Apply color modes (Light, Dark, Primary, Inherit)
• Customize sizing (Regular, Prominent, Dense)
• Style and theme your AppBar
• Integrate complex layouts with spacers, separators, and components
• Ensure responsive design for different screen sizes
• Implement accessibility features

AppBar Overview

The AppBar (also known as action bar or nav bar) is a Syncfusion navigation component that displays information and actions related to the current application screen. It provides:

• Flexible positioning: Top (default), Bottom, or Sticky
• Multiple sizing modes: Regular, Prominent, Dense
• Color themes: Light, Dark, Primary, Inherit
• Component integration: Buttons, DropDownButtons, Menus, Sidebars
• Layout elements: Spacers for content distribution, Separators for grouping
• Responsive design: Automatic adaptation for mobile and desktop
• Accessibility support: ARIA attributes, keyboard navigation, semantic HTML
• Customization: CSS classes, custom themes, HtmlAttributes

Key Dependencies

@syncfusion/ej2-navigations  // AppBar component
@syncfusion/ej2-base         // Base utilities
@syncfusion/ej2-buttons      // Button integration
@syncfusion/ej2-splitbuttons // DropDownButton support

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and npm package setup
• TypeScript and ES5 JavaScript approaches
• Basic AppBar initialization
• CSS imports and theme configuration
• Adding buttons and content
• First render and CDN references

Positioning and Sticky Behavior

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

• Top AppBar (default positioning)
• Bottom AppBar positioning
• Sticky AppBar behavior (isSticky property)
• Use cases for each position
• Positioning property configuration
• ScrollView interaction

Size and Height Modes

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

• Regular AppBar (default height)
• Prominent AppBar (larger height for titles/images)
• Dense AppBar (compact height)
• Height customization techniques
• When to use each mode
• CSS class application

Color and Theme Modes

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

• Light AppBar (light background and text)
• Dark AppBar (dark background and text)
• Primary AppBar (primary brand colors)
• Inherit AppBar (inherit parent colors)
• Button inheritance with e-inherit CSS class
• Component integration (Buttons, Menu, DropDownButton)

Styling and Customization

📄 Read: references/styling-customization.md

• CSS class selectors and purposes
• CssClass property for custom styling
• HtmlAttributes for ARIA labels and accessibility
• Custom theme creation
• Theme Studio integration
• CSS variable customization

Layout Patterns and Design

📄 Read: references/layout-patterns-and-design.md

• Spacer element (e-appbar-spacer) for content distribution
• Separator element (e-appbar-separator) for visual grouping
• Button and DropDownButton integration patterns
• Menu component integration
• Sidebar with TreeView integration
• Responsive design and media queries
• Complex navigation layouts

Best Practices and Accessibility

📄 Read: references/best-practices-and-accessibility.md

• Semantic HTML structure
• ARIA attributes and accessibility
• Keyboard navigation support
• Color contrast and accessibility compliance
• Responsive breakpoints for mobile
• Performance optimization
• Common pitfalls and troubleshooting

API Reference

📄 Read: references/api-reference.md

• Complete API documentation for all properties, methods, and events
• All 9 properties with type definitions (colorMode, cssClass, enablePersistence, enableRtl, htmlAttributes, isSticky, locale, mode, position)
• All 8 methods with parameters and return types (addEventListener, appendTo, dataBind, destroy, getRootElement, refresh, removeEventListener, inject)
• All 2 events with detailed examples (created, destroyed)
• State persistence across page reloads (enablePersistence)
• Internationalization and RTL support (locale, enableRtl)
• Event handling patterns and lifecycle management
• Complete working examples for all APIs

Quick Start Example

Basic AppBar Setup

TypeScript:

import { AppBar } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";

// Create AppBar with Primary color
const appbarObj: AppBar = new AppBar({
  colorMode: 'Primary'
});
appbarObj.appendTo("#appbar");

// Add buttons with inherited styling
const menuButton: Button = new Button({ 
  cssClass: 'e-inherit', 
  iconCss: 'e-icons e-menu' 
});
menuButton.appendTo('#menuBtn');

const loginButton: Button = new Button({ 
  cssClass: 'e-inherit', 
  content: 'Login' 
});
loginButton.appendTo('#loginBtn');

HTML:

<!DOCTYPE html>
<html>
<head>
  <link href="url" rel="stylesheet" />
  <link href="url" rel="stylesheet" />
  <link href="url" rel="stylesheet" />
</head>
<body>
  <header id="appbar">
    <button id="menuBtn"></button>
    <div class="e-appbar-spacer"></div>
    <button id="loginBtn"></button>
  </header>
</body>
</html>

Common Patterns

Pattern 1: Navigation with Spacer

// Center title with left menu and right login
<header id="appbar">
  <button id="menu"></button>
  <span>My App</span>
  <div class="e-appbar-spacer"></div>
  <button id="login"></button>
</header>

Pattern 2: Grouped Actions with Separator

// Edit actions | Format actions | Layout actions
<header id="appbar">
  <button id="cut"></button>
  <button id="copy"></button>
  <button id="paste"></button>
  <div class="e-appbar-separator"></div>
  <button id="bold"></button>
  <button id="italic"></button>
</header>

Pattern 3: Prominent Header with Background

Use mode: 'Prominent' with background image for hero headers.

Pattern 4: Sticky Navigation

Set isSticky: true for persistent header during scroll.

Pattern 5: Bottom Navigation Bar

Set position: 'Bottom' for mobile-style bottom navigation.

Key Properties Reference

Common Use Cases

Use Case 1: E-Commerce Header

// Logo, navigation menu, search, cart, profile
// Sticky, Primary color, responsive layout with e-appbar-spacer

Use Case 2: SPA Dashboard

// Menu toggle, page title, notification icon, user dropdown
// Top positioned, Prominent mode for title

Use Case 3: Mobile App Navigation

// Bottom navigation bar with icons
// Dense mode, Bottom position, Light/Dark color mode

Use Case 4: Document Editor

// Grouped editing tools with separators
// Regular mode, Primary color, e-inherit buttons for consistency

Use Case 5: Complex Dashboard with Sidebar

// Menu toggle + AppBar at top + Sidebar below
// Sticky AppBar, responsive media queries

Next Steps

1. Get Started: Read Getting Started to set up your first AppBar
2. Position Your Bar: Choose position with Positioning Guide
3. Select Size Mode: Pick size with Size Modes
4. Apply Colors: Set theme with Color Modes
5. Style & Customize: Customize look with Styling
6. Design Layout: Create complex patterns with Layout Patterns
7. Ensure Quality: Follow Best Practices

Control: Syncfusion AppBar | Platform: TypeScript | Version: EJ2 32.1.19+