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.

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".