Syncfusion Blazor Appbar

Syncfusion Blazor AppBar Component

The Syncfusion Blazor AppBar is a navigation component that displays information and actions related to the current application screen. It provides a consistent header area for branding, navigation, and actions across your application with flexible configuration options for appearance and behavior.

When to Use This Skill

Use this skill when implementing an AppBar in Blazor applications that requires:

• Navigation headers with branding, menus, and action buttons
• Application toolbars with context-specific actions and controls
• Responsive headers that adapt to different screen sizes
• Fixed or sticky positioning at the top or bottom of the viewport
• Integration with other components like menus, buttons, sidebars
• Custom styling to match application themes and branding

Component Overview

The AppBar component provides:

• Flexible layout with spacers and separators for organizing content
• Multiple size modes (Regular, Prominent, Dense) for different use cases
• Multiple color modes (Light, Dark, Primary, Inherit) for theming
• Positioning options (Top, Bottom, Sticky) for layout control
• Child component support for buttons, menus, dropdowns, and custom content
• Responsive design with media query support

Documentation and Navigation Guide

Getting Started and Installation

📄 Read: references/getting-started.md

Read this reference when you need to:

• Install and configure the Syncfusion Blazor AppBar package
• Add required namespaces and service registrations
• Include stylesheet and script resources
• Create your first basic AppBar implementation
• Add buttons and spacers to the AppBar
• Understand the component's basic structure and usage

Size and Color Configuration

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

Read this reference when you need to:

• Configure AppBar height with size modes (Regular, Prominent, Dense)
• Use Regular AppBar for standard height navigation
• Implement Prominent AppBar for larger titles, images, or hero sections
• Apply Dense AppBar for compact, space-efficient headers
• Configure color modes (Light, Dark, Primary, Inherit)
• Apply Light mode for default light backgrounds
• Apply Dark mode for dark-themed applications
• Apply Primary mode using theme's primary colors
• Apply Inherit mode to use parent element styling
• Combine size and color modes for different visual effects

Positioning Options

📄 Read: references/positioning.md

Read this reference when you need to:

• Control AppBar position with the Position property
• Implement Top AppBar positioning (default)
• Implement Bottom AppBar for bottom-anchored navigation
• Enable Sticky AppBar behavior with the IsSticky property
• Handle scrolling behavior with sticky positioning
• Manage content layout around positioned AppBars
• Understand positioning interactions with page content

Design UI Elements

📄 Read: references/design-ui.md

Read this reference when you need to:

• Add spacing with AppBarSpacer component
• Add visual separators with AppBarSeparator component
• Implement responsive design with media queries
• Integrate SfMenu component for navigation menus
• Integrate SfButton and SfDropDownButton for actions
• Integrate SfSidebar with AppBar toggle button
• Control sidebar expand/collapse from AppBar
• Style child components with e-inherit CSS class
• Build complex AppBar layouts with multiple components

Styling and Customization

📄 Read: references/styling.md

Read this reference when you need to:

• Customize AppBar appearance with CSS classes
• Use the CssClass property for custom styling
• Override default CSS for specific elements
• Apply custom background and font colors
• Use HtmlAttributes for additional HTML attributes
• Add custom aria-label attributes
• Integrate with Theme Studio for theming
• Apply CSS variable overrides
• Understand available CSS class selectors

Quick Start Example

Here's a minimal example to create a basic AppBar with navigation:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="app-title">My Application</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

Prerequisites: 1. Install Syncfusion.Blazor.Navigations package 2. Add @using Syncfusion.Blazor.Navigations to _Imports.razor 3. Register service with builder.Services.AddSyncfusionBlazor() 4. Include theme CSS and Syncfusion script in index.html

Common Patterns

Application Header with Logo and Actions

<SfAppBar ColorMode="AppBarColor.Light">
    <a href="/" class="logo-link">
        <img src="logo.svg" alt="Company Logo" height="30" />
    </a>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Features"></SfButton>
    <SfButton CssClass="e-inherit" Content="Pricing"></SfButton>
    <SfButton CssClass="e-inherit" Content="About"></SfButton>
    <AppBarSeparator></AppBarSeparator>
    <SfButton IsPrimary="true" Content="Sign Up"></SfButton>
</SfAppBar>

Responsive AppBar with Menu Toggle

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu" @onclick="ToggleMenu"></SfButton>
    <span class="app-title">Dashboard</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-settings"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

Sticky AppBar with Navigation Menu

<SfAppBar ColorMode="AppBarColor.Dark" IsSticky="true">
    <span class="brand">MyApp</span>
    <SfMenu CssClass="e-inherit" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Home"></MenuItem>
            <MenuItem Text="Products">
                <MenuItems>
                    <MenuItem Text="Product 1"></MenuItem>
                    <MenuItem Text="Product 2"></MenuItem>
                </MenuItems>
            </MenuItem>
            <MenuItem Text="Contact"></MenuItem>
        </MenuItems>
    </SfMenu>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Account"></SfButton>
</SfAppBar>

Bottom AppBar for Mobile Actions

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-search"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-heart"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

Key Properties Reference

Child Components

Common Use Cases

1. Main Application Navigation

Create a primary navigation header with logo, menu items, and user actions.

When: Building the main navigation for web applications Pattern: Logo + Menu Items + Spacer + User Actions Reference: design-ui.md

2. Dashboard Header

Implement a dashboard toolbar with context-specific actions and controls.

