# Content Arrangement

The AppBar allows you to control the layout of its content by using specific container components. With these container components, the content of the AppBar can be separated into `sections` detached from one another by `separators` or `spacings`.

The supported layout containers that can be used inside the AppBar are:

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

## Sections

The [`AppBarSection`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/appbarsectionprops) component allows you to place HTML elements or Vue 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`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/appbarsectionprops) component in action.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/appbar/sections/source.txt)

## Spacings

To define spacings between tha AppBar sections, you can use the [`AppBarSpacer`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/appbarspacerprops), which gives an additional white space in the content layout. You can customize the width of the spacing by setting the [`width`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/appbarspacerprops#width) property. If not set, the spacer element will take all the available space.

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

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

```html
    <span :class="'k-appbar-separator'" />
```

Here is an example demonstrating how the separator can be implemented in the AppBar.

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

## Suggested Links

* [API Reference of the AppBarSection](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/appbarsectionprops)
* [API Reference of the AppBarSpacer](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/appbarspacerprops)
* [API Reference of the AppBar](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/appbarprops)