# 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:

* [Sections](https://www.telerik.com/kendo-angular-ui/components/navigation/appbar/content-arrangement#sections)
* [Spacings](https://www.telerik.com/kendo-angular-ui/components/navigation/appbar/content-arrangement#spacings)
* [Separators](https://www.telerik.com/kendo-angular-ui/components/navigation/appbar/content-arrangement#separators)

## Sections

The [`AppBarSection`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarsectioncomponent) 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`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarsectioncomponent) component in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/appbar/content_arrangement/source.txt)

## Spacings

To define spacing between the AppBar sections, use the [`AppBarSpacer`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarspacercomponent), 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`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarspacercomponent#width) property.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/appbar/content_arrangement/spacings/source.txt)

## Separators

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/appbar/content_arrangement/separators/source.txt)

## Suggested Links

* [API Reference of the AppBarSection Component](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarsectioncomponent)
* [API Reference of the AppBarSpacer Component](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarspacercomponent)
* [API Reference of the AppBar Component](https://www.telerik.com/kendo-angular-ui/components/navigation/api/appbarcomponent)