When: Building admin dashboards or data-focused applications Pattern: Menu Toggle + Title + Spacer + Action Buttons Reference: design-ui.md

3. Mobile Bottom Navigation

Create a mobile-optimized bottom navigation bar with icon buttons.

When: Building mobile-responsive applications Pattern: Bottom Position + Icon Buttons Reference: positioning.md

4. Hero Section Header

Implement a prominent AppBar for landing pages with large titles and images.

When: Creating marketing or landing pages Pattern: Prominent Mode + Custom Background + Large Typography Reference: size-and-color.md

5. Compact Toolbar

Create a space-efficient toolbar for applications with limited vertical space.

When: Building data-dense applications or tools Pattern: Dense Mode + Icon Buttons + Separators Reference: size-and-color.md

6. Sidebar Toggle Navigation

Implement an AppBar that controls sidebar visibility for navigation.

When: Building applications with collapsible side navigation Pattern: Menu Button + Title + Spacer + Actions + Sidebar Integration Reference: design-ui.md

Tips for Success

• Use `e-inherit` CSS class on child buttons and menus to inherit AppBar's color scheme
• Combine AppBarSpacer to create flexible layouts that adapt to content
• Test responsive behavior with media queries for different screen sizes
• Consider sticky positioning for navigation that stays visible while scrolling
• Customize with CssClass instead of overriding default styles directly
• Match size mode to context: Regular for standard apps, Prominent for heroes, Dense for tools

Design User Interface with Blazor AppBar Component

Table of Contents

• Overview
• Spacer
• Separator
• Media Query
• Designing AppBar with Menu
• Designing AppBar with Buttons
• Designing AppBar with SideBar

Overview

The Blazor AppBar provides several components and patterns for creating sophisticated user interfaces. This guide covers layout components (Spacer, Separator), responsive design patterns (Media Query), and integration with other Syncfusion components (Menu, Buttons, Sidebar).

Spacer

AppBarSpacer provides spacing between AppBar contents, creating flexible layouts where elements can be pushed to different sides of the AppBar.

When to use:

• Separating left-aligned and right-aligned content
• Creating flexible responsive layouts
• Pushing action buttons to the right side
• Grouping related elements with space between groups

How it works:

• Acts as a flexible spacer that expands to fill available space
• Content before the spacer aligns to the left
• Content after the spacer aligns to the right
• Multiple spacers divide space equally

Basic example:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-cut"></SfButton>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-pan"></SfButton>
</SfAppBar>

This example creates three sections:

• Home button on the left
• Cut button in the center
• Pan button on the right

Common pattern - Logo and actions:

<SfAppBar ColorMode="AppBarColor.Primary">
    <!-- Left: Logo and navigation -->
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="app-title">My Application</span>
    
    <!-- Spacer pushes everything after it to the right -->
    <AppBarSpacer></AppBarSpacer>
    
    <!-- Right: User actions -->
    <SfButton CssClass="e-inherit" IconCss="e-icons e-settings"></SfButton>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

Separator

AppBarSeparator displays a vertical line to visually group or separate AppBar contents.

When to use:

• Visually grouping related buttons
• Separating different functional areas
• Creating visual hierarchy in the AppBar
• Improving scannability of multiple actions

How it works:

• Displays as a vertical line between elements
• Inherits color from the AppBar's color mode
• Provides visual separation without affecting layout spacing

Example with button groups:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <!-- Clipboard group -->
    <SfButton CssClass="e-inherit" IconCss="e-icons e-cut"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-copy"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-paste"></SfButton>
    
    <AppBarSeparator></AppBarSeparator>
    
    <!-- Text formatting group -->
    <SfButton CssClass="e-inherit" IconCss="e-icons e-bold"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-underline"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-italic"></SfButton>
    
    <AppBarSeparator></AppBarSeparator>
    
    <!-- Alignment group -->
    <SfButton CssClass="e-inherit" IconCss="e-icons e-align-left"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-align-right"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-align-center"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-justify"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

This example creates three distinct button groups separated by visual dividers.

Media Query

Media queries allow the AppBar to adapt to different screen sizes, creating responsive layouts that work across devices.

When to use:

• Building responsive applications
• Adapting navigation for mobile and desktop
• Adjusting layout based on screen width
• Optimizing content display for different devices

Responsive pattern:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <SfButton CssClass="e-inherit" Content="Home"></SfButton>
    <SfButton CssClass="e-inherit" Content="About"></SfButton>
    <SfButton CssClass="e-inherit" Content="Products"></SfButton>
    <SfButton CssClass="e-inherit" Content="Contacts"></SfButton>
    <AppBarSpacer></AppBarSpacer>
    <AppBarSeparator></AppBarSeparator>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
    
    /* Tablet and smaller */
    @media screen and (max-width: 1024px) {
        .e-appbar {
            flex-flow: row wrap;
            height: auto;
            gap: 8px;
        }
    }
    
    /* Mobile */
    @media screen and (max-width: 480px) {
        .e-appbar {
            gap: 4px;
        }
        .e-btn.e-inherit {
            margin: 0 2px;
        }
    }
</style>

Key responsive properties:

• flex-flow: row wrap - Allows items to wrap to multiple lines
• height: auto - Adjusts height for wrapped content
• gap - Adds spacing between wrapped items

Designing AppBar with Menu

The SfMenu component can be integrated into the AppBar for hierarchical navigation. Use the e-inherit CSS class to match the AppBar's styling.

When to use:

