---
title: Overview
page_title: ToolBar Overview - Components - Kendo UI for Vue
description: "Get an overview of the features the Kendo UI ToolBar wrapper for Vue delivers and use the component in Vue projects."
slug: overview_toolbar_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/buttons/toolbar/"
position: 1
---

<div><WrapperBanner link="/kendo-vue-ui/components/buttons/toolbar"></WrapperBanner></div>

# ToolBar Overview

The ToolBar holds various controls such as buttons, groups of buttons, toggle buttons, split buttons, and other customized elements.

The ToolBar wrapper for Vue is a client-side wrapper for the [Kendo UI ToolBar](https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar) widget.

<div data-component="StartFreeTrialSection"></div>

## Basic Usage

The following example demonstrates the ToolBar in action.

{% meta height:350 %}
{% embed_file toolbar/overview/basic-usage/main.vue preview %}
{% embed_file toolbar/overview/basic-usage/main.js %}
{% endmeta %}

## Functionality and Features

* [Command types]({% slug command_types_toolbar_wrapper %})
* [Templates]({% slug templates_toolbar_wrapper %})
* [Resizing]({% slug resizing_toolbar_toolbar_wrapper %})
* [Keyboard navigation]({% slug keyboard_navigation_toolbar_wrapper %})
* [RTL support]({% slug right_to_left_support_toolbar_wrapper %})

## Events

The following example demonstrates basic ToolBar events. You can subscribe to [all ToolBar events](https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#events) by the handler name.

{% meta height:350 %}
{% embed_file toolbar/overview/events/main.vue preview %}
{% embed_file toolbar/overview/events/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI ToolBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/toolbar/overview)
* [API Reference of the ToolBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar)