• Introduction
  • Getting Started
  • Native Components
    • Animation
    • Buttons
    • Charts
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
New to Kendo UI for Vue? Start a free 30-day trial

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:


The AppBarSection 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 component in action.

View Source
Change Theme:


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.

View Source
Change Theme:


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.

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

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

View Source
Change Theme:

In this article

Not finding the help you need?