• Hierarchical navigation structures
• Dropdown menus for categories
• Multi-level navigation
• Complex navigation patterns

Basic menu integration:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    
    <SfMenu CssClass="e-inherit" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Company">
                <MenuItems>
                    <MenuItem Text="About Us"></MenuItem>
                    <MenuItem Text="Customers"></MenuItem>
                    <MenuItem Text="Blog"></MenuItem>
                    <MenuItem Text="Careers"></MenuItem>
                </MenuItems>
            </MenuItem>
        </MenuItems>
    </SfMenu>
    
    <SfMenu CssClass="e-inherit" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Products">
                <MenuItems>
                    <MenuItem Text="Developer"></MenuItem>
                    <MenuItem Text="Analytics"></MenuItem>
                    <MenuItem Text="Reporting"></MenuItem>
                    <MenuItem Text="Help Desk"></MenuItem>
                </MenuItems>
            </MenuItem>
        </MenuItems>
    </SfMenu>
    
    <SfMenu CssClass="e-inherit" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="About Us"></MenuItem>
        </MenuItems>
    </SfMenu>
    
    <SfMenu CssClass="e-inherit" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Carrers"></MenuItem>
        </MenuItems>
    </SfMenu>
    
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Important:

• Always use CssClass="e-inherit" on SfMenu to inherit AppBar colors
• Specify TValue="MenuItem" for proper type binding
• Each menu can have nested MenuItems for dropdown functionality

Designing AppBar with Buttons

The AppBar supports both SfButton and SfDropDownButton components for actions. Use the e-inherit CSS class to match the AppBar's color scheme.

When to use:

• Action buttons for user interactions
• Dropdown buttons for contextual actions
• Icon buttons for compact layouts
• Text buttons for navigation

Example with dropdown button:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SplitButtons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    
    <SfDropDownButton CssClass="e-inherit" Content="Products">
        <DropDownMenuItems>
            <DropDownMenuItem Text="Developer"></DropDownMenuItem>
            <DropDownMenuItem Text="Analytics"></DropDownMenuItem>
            <DropDownMenuItem Text="Reporting"></DropDownMenuItem>
            <DropDownMenuItem Text="E-Signature"></DropDownMenuItem>
            <DropDownMenuItem Text="Help Desk"></DropDownMenuItem>
        </DropDownMenuItems>
    </SfDropDownButton>
    
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Button styling tips:

• Use CssClass="e-inherit" for consistent styling with the AppBar
• Use IconCss for icon-only buttons
• Use Content for text or combined icon-text buttons
• Add margin with CSS for spacing between buttons

Icon button pattern:

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-search"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-notifications"></SfButton>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-settings"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

Designing AppBar with SideBar

The AppBar can control the expand/collapse state of a SfSidebar component, creating a classic navigation pattern with a toggleable sidebar.

When to use:

• Applications with extensive navigation
• Dashboard layouts
• Admin panels
• Applications needing collapsible side navigation

Complete integration example:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs

<div>
    <SfAppBar>
        <SfButton CssClass="e-inherit" IconCss="e-icons e-menu" OnClick="@Toggle"></SfButton>
        <div class="e-folder">
            <div class="e-folder-name">Navigation Pane</div>
        </div>
    </SfAppBar>
</div>

<SfSidebar HtmlAttributes="@HtmlAttribute" Width="210px" Target=".main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div class="main-menu">
            <div class="table-content">
                <SfTextBox Placeholder="Search..."></SfTextBox>
                <p class="main-menu-header">TABLE OF CONTENTS</p>
            </div>
            <div>
                <SfTreeView CssClass="main-treeview" ExpandOn="@Expand" TValue="TreeData">
                    <TreeViewFieldsSettings Id="NodeId" Text="NodeText" DataSource="Treedata" HasChildren="HasChild" ParentID="Pid">
                    </TreeViewFieldsSettings>
                </SfTreeView>
            </div>
        </div>
    </ChildContent>
</SfSidebar>

<div class="main-content" id="main-text">
    <div class="sidebar-content">
        <div class="sidebar-heading">Responsive Sidebar with Treeview</div>
        <p class="paragraph-content">
            This is a graphical aid for visualizing and categorizing the site, in the style of an expandable and collapsable treeview component.
            It auto-expands to display the node(s), if any, corresponding to the currently viewed title, highlighting that node(s)
            and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical browsers),
            falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered so that
            unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of
            the treeview persists across page views in most situations.
        </p>
    </div>
</div>

@code {
    public ExpandAction Expand = ExpandAction.Click;
    public bool SidebarToggle = false;
    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
    {
        {"class", "sidebar-treeview" }
    };
    
    public void Toggle(MouseEventArgs args)
    {
        SidebarToggle = !SidebarToggle;
    }
    
    public class TreeData {
        public string NodeId { get; set; }
        public string NodeText { get; set; }
        public bool HasChild { get; set; }
        public string Pid { get; set; }
    }
    
    private List<TreeData> Treedata = new List<TreeData>();
    
    protected override void OnInitialized() {
        base.OnInitialized();
        Treedata.Add(new TreeData { NodeId = "01", NodeText = "Installation" });
        Treedata.Add(new TreeData { NodeId = "02", NodeText = "Deployment" });
        Treedata.Add(new TreeData { NodeId = "03", NodeText = "Quick Start" });
        Treedata.Add(new TreeData { NodeId = "04", NodeText = "Components", HasChild=true });
        Treedata.Add(new TreeData { NodeId = "04-01", NodeText = "Calendar", Pid="04" });
        Treedata.Add(new TreeData { NodeId = "04-02", NodeText = "DatePicker", Pid="04" });
        Treedata.Add(new TreeData { NodeId = "04-03", NodeText = "DateTimePicker", Pid="04" });
        Treedata.Add(new TreeData { NodeId = "04-04", NodeText = "DateRangePicker", Pid="04" });
        Treedata.Add(new TreeData { NodeId = "04-05", NodeText = "TimePicker", Pid="04" });
        Treedata.Add(new TreeData { NodeId = "04-06", NodeText = "SideBar", Pid="04" });
    }
}

