• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Content Arrangement

The AppBar allows you to arrange the layout of its content by splitting it into sections, defining spacings and separators or simply place any content "as is".

To arrange the content and the layout of the AppBar, you could use:

Sections

The AppBarSection component allows you to place HTML elements or React components between its tags. AppBar sections provide a better layout structure, alignment styling and control over the content arrangement.

The following example demonstrates the AppBarSection component in action.

Example
View Source
Change Theme:

Spacings

To define spacings between tha AppBar sections, you can use the AppBarSpacer, which gives an additional white space in the content layout. You can customize the width of the spacing by setting width CSS rule inside style property. If not set, the spacer element will take all the available space.

Example
View Source
Change Theme:

Separators

Separators are used to create a visual separation of the AppBar content. To add a separator, add the k-appbar-separator class on a span element.

Example
View Source
Change Theme:

In this article

Not finding the help you need?