syncfusion-react-appbar

Q: How do I install syncfusion-react-appbar?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-appbar in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-appbar/ (personal) or .claude/skills/syncfusion-react-appbar/ (project).

by syncfusionFrontend & Design

Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.

Installs: 662
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-appbar

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-react-appbar automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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:

Prop	Type	Default	Purpose
`colorMode`	string	`"Light"`	Color scheme: Light, Dark, Primary, Inherit
`mode`	string	`"Regular"`	Size mode: Regular, Prominent, Dense
`position`	string	`"Top"`	Vertical position: Top, Bottom
`isSticky`	boolean	`false`	Stick to viewport while scrolling
`cssClass`	string	-	Custom CSS classes for styling
`htmlAttributes`	Record	`{}`	HTML attributes (aria-label, data-*, etc.)
`enableRtl`	boolean	`false`	Enable right-to-left direction
`enablePersistence`	boolean	`false`	Persist state between reloads
`locale`	string	`"en-US"`	Language and culture settings

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

FAQ

What does the syncfusion-react-appbar skill do?

How do I install syncfusion-react-appbar?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-appbar in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-appbar/ (personal) or .claude/skills/syncfusion-react-appbar/ (project).

Which AI agents can use syncfusion-react-appbar?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-react-appbar safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-react-appbar?

It is published by syncfusion in syncfusion/react-ui-components-skills. It has 662 recorded installs.