<style>
    .e-appbar .e-folder {
        margin: 0 5px;
    }
    
    .sidebar-treeview .e-treeview .e-icon-collapsible,
    .sidebar-treeview .e-treeview .e-icon-expandable {
        float: right;
        margin: 3px;
    }
    
    .sidebar-treeview .e-treeview,
    .sidebar-treeview .e-treeview .e-ul {
        padding: 0;
        margin: 0;
    }
    
    .sidebar-treeview {
        z-index: 20 !important;
        border-right: 1px solid #dee2e6 !important;
    }
    
    .sidebar-treeview .main-menu .main-menu-header {
        color: #656a70;
        padding: 15px 15px 15px 0;
        font-size: 14px;
        width: 13em;
        margin: 0;
    }
    
    #main-text .sidebar-heading {
        font-size: 16px;
    }
    
    #main-text .sidebar-content {
        padding: 15px;
        font-size: 14px;
    }
    
    #main-text .paragraph-content {
        padding: 15px 0;
        font-weight: normal;
        font-size: 14px;
    }
    
    .e-folder {
        text-align: center;
        font-weight: 500;
        font-size: 16px;
    }
    
    .sidebar-treeview .e-treeview .e-text-content {
        padding-left: 18px;
    }
    
    .main-content {
        height: 380px;
    }
    
    .e-folder-name {
        margin-top: -2px;
    }
</style>

Key integration points:

1. AppBar button with click handler:

<SfButton CssClass="e-inherit" IconCss="e-icons e-menu" OnClick="@Toggle"></SfButton>

2. Sidebar with two-way binding:

<SfSidebar @bind-IsOpen="SidebarToggle">

3. Toggle method in code:

public bool SidebarToggle = false;

public void Toggle(MouseEventArgs args)
{
    SidebarToggle = !SidebarToggle;
}

Pattern benefits:

• Clean separation of navigation (sidebar) and control (AppBar)
• Responsive behavior with MediaQuery support
• Two-way binding for state management
• TreeView integration for hierarchical navigation

Best Practices

Layout Components:

• Use AppBarSpacer to create flexible layouts that adapt to content
• Use AppBarSeparator to group related actions visually
• Combine Spacer and Separator for complex layouts

Responsive Design:

• Test AppBar at different screen widths
• Use media queries to adjust layout for mobile and tablet
• Consider hiding text labels on small screens and showing only icons
• Use flex-flow: row wrap for wrapping on smaller screens

Component Integration:

• Always use CssClass="e-inherit" on child components (buttons, menus)
• This ensures consistent styling with the AppBar's color mode
• Test integration with different AppBar color modes

Sidebar Integration:

• Use two-way binding (@bind-IsOpen) for state management
• Set appropriate Target for sidebar to control positioning
• Use MediaQuery for responsive sidebar behavior
• Consider z-index for proper layering

Getting Started with Blazor AppBar Component

Table of Contents

• Overview
• Install Syncfusion Blazor Packages
• Add Import Namespaces
• Register Syncfusion Blazor Service
• Add Stylesheet and Script Resources
• Add Blazor AppBar Component

Overview

This guide walks through adding the Syncfusion Blazor AppBar component to a Blazor WebAssembly application. The AppBar component provides a navigation bar for displaying branding, navigation, and actions.

Install Syncfusion Blazor Packages

Install the required NuGet packages for the AppBar component:

Using NuGet Package Manager (Visual Studio): 1. Open Tools → NuGet Package Manager → Manage NuGet Packages for Solution 2. Search for and install:

• Syncfusion.Blazor.Navigations
• Syncfusion.Blazor.Themes

Using Package Manager Console:

Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}

Using .NET CLI or VS Code Terminal:

dotnet add package Syncfusion.Blazor.Navigations
dotnet add package Syncfusion.Blazor.Themes

Note: All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.

Add Import Namespaces

After installing the packages, open the ~/_Imports.razor file and import the required namespaces:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

These namespaces provide access to the AppBar component and related types.

Register Syncfusion Blazor Service

Register the Syncfusion Blazor Service in the Program.cs file of your Blazor WebAssembly App:

using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
// ... other configurations

builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

This registration enables all Syncfusion Blazor components in your application.

Add Stylesheet and Script Resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the ~/index.html file:

<head>
    <!-- ... other head content -->
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>
<body>
    <!-- ... body content -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

Available Themes:

• fluent2.css - Fluent 2 theme (shown above)
• bootstrap5.css - Bootstrap 5 theme
• material.css - Material theme
• fabric.css - Fabric (Office 365) theme
• tailwind.css - Tailwind CSS theme
• highcontrast.css - High contrast theme

Note: Check out the Blazor Themes documentation to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes. Also see the Adding Script Reference topic for different approaches to adding script references.

Add Blazor AppBar Component

