# Vue Layout Overview

The Kendo UI for Vue Layout components enable you to create a perceptive and intuitive layout of web projects and provide an easier navigation.

The Kendo UI for Vue Layout components are part of the Kendo UI for Vue library which provides Vue components for the Vue ecosystem and are available under the [kendo-vue-layout NPM package](https://www.npmjs.com/package/@progress/kendo-vue-layout).

<Row>
    <Column count={6}>
      <Component href="/layout/actionsheet">
        <svg id="actionsheet" viewBox="0 0 24 24">
          <path d="M4,2h16c1.1,0,2,0.9,2,2v16c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4C2,2.9,2.9,2,4,2z M11,9h2V7h-2V9z M11,17h2v-6h-2V17z"/>
        </svg>
        <ComponentTitle>ActionSheet</ComponentTitle>
        <ComponentDescription>A component that displays a predefined set of options in a modal view, commonly used to present choices related to an action the user initiates.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/appbar">
        <svg id="appbar" viewBox="0 0 24 24">
          <path d="M24,6V0H0v6v16v2h2h18l4-4V6z M20,3h2v2h-2V3z M17,3h2v2h-2V3z M14,3h2v2h-2V3z M5,3h8l-2,2H5V3z M2,3h2v2H2V3z M2,22V8h20 v11l-3,3H2z"/>
        </svg>
        <ComponentTitle>AppBar</ComponentTitle>
        <ComponentDescription>Component displaying different content, actions, navigation details, logos, and other data related to the current screen of your application.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/avatar">
        <svg id="avatar" viewBox="0 0 24 24">
          <path d="M12,7a3,3,0,1,0,3,3A3,3,0,0,0,12,7Zm0-7A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm6.44,19.65a6.5,6.5,0,0,0-12.88,0,10,10,0,1,1,12.88,0Z"/>
        </svg>
        <ComponentTitle>Avatar</ComponentTitle>
        <ComponentDescription>A component for displaying images, icons or other entities.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/bottomnavigation">
        <svg id="bottomnavigation" viewBox="0 0 24 24">
            <path d="M11.6,8.6c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2l0,0C13.6,9.5,12.7,8.6,11.6,8.6L11.6,8.6z M19.6,8.6c-1.1,0-2,0.9-2,2
 s0.9,2,2,2s2-0.9,2-2l0,0C21.6,9.5,20.7,8.6,19.6,8.6L19.6,8.6z M11.6,11.6c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1l0,0
 C12.6,11.2,12.1,11.6,11.6,11.6L11.6,11.6z M3.6,8.6c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2l0,0C5.6,9.5,4.7,8.6,3.6,8.6L3.6,8.6z
  M6.6,13.6h-6v2h4L6.6,13.6z M14.6,13.6h-6v2h4L14.6,13.6z M22.6,13.6h-6v2h4L22.6,13.6z"/>
        </svg>
        <ComponentTitle>BottomNavigation</ComponentTitle>
        <ComponentDescription>A navigational component for switching between top-level navigation destinations in an application.</ComponentDescription>
      </Component>
    </Column>
        <Column count={6}>
      <Component href="/layout/breadcrumb">
        <svg id="breadcrumb" viewBox="0 0 24 24">
            <path d="M12.9,13l1-1l0,0l-1-1L12,10.1l-1.8-1.8V10l1,1l0.9,0.9l0.1,0.1l-2,2v1.7l1.9-1.8L12.9,13z M20,11h-5v2h3L20,11z M9,11H4v2 h3L9,11z M0,5v14h24V5H0z M22,17H2V7h20V17z"/>
        </svg>
        <ComponentTitle>Breadcrumb</ComponentTitle>
        <ComponentDescription>A component for navigating among primary destinations in an application.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/card">
        <svg id="card" viewBox="0 0 24 24">
            <path class="st0" d="M2,0v24h16l4-4h0V0H2z M20,19.2L17.2,22H4V2h16V19.2z M18,4.4l-4,4l-2-2L8.5,9.9L6,7.4V13h12V4.4z M13,20h3 l2-2h-5V20z M11,18H6v2h3L11,18z"/>
        </svg>
        <ComponentTitle>Card</ComponentTitle>
        <ComponentDescription>A component for displaying data in Card layout.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
    <Component href="/layout/context-menu">
        <svg id="contextmenu" viewBox="0 0 24 24">
            <path d="M9,12H4v2h3L9,12z M9,8H4v2h3L9,8z M9,4H4v2h3L9,4z M13,4V0H0v19h9l2-2v7h9l4-4V4H13z M11,14.2L8.2,17H2V2h9V14.2z M22,19.2
	              L19.2,22H13V6h9V19.2z M20,16h-5v2h3L20,16z M20,8h-5v2h3L20,8z M20,12h-5v2h3L20,12z"/>
        </svg>
      <ComponentTitle>Context Menu</ComponentTitle>
      <ComponentDescription>A component for displaying hierarchical data as a multi-level menu in a popup.</ComponentDescription>
    </Component>
  </Column>
    <Column count={6}>
      <Component href="/layout/drawer">
        <svg id="drawer" viewBox="1 1 22 22">
          <path d="M7,15h16l-2,2H7V15z M7,13h14l2-2H7V13z M7,9h14l2-2H7V9z M7,5h14l2-2H7V5z M7,21h14l2-2H7V21zM5,1H1v22h4V1z" />
        </svg>
        <ComponentTitle>Drawer</ComponentTitle>
        <ComponentDescription>A dismissible navigation panel.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/expansionpanel">
        <svg id="expansionpanel" viewBox="0 0 24 24">
          <path d="M22,8l-3,3l-3-3 M0,16h22l2-2H0V16z"/>
        </svg>
        <ComponentTitle>ExpansionPanel</ComponentTitle>
        <ComponentDescription>A component providing information summary that can be expanded to a detailed view.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/gridlayout">
        <svg id="stacklayout" viewbox="0 0 24 24">
          <path d="M11,1H0v4h7L11,1z M0,16h20l4-4V7H0V16z M2,9h20v2.2L19.2,14H2V9z M24,1H13v4h7L24,1z M0,22h20l4-4H0V22z"/>
        </svg>
        <ComponentTitle>GridLayout</ComponentTitle>
        <ComponentDescription>A component based on grid-layout system with rows and columns.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/menu">
        <svg id="menu" viewBox="0 0 322.39 322.39">
          <path d="M322.39,14.65H87.92V44H293.08ZM87.92,131.89H293.08l29.31-29.31H87.92Zm0,87.92H293.08l29.31-29.31H87.92Zm0,87.93H293.08l29.31-29.31H87.92ZM0,0H58.62V58.62H0ZM0,87.92H58.62v58.62H0Zm0,87.93H58.62v58.62H0Zm0,87.92H58.62v58.62H0Z" />
        </svg>
        <ComponentTitle>Menu</ComponentTitle>
        <ComponentDescription>A multi-level component for hierarchical data.</ComponentDescription>
      </Component>
    </Column>
        <Column count={6}>
      <Component href="/layout/panelbar">
        <svg id="panelbar" viewbox="0 0 72 72">
          <path d="M66,0H0v6h60L66,0z M54,24H12v6h36L54,24z M12,42h24l6-6H12V42z M0,60h60l6-6H0V60z M0,72h60l6-6H0V72z M0,12v6 v30h6V18h54l6-6H6H0z" />
        </svg>
        <ComponentTitle>PanelBar</ComponentTitle>
        <ComponentDescription>A multi-level component for hierarchical data.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/splitter">
        <svg id="splitter" viewbox="0 0 72 72">
          <path d="M33,72l6-6V0l-6,6V72z M6,36l4.2,4.2L27,57v-8.5L14.5,36L27,23.5V15L10.2,31.8L6,36z M61.8,31.8L45,15v8.5 L57.5,36L45,48.5V57l16.8-16.8L66,36L61.8,31.8z" />
        </svg>
        <ComponentTitle>Splitter</ComponentTitle>
        <ComponentDescription>A component for resizable layouts.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/stacklayout">
        <svg id="stacklayout" viewbox="0 0 24 24">
          <path d="M18,2v20h2l4-4V2H18z M22,17.2l-2,2V4h2V17.2z M0,22h2l4-4V2H0V22z M2,4h2v13.2l-2,2V4z M8,22h4l4-4V2H8V22z M10,4h4v13.2 l-2,2h-2V4z"/>
        </svg>
        <ComponentTitle>StackLayout</ComponentTitle>
        <ComponentDescription>A component for aligning multiple elements in a stack.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/stepper">
        <svg id="stepper" viewbox="0 0 24 24">
          <path class="cls-1" d="M2.06,11.94h0a2,2,0,0,1-2-2h0a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2h0A2,2,0,0,1,2.06,11.94Zm10-4a2,2,0,1,0,2,2h0A2,2,0,0,0,12.06,7.94Zm0,3a1,1,0,0,1,0-2,1,1,0,0,1,1,1h0A1,1,0,0,1,12.06,10.94Zm12-1h0a2,2,0,0,0-2-2h0a2,2,0,0,0-2,2h0a2,2,0,0,0,2,2h0A2,2,0,0,0,24.06,9.94Zm-19-1h4l-2,2h-2Zm10,0h4l-2,2h-2Zm-15,7h24v-2H.06Z"/>
        </svg>
        <ComponentTitle>Stepper</ComponentTitle>
        <ComponentDescription>A component for visualizing progress via sequence of logical steps.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/tabstrip">
        <svg id="tabstrip" viewbox="0 0 72 72">
          <path d="M26,12V0h-6H0v3v3v60v6h6h48l12-12V18v-6h-6H26z M60,57.5L51.5,66H6V6h14v6v6h6h34V57.5z M12,36h36l6-6H12V36z M52,0h14v6H52V0z M12,48h24l6-6H12V48z M32,0h14v6H32V0z" />
        </svg>
        <ComponentTitle>TabStrip</ComponentTitle>
        <ComponentDescription>A tab collection for associated content.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/tilelayout">
        <svg id="tilelayout" viewbox="0 0 24 24">
          <path d="M0,24h7l4-4v-5H0V24z M2,17h7v2.2L6.2,22H2V17z M13,0v9h7l4-4V0H13z M22,4.2L19.2,7H15V2h7V4.2z M0,13h7l4-4V0H0V13z M2,2h7
 v6.2L6.2,11H2V2z M13,24h7l4-4v-9H13V24z M15,13h7v6.2L19.2,22H15V13z"/>
        </svg>
        <ComponentTitle>TileLayout</ComponentTitle>
        <ComponentDescription>A component based on the CSS Grid Layout allowing you to display different content in separate sections.</ComponentDescription>
      </Component>
    </Column>
    <Column count={6}>
      <Component href="/layout/wizard">
        <svg id="tilelayout" viewbox="0 0 24 24">
          <path d="M7,3h-2V1h4l-2,2Zm3-1c0-1.1,.9-2,2-2s2,.9,2,2-.89,2-2,2-2-.9-2-2Zm1,0c0,.55,.45,1,1,1s1-.45,1-1-.45-1-1-1-1,.45-1,1ZM2,4c1.11,0,2-.9,2-2S3.11,0,2,0,0,.9,0,2s.9,2,2,2ZM19,1h-4V3h2l2-2Zm3,3c1.11,0,2-.9,2-2s-.89-2-2-2-2,.9-2,2,.9,2,2,2Zm2,2v14l-4,4H0V6H24Zm-2,2H2v14H19.18l2.82-2.82V8Zm-2,8v-2H4v2H20Zm-11,4h3l2-2h-5v2Zm11-10H4v2H20v-2Zm-5,10h3l2-2h-5v2Z" />
        </svg>
        <ComponentTitle>Wizard</ComponentTitle>
        <ComponentDescription>A component that helps you easily organize multi-step processes or implement step-by-step user guidance.</ComponentDescription>
      </Component>
    </Column>
</Row>

<CtaPanelOverview></CtaPanelOverview>

## Basic Usage

The following example demonstrates the Layout components in action.

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

## Installation

To initialize the Layout, either:

* [Use the CDN service](https://www.telerik.com/kendo-vue-ui-develop/components/layout#using-cdn), or
* [Use Webpack](https://www.telerik.com/kendo-vue-ui-develop/components/layout#initializing-with-webpack).

### Using CDN

To use the Kendo UI for Vue Layout with CDN, follow the below steps:

1. Reference the `layout` and `intl` packages.

```sh
  <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
  <script src="https://unpkg.com/@progress/kendo-vue-layout@latest/dist/cdn/js/kendo-vue-layout.js"></script>
```

2. Reference one of the Kendo UI themes to style your components.

```sh
    // Load the Kendo Meridian Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-meridian@latest/dist/all.css">

    // Load the Kendo Bootstrap Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    // To load the Kendo Material Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">

    // To load the Kendo Fluent Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-fluent@latest/dist/all.css">

    // Load the Kendo Default Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css">
```

3. Follow the instructions in [this article](https://www.telerik.com/kendo-vue-ui-develop/components/my-license#installing-or-updating-the-license-key) to activate your product license. You can skip this step if your application already contains a license key.

## Initializing with Webpack

1. Download and install the package. Use Node.js v5.0.0 or later.

   ```sh
   npm install --save @progress/kendo-vue-layout @progress/kendo-vue-intl @progress/kendo-licensing @progress/kendo-svg-icons
   ```

2. Once installed, import the package module.

   ```jsx
   // ES2015 module syntax
   import { ActionSheet, AppBar, Avatar, BottomNavigation, Breadcrumb, Card, Drawer, ExpansionPanel, Menu, PanelBar, Splitter, Stepper, TabStrip } from '@progress/kendo-vue-layout';
   ```

   ```jsx
   // CommonJS format
   const { ActionSheet, AppBar, Avatar, BottomNavigation, Breadcrumb, Card, Drawer, ExpansionPanel, Menu, PanelBar, Splitter, Stepper, TabStrip } = require('@progress/kendo-vue-layout');
   ```

3. You are required to install one of the Kendo UI for Vue themes to style your components. For more information on how to add the styles, refer to the article on [getting started](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api#5-import-the-kendo-ui-for-vue-css-styles).

4. Follow the instructions on the Kendo UI for Vue [My License page](https://www.telerik.com/kendo-vue-ui-develop/components/my-license) to activate your license. You can skip this step if your application already contains a Kendo UI for Vue license file.

## Dependencies

The Layout package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-licensing
* @progress/kendo-svg-icons
* @progress/kendo-vue-intl

## Support and Learning Resources

* [ActionSheet Homepage](https://www.telerik.com/kendo-vue-ui/actionsheet)
* [AppBar Homepage](https://www.telerik.com/kendo-vue-ui/appbar)
* [Avatar Homepage](https://www.telerik.com/kendo-vue-ui/vue-avatar)
* [BottomNavigation Homepage](https://www.telerik.com/kendo-vue-ui/bottomnavigation)
* [Breadcrumb Homepage](https://www.telerik.com/kendo-vue-ui/breadcrumb)
* [Card Homepage](https://www.telerik.com/kendo-vue-ui/vue-card)
* [ContextMenu Homepage](https://www.telerik.com/kendo-vue-ui/menu)
* [Drawer Homepage](https://www.telerik.com/kendo-vue-ui/drawer)
* [ExpansionPanel Homepage](https://www.telerik.com/kendo-vue-ui/expansionpanel)
* [Menu Homepage](https://www.telerik.com/kendo-vue-ui/menu)
* [PanelBar Homepage](https://www.telerik.com/kendo-vue-ui/panelbar-\(accordion\))
* [Splitter Homepage](https://www.telerik.com/kendo-vue-ui/splitter)
* [Stepper Homepage](https://www.telerik.com/kendo-vue-ui/stepper)
* [TabStrip Homepage](https://www.telerik.com/kendo-vue-ui/vue-tabstrip)
* [TileLayout Homepage](https://www.telerik.com/kendo-vue-ui/tilelayout)
* [Getting Started with the Kendo UI Vue Layout](https://www.telerik.com/kendo-vue-ui-develop/components/layout/get-started)
* [API Reference of the Layout Package](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [Kendo UI for Vue Forum](https://www.telerik.com/forums/kendo-ui-vue)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

* [Vue Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-vue)
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap)