Implementing Syncfusion AppBar

When to Use This Skill

Use the AppBar component when you need to:

Create top or bottom navigation bars with consistent branding and action placement
Display application titles and branding with sizing flexibility (regular, prominent, or dense modes)
Provide multiple color themes to match application design (light, dark, primary, or inherited colors)
Support responsive layouts that adapt to different screen sizes with media queries
Integrate navigation elements like menus, buttons, and sidebars using the inheritance system
Implement sticky/fixed positioning for persistent access to top-level actions during scrolling
Support right-to-left (RTL) languages with built-in directional support

Component Overview

The Syncfusion AppBar is a flexible header component that displays information and actions related to the current application screen. It provides:

Positioning Options: Top (default) or bottom placement
Size Flexibility: Regular (default), Prominent (larger), or Dense (compressed) heights
Color Modes: Light, Dark, Primary, or Inherit from parent
Sticky Support: Fixed positioning during page scrolling via
```
isSticky
```
property
Content Layout: Spacer and Separator elements for organizing content
Component Integration: Seamless styling for nested Button, DropDownButton, Menu, and TextBox via
```
e-inherit
```
CSS class
Responsive Design: Full media query support for adaptive layouts
Localization: Custom locale support with RTL rendering

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Prerequisites and system requirements verification
Project creation using Microsoft Templates or Syncfusion Extension
NuGet package installation and configuration
Tag Helper registration in _ViewImports.cshtml
Stylesheet and script references (CDN setup)
Script Manager registration
Basic AppBar implementation
First render and verification

Positioning and Layout

📄 Read: references/positioning.md

Top positioning behavior (default)
Bottom positioning with
```
position="Bottom"
```
property
Sticky positioning for fixed headers with
```
isSticky="true"
```
Combining position with responsive design
Real-world navigation patterns and use cases

Sizing Modes

📄 Read: references/sizing-modes.md

Regular mode (default height,
```
mode="Regular"
```
)
Prominent mode for larger content (
```
mode="Prominent"
```
)
Dense mode for compact layouts (
```
mode="Dense"
```
)
Use case guidance and content adaptation per mode
Height customization strategies

Color and Theme Modes

📄 Read: references/color-modes.md

Light mode (default appearance,
```
colorMode="Light"
```
)
Dark mode for contrast (
```
colorMode="Dark"
```
)
Primary mode for brand colors (
```
colorMode="Primary"
```
)
Inherit mode for parent element colors (
```
colorMode="Inherit"
```
)
Integration with CSS theme system

Design Patterns and Layouts

📄 Read: references/design-layouts.md

Spacer element for dynamic content distribution
Separator element for visual content grouping
Media queries for responsive AppBar design
Component integration patterns (Menu, Button, DropDownButton with
```
e-inherit
```
)
SideBar integration and toggle patterns
Real-world design examples and best practices

Customization and Advanced Features

📄 Read: references/customization.md

CSS class customization via
```
cssClass
```
property
HTML attributes configuration via
```
htmlAttributes
```
Right-to-left (RTL) support with
```
enableRtl="true"
```
Component state persistence with
```
enablePersistence="true"
```
Locale customization for internationalization
Advanced styling and edge cases

Complete API Reference

📄 Read: references/api-reference.md

All properties with type information and usage
Event declarations with proper TagHelper binding syntax
Enumeration values for position, mode, and color
Code examples for APIs not covered in other references
API summary and cross-references

Quick Start Example

Create a basic AppBar with navigation buttons:

html

<div class="col-lg-12 control-section default-appbar-section">
    <ejs-appbar id="defaultAppBar" colorMode="Primary">
        <e-content-template>
            <ejs-button aria-label="menu" id="menuButton" cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
            <span class="regular" style="margin:0 5px">My Application</span>
            <div class="e-appbar-spacer"></div>
            <ejs-button id="trialButton" cssClass="e-inherit" content="Get Started"></ejs-button>
        </e-content-template>
    </ejs-appbar>
</div>

Key Elements:

```
colorMode="Primary"
```
- Uses primary brand color theme
```
<e-content-template>
```
- Container for AppBar content
```
cssClass="e-inherit"
```
- Buttons inherit AppBar colors
```
<div class="e-appbar-spacer"></div>
```
- Pushes content to opposite sides

Common Patterns

Pattern 1: Top Navigation with Title and Actions

html

<ejs-appbar id="navAppBar" position="Top">
    <e-content-template>
        <!-- Left: Logo/Menu -->
        <ejs-button iconCss="e-icons e-menu" cssClass="e-inherit"></ejs-button>
        <!-- Center: Title -->
        <span style="margin: 0 auto;">Dashboard</span>
        <!-- Right: User Actions -->
        <div class="e-appbar-spacer"></div>
        <ejs-button content="Profile" cssClass="e-inherit"></ejs-button>
    </e-content-template>
</ejs-appbar>

Pattern 2: Sticky Header for Persistent Navigation

html

<ejs-appbar id="stickyAppBar" isSticky="true" colorMode="Dark">
    <e-content-template>
        <!-- Sticky content remains visible during scroll -->
    </e-content-template>
</ejs-appbar>

Pattern 3: Prominent Mode for Feature Headers

html

<ejs-appbar id="prominentAppBar" mode="Prominent" colorMode="Primary">
    <e-content-template>
        <!-- Larger area for rich content, titles, images -->
    </e-content-template>
</ejs-appbar>

Key Properties Overview

Property	Type	Default	Purpose
`position`	AppBarPosition	Top	Placement: Top or Bottom
`mode`	AppBarMode	Regular	Height: Regular, Prominent, or Dense
`colorMode`	AppBarColor	Light	Theme: Light, Dark, Primary, or Inherit
`isSticky`	boolean	false	Fixed positioning during scroll
`cssClass`	string	-	Custom CSS classes for styling
`enableRtl`	boolean	false	Right-to-left language support
`enablePersistence`	boolean	false	State persistence between page reloads
`locale`	string	en-US	Custom culture and localization
`htmlAttributes`	Record	-	Additional HTML attributes

Common Use Cases

E-Commerce Header: Top sticky AppBar with logo, search, and cart icon
Dashboard Navigation: Prominent AppBar with breadcrumbs and quick actions
Mobile Navigation: Dense AppBar with bottom positioning for touch-friendly layouts
Admin Panel: Dark themed AppBar with user menu and notification badges
Content Platform: Featured article header using Prominent mode with image background

Next Steps:

For setup instructions, read Getting Started Guide
For design decisions, read Positioning and Sizing Modes
For complete API details, read API Reference

syncfusion-aspnetcore-appbar

NPX Install

Tags

SKILL.md Content

Implementing Syncfusion AppBar

When to Use This Skill

Component Overview

Documentation and Navigation Guide

Getting Started

Positioning and Layout

Sizing Modes

Color and Theme Modes

Design Patterns and Layouts

Customization and Advanced Features

Complete API Reference

Quick Start Example

Common Patterns

Pattern 1: Top Navigation with Title and Actions

Pattern 2: Sticky Header for Persistent Navigation

Pattern 3: Prominent Mode for Feature Headers

Key Properties Overview

Common Use Cases