Add the Syncfusion Blazor AppBar component to a Razor page (e.g., ~/Pages/Index.razor):

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="regular">Blazor AppBar</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Run the Application:

• Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application
• The Syncfusion Blazor AppBar component will render in the default web browser

Understanding the Basic Structure

SfAppBar Component:

• Container for the AppBar with configuration properties
• ColorMode property sets the background color scheme

SfButton with e-inherit:

• Buttons inherit the AppBar's color scheme using CssClass="e-inherit"
• IconCss applies Syncfusion icon fonts
• Content property sets button text

AppBarSpacer:

• Creates flexible spacing between elements
• Pushes subsequent elements to the right
• Allows for responsive layouts

Adding More Elements

You can add various child elements to the AppBar:

<SfAppBar ColorMode="AppBarColor.Primary">
    <!-- Menu button -->
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    
    <!-- Title/Brand -->
    <span class="app-title">My Application</span>
    
    <!-- Navigation buttons -->
    <SfButton CssClass="e-inherit" Content="Home"></SfButton>
    <SfButton CssClass="e-inherit" Content="About"></SfButton>
    
    <!-- Spacer pushes remaining items to the right -->
    <AppBarSpacer></AppBarSpacer>
    
    <!-- Action buttons on the right -->
    <SfButton CssClass="e-inherit" IconCss="e-icons e-settings"></SfButton>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

Next Steps

Now that you have a basic AppBar running:

• Explore different size modes (Regular, Prominent, Dense) in the size-and-color.md reference
• Configure color modes (Light, Dark, Primary, Inherit) in the size-and-color.md reference
• Set up positioning (Top, Bottom, Sticky) in the positioning.md reference
• Add advanced UI elements (Spacer, Separator, Menu, Sidebar) in the design-ui.md reference
• Implement custom styling with the styling.md reference

Positioning in Blazor AppBar Component

Table of Contents

• Overview
• Top AppBar
• Bottom AppBar
• Sticky AppBar
• Content Layout Considerations

Overview

The position of the AppBar can be controlled using the Position and IsSticky properties. These properties allow you to anchor the AppBar to the top or bottom of the viewport and control its behavior when scrolling.

Available positioning options:

• Top AppBar - Positions the AppBar at the top of the content (default)
• Bottom AppBar - Positions the AppBar at the bottom of the content
• Sticky AppBar - Makes the AppBar remain visible while scrolling

Top AppBar

Top AppBar is the default positioning mode where the AppBar is placed at the top of the content. This is the most common placement for navigation headers.

When to use:

• Standard application headers
• Primary navigation bars
• Branding and logo placement
• Main application toolbar

Default behavior: By default, the AppBar uses top positioning without needing to explicitly set the Position property.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<div class="appbar-content" style="font-size: 12px">
    <p>
        The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
    </p>
    <p>
        The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
    </p>
    <p>
        Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
    </p>
    <p>
        The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
    </p>
</div>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Bottom AppBar

Bottom AppBar positions the AppBar at the bottom of the content. This is useful for mobile-style navigation or action bars that should be easily accessible at the bottom of the screen.

When to use:

• Mobile applications with bottom navigation
• Quick action bars
• Contextual toolbars for selected content
• Alternative navigation patterns

Set the position:

Position="AppBarPosition.Bottom"

Example:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<div class="appbar-content" style="font-size: 12px">
    <p>
        The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
    </p>
    <p>
        The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
    </p>
    <p>
        Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
    </p>
    <p>
        The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
    </p>
</div>

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Mobile navigation pattern:

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-search"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-heart"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

Sticky AppBar

Sticky AppBar remains fixed in its position while the content scrolls beneath it. Enable this behavior by setting the IsSticky property to true.

When to use:

• Keeping navigation always accessible
• Persistent access to actions while scrolling
• Long-form content with important header controls
• Applications requiring consistent navigation visibility

Set sticky behavior:

IsSticky="true"

Example with top positioning (default):

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<div class="control-container">
    <SfAppBar ColorMode="AppBarColor.Primary" IsSticky="true">
        <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
        <AppBarSpacer></AppBarSpacer>
        <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
    </SfAppBar>
    
    <div class="appbar-content" style="font-size: 12px">
        <p>
            The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
        </p>
        <p>
            The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
        </p>
        <p>
            Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
        </p>
        <p>
            The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
        </p>
    </div>
</div>

<style>
    .control-container {
        height: 220px;
        margin: 0 auto;
        width: 500px;
        overflow-y: scroll;
    }
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Sticky behavior details:

• The AppBar remains fixed while scrolling the content
• Works with both top and bottom positioning
• Useful for maintaining navigation visibility
• Can be combined with any size or color mode

Combining sticky with bottom position:

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom" IsSticky="true">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-search"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-notifications"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

Content Layout Considerations

When using positioned AppBars, consider how they affect your page layout:

Top AppBar Layout

Without sticky:

• AppBar flows with page content
• Content appears below the AppBar
• AppBar scrolls away with content

With sticky:

• AppBar stays fixed at top
• Content scrolls beneath AppBar
• May need padding-top on content to prevent overlap

<style>
    .page-content {
        padding-top: 70px; /* Adjust based on AppBar height */
    }
</style>

Bottom AppBar Layout

Without sticky:

• AppBar flows at the end of content
• Only visible when scrolling to bottom
• Moves with content

With sticky:

• AppBar stays fixed at bottom
• Content scrolls above AppBar
• May need padding-bottom on content to prevent overlap

