• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

Content Arrangement

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

To arrange the content and the layout of the AppBar, use any of the following elements:


The AppBarSection component allows you to place HTML elements or Angular components by wrapping them inside a kendo-appbar-section tag. AppBar sections provide a better layout structure, alignment styling, and control over the content arrangement.

The following example demonstrates the AppBarSection component in action.

View Source
Change Theme:


To define spacing between the AppBar sections, use the AppBarSpacer, which gives an additional white space in the content layout. By default, the kendo-appbar-spacer element takes all the available space. To override this behavior and specify a custom size, use the width property.

View Source
Change Theme:


Separators visually separate the AppBar content. To add a separator, add the k-appbar-separator class on a span element.

View Source
Change Theme:

In this article

Not finding the help you need?