All Components

Layout Overview

The Layout controls create a perceptive and intuitive layout of web projects to provide for an easier navigation.

The package includes the following components:

  • Tabstrip—Displays a collection of tabs with associated content, which allow the user to open many pages inside a single window. Each tab represents a separate location and by selecting a particular tab, the user navigates between the tab pages.
  • PanelBar—Displays hierarchical data as a multi-level, expandable component.

Basic Usage

The following example demonstrates the Tabstrip and PanelBar components in action.

  selector: 'my-app',
  template: `
       <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
            <template kendoTabContent>
                  <span class="rainy">&nbsp;</span>
                  <div class="weather">
                    <p>Rainy weather in Paris.</p>
       <kendo-tabstrip-tab [title]="'New York'">
            <template kendoTabContent>
              <span class="sunny">&nbsp;</span>
                <div class="weather">
                  <p>Sunny weather in New York.</p>

     <div class="panelbar-wrapper">
             <kendo-panelbar-item title="My Teammates" expanded="true">
                 <template kendoPanelBarContent>
                     <div [class]="teamMateGroup">
                         <div class="teamMate">
                             <img [src]="imageUrl('andrew')" alt="Andrew Fuller" width="72" height="72">
                             <h2>Andrew Fuller</h2>
                             <p>Team Lead</p>
                         <div class="teamMate">
                             <img [src]="imageUrl('nancy')" alt="Nancy Leverling" width="72" height="72">
                             <h2>Nancy Leverling</h2>
                             <p>Sales Associate</p>
                         <div class="teamMate">
                             <img [src]="imageUrl('robert')" alt="Robert King" width="72" height="72">
                             <h2>Robert King</h2>
                             <p>Business System Analyst</p>
             <kendo-panelbar-item title="Projects">
                 <kendo-panelbar-item title="New Business Plan"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Sales Forecasts">
                     <kendo-panelbar-item title="Q1 Forecast"></kendo-panelbar-item>
                     <kendo-panelbar-item title="Q2 Forecast"></kendo-panelbar-item>
                     <kendo-panelbar-item title="Q3 Forecast"></kendo-panelbar-item>
                     <kendo-panelbar-item title="Q4 Forecast"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Sales Reports"></kendo-panelbar-item>
             <kendo-panelbar-item title="Programs">
                 <kendo-panelbar-item title="Monday"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Tuesday"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Wednesday"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Thursday"></kendo-panelbar-item>
                 <kendo-panelbar-item title="Friday"></kendo-panelbar-item>
             <kendo-panelbar-item title="Communication" disabled="true"></kendo-panelbar-item>
    styles: [`
        .teamMate:after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            clear: both;
            visibility: hidden;
        .teamMate h2 {
            font-size: 1.4em;
            font-weight: normal;
            padding-top: 20px;
            margin: 0;
        .teamMate p {
            margin: 0;
        .teamMate img {
            float: left;
            margin: 5px 15px 5px 5px;
            border: 1px solid #ccc;
            border-radius: 50%;
        .teamMateGroup {
            padding: 10px;
        .panelbar-wrapper {
            max-width: 400px;
class AppComponent {
  private baseImageUrl: string = "";

  private imageUrl(imageName: string) :string {
    return this.baseImageUrl + imageName + ".jpg";


  1. The Layout package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-layout
  3. Once installed, import the LayoutModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { LayoutModule } from '@progress/kendo-angular-layout';
    import { AppComponent } from './app.component';
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, LayoutModule]
    export class AppModule {


The Layout package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs
In this article