<style>
    .page-content {
        padding-bottom: 70px; /* Adjust based on AppBar height */
    }
</style>

Responsive Considerations

For responsive applications, adjust padding based on screen size:

<style>
    /* Desktop */
    .page-content {
        padding-top: 70px;
    }
    
    /* Mobile */
    @media screen and (max-width: 768px) {
        .page-content {
            padding-top: 60px; /* Smaller AppBar on mobile */
        }
    }
</style>

Z-Index Considerations

The AppBar has a default z-index to stay above content. If you have overlapping elements, you may need to adjust z-index values:

<style>
    .e-appbar {
        z-index: 1000; /* Ensure AppBar appears above other content */
    }
</style>

Best Practices

Positioning:

• Use Top positioning for primary navigation (most common)
• Use Bottom positioning for mobile-style navigation or quick actions
• Use Sticky when navigation should always be accessible

Layout:

• Add appropriate padding to page content to prevent overlap with sticky AppBars
• Test scrolling behavior with various content lengths
• Consider mobile vs. desktop layouts

Performance:

• Sticky positioning uses CSS position: sticky, which is performant
• Avoid complex animations on sticky AppBars for better scroll performance

User Experience:

• Sticky AppBars improve navigation accessibility on long pages
• Bottom AppBars on mobile improve thumb reach for navigation
• Consistent positioning across the application improves predictability

Size and Color with Blazor AppBar Component

Table of Contents

• Overview
• Size Modes
• Regular AppBar
• Prominent AppBar
• Dense AppBar
• Color Modes
• Light AppBar
• Dark AppBar
• Primary AppBar
• Inherit AppBar
• Combining Size and Color Modes

Overview

The Blazor AppBar provides flexible configuration for both size and color to match different design requirements. Size modes control the height of the AppBar, while color modes control the background and text colors.

Size Modes

The size of the AppBar can be set using the Mode property. The available size modes are:

• Regular - Default height for standard applications
• Prominent - Longer height for larger titles, images, or hero sections
• Dense - Shorter height for compact, space-efficient headers

Regular AppBar

Regular mode is the default size in which the AppBar is displayed with the standard height.

When to use:

• Standard application headers
• Typical navigation bars
• General-purpose toolbars

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="regular">Regular AppBar</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Prominent AppBar

Prominent mode displays the AppBar with a longer height, ideal for larger titles, images, or text. This mode is useful for hero sections or landing pages where you want to make a visual impact.

When to use:

• Landing pages with hero sections
• Pages with large branding or imagery
• Marketing or promotional headers
• Applications requiring prominent titles

Set the mode:

Mode="AppBarMode.Prominent"

Example with custom styling:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary" Mode="AppBarMode.Prominent" CssClass="prominent-appbar">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="prominent">AppBar Component with Prominent mode</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .e-appbar .prominent {
        align-self: center;
        white-space: break-spaces;
        text-align: inherit;
        font-size: 35px;
        line-height: 50px;
    }
    
    .e-appbar.prominent-appbar {
        background-image: url("https://blazor.syncfusion.com/demos/_content/blazor_server_common_net8/images/appbar/prominent.png");
        background-size: 100% 400px;
        color: #ffffff;
        background-repeat: no-repeat;
        height: 400px;
    }
    
    .prominent-appbar .e-inherit.e-btn {
        background: transparent;
    }
    
    .prominent-appbar .e-inherit.e-btn:hover,
    .prominent-appbar .e-inherit.e-btn:focus,
    .prominent-appbar .e-inherit.e-btn:active,
    .prominent-appbar .e-inherit.e-btn.e-active {
        background: rgba(255, 255, 255, .08);
    }
</style>

Customization tips:

• You can adjust the prominent AppBar height if using larger titles, images, or text
• Use align-self: center to vertically center prominent content
• Use white-space: break-spaces for multi-line text
• Consider background images for visual impact
• Adjust font size and line height for better readability

Dense AppBar

Dense mode displays the AppBar with a shorter height, ideal for applications where vertical space is limited or when you want a more compact appearance.

When to use:

• Data-dense applications or tools
• Applications with limited vertical space
• Secondary toolbars or action bars
• Mobile applications requiring more content space

Set the mode:

Mode="AppBarMode.Dense"

Example:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary" Mode="AppBarMode.Dense">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="dense">Dense AppBar</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Color Modes

The background and font colors can be set using the ColorMode property. The available color modes are:

• Light - Light background with corresponding font color (default)
• Dark - Dark background with corresponding font color
• Primary - Primary theme colors
• Inherit - Inherits colors from parent element

Light AppBar

Light mode is the default color scheme with a light background and dark text. This mode is ideal for applications with a light theme.

When to use:

• Applications with light themes
• Professional or corporate applications
• Default styling for most use cases

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar>
    <a href="https://www.syncfusion.com/blazor-components" target="_blank" rel="noopener" role="link" aria-label="Syncfusion blazor components">
        <div class="syncfusion-logo"></div>
    </a>
    <AppBarSpacer></AppBarSpacer>
    <SfButton IsPrimary="true" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .syncfusion-logo {
        background: url(https://cdn.syncfusion.com/blazor/images/demos/syncfusion-logo.svg);
        background-size: contain;
        background-repeat: no-repeat;
        height: 30px;
        width: 150px;
    }
</style>

Note: When using Light mode, use IsPrimary="true" on buttons instead of CssClass="e-inherit" for better contrast.

Dark AppBar

Dark mode displays the AppBar with a dark background and light text. Set by using AppBarColor.Dark for the ColorMode property.

When to use:

• Applications with dark themes
• Modern or creative applications
• Reducing eye strain in low-light environments
• Gaming or entertainment applications

Set the color mode:

ColorMode="AppBarColor.Dark"

Example:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Dark">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Primary AppBar

Primary mode displays the AppBar using the theme's primary colors. Set by using AppBarColor.Primary for the ColorMode property.

When to use:

• Emphasizing branding colors
• Creating visual hierarchy
• Matching application's color scheme
• Drawing attention to navigation

Set the color mode:

ColorMode="AppBarColor.Primary"

Example:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

Note: The primary color depends on the theme you're using (Bootstrap, Material, Fabric, etc.). You can customize primary colors using Theme Studio.

Inherit AppBar

Inherit mode makes the AppBar inherit the background and font colors from its parent element. Set by using AppBarColor.Inherit for the ColorMode property.

When to use:

• Integrating AppBar seamlessly with existing layouts
• Custom color schemes defined by parent containers
• Maintaining consistent styling across nested components
• Advanced theming scenarios

Set the color mode:

ColorMode="AppBarColor.Inherit"

Example:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Inherit">
    <a href="https://www.syncfusion.com/blazor-components" target="_blank" rel="noopener" role="link" aria-label="Syncfusion blazor components">
        <div class="syncfusion-logo"></div>
    </a>
    <AppBarSpacer></AppBarSpacer>
    <SfButton IsPrimary="true" Content="FREE TRIAL"></SfButton>
</SfAppBar>

<style>
    .syncfusion-logo {
        background: url(https://cdn.syncfusion.com/blazor/images/demos/syncfusion-logo.svg);
        background-size: contain;
        background-repeat: no-repeat;
        height: 30px;
        width: 150px;
    }
</style>

Combining Size and Color Modes

Size and color modes can be combined to achieve the desired appearance:

Dense Primary AppBar:

<SfAppBar ColorMode="AppBarColor.Primary" Mode="AppBarMode.Dense">
    <!-- content -->
</SfAppBar>

Prominent Dark AppBar:

<SfAppBar ColorMode="AppBarColor.Dark" Mode="AppBarMode.Prominent">
    <!-- content -->
</SfAppBar>

Regular Light AppBar (default):

<SfAppBar>
    <!-- content -->
</SfAppBar>

Best Practices

Size Mode Selection:

• Use Regular for most standard applications (default choice)
• Use Prominent when you need visual impact or larger branding
• Use Dense when vertical space is limited or for secondary toolbars

Color Mode Selection:

• Use Light for applications with light themes (default choice)
• Use Dark for modern applications or reducing eye strain
• Use Primary to emphasize branding and create visual hierarchy
• Use Inherit for advanced theming or seamless integration with custom layouts

Button Styling:

• Use CssClass="e-inherit" on buttons within Dark and Primary AppBars for consistent styling
• Use IsPrimary="true" on buttons within Light AppBars for better contrast

Styles and Appearances in Blazor AppBar Component

Table of Contents

• Overview
• CSS Classes Reference
• [CssClass Property](#cssc lass-property)
• HtmlAttributes
• Theme Studio Integration
• Custom Styling Examples

Overview

The AppBar component provides multiple ways to customize its appearance to match your application's design. You can modify the AppBar using CSS classes, the CssClass property, HTML attributes, or by creating custom themes with Theme Studio.

CSS Classes Reference

The following CSS classes are available for customizing specific parts of the AppBar:

Note: You can change the prominent AppBar height if larger titles, images, or texts are used.

Using CSS Classes

Target specific AppBar modes with CSS:

<style>
    /* Customize all AppBars */
    .e-appbar {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Customize prominent AppBar */
    .e-appbar.e-prominent {
        min-height: 300px;
    }
    
    /* Customize dense AppBar */
    .e-appbar.e-dense {
        height: 48px;
    }
    
    /* Customize primary AppBar */
    .e-appbar.e-primary {
        border-bottom: 3px solid #0078d4;
    }
</style>

CssClass Property

The CssClass property allows you to apply custom CSS classes to the AppBar for specific styling needs.

When to use:

• Applying custom background colors
• Adding custom shadows or borders
• Creating variant styles for different pages
• Overriding default theme colors

Basic example:

<SfAppBar ColorMode="AppBarColor.Primary" CssClass="custom-appbar">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
</SfAppBar>

<style>
    .custom-appbar {
        background: #ff0000;
        color: #ffffff;
    }
</style>

Custom Brand Colors

Apply your brand colors to the AppBar:

<SfAppBar ColorMode="AppBarColor.Primary" CssClass="brand-appbar">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="brand-name">Company Name</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Contact"></SfButton>
</SfAppBar>

<style>
    .brand-appbar {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        color: #ffffff;
    }
    
    .brand-appbar .brand-name {
        font-weight: 600;
        font-size: 18px;
        margin-left: 12px;
    }
    
    .brand-appbar .e-btn.e-inherit:hover {
        background: rgba(255, 255, 255, 0.15);
    }
</style>

Elevated Shadow Style

Add elevation with box-shadow:

<SfAppBar ColorMode="AppBarColor.Light" CssClass="elevated-appbar">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span>Elevated AppBar</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton IsPrimary="true" Content="Sign In"></SfButton>
</SfAppBar>

<style>
    .elevated-appbar {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                    0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
</style>

Bordered Style

Add borders for definition:

<SfAppBar ColorMode="AppBarColor.Light" CssClass="bordered-appbar">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span>Bordered AppBar</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton IsPrimary="true" Content="Login"></SfButton>
</SfAppBar>

<style>
    .bordered-appbar {
        border-bottom: 2px solid #e5e7eb;
    }
</style>

HtmlAttributes

The HtmlAttributes parameter allows you to add additional HTML attributes to the AppBar element, useful for accessibility, SEO, or custom data attributes.

When to use:

• Adding ARIA attributes for accessibility
• Adding custom data attributes
• Setting specific HTML properties
• Adding tracking attributes

Adding aria-label:

<SfAppBar ColorMode="AppBarColor.Primary" aria-label="Main application navigation">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
</SfAppBar>

Using @attributes directive:

@code {
    Dictionary<string, object> AppBarAttributes = new Dictionary<string, object>
    {
        { "role", "navigation" },
        { "aria-label", "Primary navigation bar" },
        { "data-testid", "main-appbar" }
    };
}

<SfAppBar ColorMode="AppBarColor.Primary" @attributes="AppBarAttributes">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
</SfAppBar>

Theme Studio Integration

Theme Studio is Syncfusion's theme customization tool that allows you to create custom themes for all Syncfusion components, including the AppBar.

When to use:

• Creating consistent themes across all Syncfusion components
• Customizing primary, secondary, and accent colors
• Adjusting typography and spacing
• Exporting theme as CSS for production use

Using Theme Studio:

1. Visit the Syncfusion Blazor Theme Studio 2. Select a base theme (Material, Bootstrap, Fabric, etc.) 3. Customize colors, typography, and component styles 4. Preview changes across different components 5. Download the generated CSS file 6. Reference the custom theme in your application

Applying custom theme:

<!-- Replace default theme with custom theme -->
<link href="path/to/custom-theme.css" rel="stylesheet" />

CSS Variables

Modern Syncfusion themes use CSS custom properties (variables) that you can override:

<SfAppBar ColorMode="AppBarColor.Primary" CssClass="custom-vars">
    <SfButton CssClass="e-inherit" Content="Home"></SfButton>
</SfAppBar>

<style>
    .custom-vars {
        --primary-color: #00796b;
        --text-color: #ffffff;
        background: var(--primary-color);
        color: var(--text-color);
    }
</style>

Custom Styling Examples

Glassmorphism Style

Create a modern glassmorphism effect:

<SfAppBar ColorMode="AppBarColor.Light" CssClass="glass-appbar">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="title">Glass AppBar</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

<style>
    .glass-appbar {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .glass-appbar .title {
        font-weight: 600;
        color: #1f2937;
    }
</style>

Animated Gradient

Add an animated gradient background:

<SfAppBar ColorMode="AppBarColor.Primary" CssClass="gradient-appbar">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="title">Animated Gradient</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Explore"></SfButton>
</SfAppBar>

<style>
    .gradient-appbar {
        background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #4facfe);
        background-size: 800% 800%;
        animation: gradientShift 15s ease infinite;
    }
    
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    .gradient-appbar .title {
        font-weight: 600;
        color: #ffffff;
    }
</style>

Neumorphism Style

Create a soft neumorphism effect:

<SfAppBar ColorMode="AppBarColor.Light" CssClass="neomorph-appbar">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="title">Neumorphic AppBar</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Settings"></SfButton>
</SfAppBar>

<style>
    .neomorph-appbar {
        background: #e0e5ec;
        box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6),
                   -9px -9px 16px rgba(255, 255, 255, 0.5);
    }
    
    .neomorph-appbar .e-btn.e-inherit {
        background: #e0e5ec;
        box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6),
                   -5px -5px 10px rgba(255, 255, 255, 0.5);
        border: none;
    }
    
    .neomorph-appbar .e-btn.e-inherit:active {
        box-shadow: inset 5px 5px 10px rgba(163, 177, 198, 0.6),
                   inset -5px -5px 10px rgba(255, 255, 255, 0.5);
    }
</style>

Custom Height for Prominent

Adjust prominent AppBar height for custom content:

<SfAppBar ColorMode="AppBarColor.Primary" 
          Mode="AppBarMode.Prominent" 
          CssClass="custom-prominent">
    <div class="prominent-content">
        <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
        <h1 class="hero-title">Welcome to Our Application</h1>
        <p class="hero-subtitle">Build amazing experiences</p>
    </div>
</SfAppBar>

<style>
    .custom-prominent {
        height: 250px;
        display: flex;
        align-items: center;
    }
    
    .prominent-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0 20px;
    }
    
    .hero-title {
        font-size: 42px;
        font-weight: 700;
        margin: 20px 0 10px 0;
        color: #ffffff;
    }
    
    .hero-subtitle {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.9);
        margin: 0;
    }
</style>

Best Practices

Styling approach:

• Use CssClass property for component-specific customization
• Use global CSS classes for consistent styling across multiple AppBars
• Leverage Theme Studio for comprehensive theme customization
• Test custom styles with different AppBar modes (Regular, Prominent, Dense)

Performance:

• Avoid complex animations on sticky AppBars for smooth scrolling
• Use CSS transforms instead of positioning for better performance
• Minimize the use of heavy box-shadows on large AppBars

Maintainability:

• Keep custom styles in separate stylesheet files
• Use CSS variables for easy theme switching
• Document custom CSS classes for team collaboration
• Test customizations across different browsers