diff --git a/_config.yml b/_config.yml
index 887be96652..0a9182d36f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -347,6 +347,7 @@ intro_columns:
       "Tab Strip": "components/tabstrip/overview"
       "TreeView": "components/treeview/overview"
       "Pager": "pager-overview"
+      "ToolBar": "toolbar-overview"
 
   -
     title: "Interactivity and UX"
diff --git a/accessibility/keyboard-navigation.md b/accessibility/keyboard-navigation.md
index 00d372e822..31d530e403 100644
--- a/accessibility/keyboard-navigation.md
+++ b/accessibility/keyboard-navigation.md
@@ -86,6 +86,8 @@ The following list shows the Telerik components that support specific keyboard c
 
 * [TimePicker](https://demos.telerik.com/blazor-ui/timepicker/keyboard-navigation)
 
+* [ToolBar](https://demos.telerik.com/blazor-ui/toolbar/keyboard-navigation)
+
 * [ToggleButton](https://demos.telerik.com/blazor-ui/togglebutton/keyboard-navigation)
 
 * TreeList - will have keyboard navigation in an upcoming release.
diff --git a/components/toolbar/built-in-tools.md b/components/toolbar/built-in-tools.md
new file mode 100644
index 0000000000..a3d01adad4
--- /dev/null
+++ b/components/toolbar/built-in-tools.md
@@ -0,0 +1,181 @@
+---
+title: Built-in Tools
+page_title: ToolBar - Built-in Tools
+description: Built-in Tools in the Telerik ToolBar for Blazor
+slug: toolbar-built-in-tools
+tags: telerik,blazor,toolbar,builtin,tools,button,buttons
+published: True
+position: 1
+---
+
+# Built-in Tools
+
+The Telerik ToolBar for Blazor allows you to use built-in buttons and button groups or to add a [custom tool]({%slug toolbar-templated-item%}). The available built-in tools are:
+
+* [ToolBarButton](#toolbarbutton)
+* [ToolBarToggleButton](#toolbartogglebutton)
+* [ToolbarButtonGroup](#toolbarbuttongroup)
+
+## ToolBarButton
+
+A toolbar button is a plain button that you can click and it raises an event so the application can respond to that.
+
+You can add multiple buttons to the Telerik Toolbar. To do that you should add the `<ToolBarButton>` to the `<TelerikToolBar>`.
+
+You can customize the buttons using the following features:
+
+* `Enabled` - `bool`, defaults to `true` - specifies if the button is clickable.
+
+* `Visible` - `bool`, defaults to `true` - specifies if the button will be visible in the toolbar.
+
+* `Title` - `string` - maps to the `title` HTML attribute for the `<button>`.
+
+* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the ToolbarButton. You could use that class to cascade styles.
+
+* `OnClick` - `EventCallback` - allows you to execute a method upon the click of the button. For more information see the [Events]({%slug toolbar-events%}) article.
+
+* `Icon` - `string` - adds a font icon to the button. You can find more information on adding a font icon to a Telerik Component in [Telerik Font Icons article]({%slug general-information/font-icons%}#icon-in-telerik-component).
+
+* `ImageURL` - `string` - adds an image to the button. You can provide an image url to this parameter.
+
+* `SpriteClass` - `string` - add a sprite class image to the button. Set this attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite.
+
+* `IconClass` - `string` - allows you to set a CSS class that provides the required font name, font size and content for the `::before` pseudo-element.
+
+>caption The Telerik ToolBar with ToolBarButtons
+
+![](images/toolbar-toolbarbutton-example.png)
+
+````CSHTML
+@*This example shows the TelerikToolBar with ToolBarButtons and their features*@
+
+<TelerikToolBar>
+    <ToolBarButton Icon="@IconName.Bold" Class="myBoldButton" Enabled="@true" Visible="true" Title="Bold Button" OnClick="@OnBold">Bold</ToolBarButton>
+    <ToolBarButton Icon="@IconName.Italic" Class="myItalicButton" Enabled="@false" Visible="true" Title="Italic Button" OnClick="@OnItalic">Italic</ToolBarButton>
+    <ToolBarButton Icon="@IconName.Underline" Class="myUnderlineButton" Enabled="@true" Visible="true" Title="Underline Button" OnClick="@OnUnderline">Underline</ToolBarButton>
+</TelerikToolBar>
+
+@code {
+    public void OnBold()
+    {
+        Console.WriteLine("The user clicked on the bold button");
+    }
+
+    public void OnItalic()
+    {
+        Console.WriteLine("The user clicked on the italic button");
+    }
+
+    public void OnUnderline()
+    {
+        Console.WriteLine("The user clicked on the underline button");
+    }
+}
+````
+
+## ToolBarToggleButton
+
+A toolbar toggle button has two states - normal and selected - and clicking it can toggle between them through two-way binding or an event.
+
+You can add multiple toggle  buttons to the Telerik Toolbar. To do that you should add the `<ToolBarToggleButton>` to the `<TelerikToolBar>`.
+
+You can customize the toggle buttons using the following features:
+
+* `Selected` - `bool` - specifies whether the button is in selected state. You can use it with one and two-way data binding with the `SelectedChanged` event. For more information on how to handle the `SelectedChanged` event see the [Events]({%slug toolbar-events%}) article.
+
+* `Enabled` - `bool`, defaults to `true` - specifies if the button is clickable.
+
+* `Visible` - `bool`, defaults to `true` - specifies if the button will be visible in the toolbar.
+
+* `Title` - `string` - maps to the `title` HTML attribute for the `<button>`.
+
+* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the ToolbarButton. You could use that class to cascade styles.
+
+* `OnClick` - `EventCallback` - allows you to execute an method upon the click of the button. For more information read the [Events]({%slug toolbar-events%}) article.
+
+* `Icon` - `string` - adds a font icon to the button. You can find more information on adding a font icon to a Telerik Component in [Telerik Font Icons article]({%slug general-information/font-icons%}#icon-in-telerik-component).
+
+* `ImageURL` - `string` - adds an image to the button. You can provide an image url to this parameter.
+
+* `SpriteClass` - `string` - add a sprite class image to the button. Set this attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite.
+
+* `IconClass` - `string` - allows you to set a CSS class that provides the required font name, font size and content for the `::before` pseudo-element.
+
+>caption The Telerik ToolBar with ToolBarToggleButtons
+
+![](images/toolbar-togglebutton-example.png)
+
+````CSHTML
+@*This example shows the TelerikToolBar with ToolBarToggleButton and its available features*@
+
+<TelerikToolBar>
+    <ToolBarToggleButton @bind-Selected="@Selected" 
+                         Enabled="true" 
+                         Class="myToggleFullScreenButton" 
+                         Icon="@IconName.ToggleFullScreenMode" 
+                         OnClick="@ToggleFullScreen">
+                            Toggle Fullscreen
+    </ToolBarToggleButton>
+</TelerikToolBar>
+
+@code {
+    public bool Selected { get; set; } = true;
+
+    public void ToggleFullScreen()
+    {
+        if (Selected)
+        {
+            Console.WriteLine("The user is in full screen");
+        }
+        else
+        {
+            Console.WriteLine("The user exited full screen");
+        }
+    }
+}
+````
+
+## ToolBarButtonGroup
+
+The button group is a container for one or more buttons that renders them together and spaces them out from the adacent buttons or groups.
+
+You can add one or more group of buttons to the Toolbar. To do that you should add the `<ToolBarButtonGroup>` to the `<TelerikToolBar>`. In the button group you can place either the `ToolBarButton` or the `ToolBarToggleButton`.
+
+You can customize the groups using the following features:
+
+* `Visible` - `bool`, defaults to `true` - specifies if the group will be visible in the toolbar.
+
+* `SelectionMode` - `enum` - specifies whether you can select one or multiple buttons from the group at the same time (applicable for `ToolBarToggleButton` instances inside it). It takes a member of the `ButtonGroupSelectionMode` enum:
+
+    * Single - this is the default value
+    * Multiple
+    
+* `Enabled` - `bool`, defaults to `true` - specifies if the group is clickable.
+
+* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the ToolBarButtonGroup. You could use that class to cascade styles.
+
+* `Width` - `string` - allows you to control the width of the group.
+
+>caption The Telerik ToolBar with grouped buttons
+
+![](images/toolbar-grouped-buttons.png)
+
+````CSHTML
+@*This example shows the TelerikToolBar with grouped ToolBarButtons*@
+
+<TelerikToolBar>
+    <ToolBarButtonGroup Visible="true" 
+                        SelectionMode="@ButtonGroupSelectionMode.Multiple" 
+                        Class="formattingButtons" 
+                        Enabled="true">
+        <ToolBarButton Icon="@IconName.Bold">Bold</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Italic">Italic</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Underline">Underline</ToolBarButton>
+    </ToolBarButtonGroup>
+</TelerikToolBar>
+````
+
+## See Also
+
+  * [Live Demo: ToolBar Overview](https://demos.telerik.com/blazor-ui/toolbar/overview)
+  * [ToolBar Overview]({%slug toolbar-overview%})
diff --git a/components/toolbar/events.md b/components/toolbar/events.md
new file mode 100644
index 0000000000..947ae9fe60
--- /dev/null
+++ b/components/toolbar/events.md
@@ -0,0 +1,72 @@
+---
+title: Events
+page_title: ToolBar - Events
+description: Events in the Telerik ToolBar for Blazor
+slug: toolbar-events
+tags: telerik,blazor,toolbar,events
+published: True
+position: 25
+---
+
+# Events
+
+The ToolBar exposes events for its [built-in buttons]({%slug toolbar-built-in-tools%}) which allow you to react when the user perform actions on them. Such actions would be a click event or changing the selected state for the toggle button. The available events are:
+
+* [OnClick](#onclick)
+* [SelectedChanged](#selectedchanged)
+
+For [custom (templated) items]({%slug toolbar-templated-item%}), handle the corresponding events exposed by the components/elements you place inside them.
+
+## OnClick
+
+The `OnClick` event fires when the user clicks on a button in the ToolBar (also applicable to toggle buttons).
+
+>caption The OnClick event for the ToolBar buttons
+
+````CSHTML
+@*When clicking on the button a message will be printed in your console*@
+
+<TelerikToolBar>
+    <ToolBarButton Icon="@IconName.HyperlinkEmail" OnClick="@OnHyperlinkClick">Hyperlink</ToolBarButton>
+</TelerikToolBar>
+
+
+@code {
+    public void OnHyperlinkClick()
+    {
+        Console.WriteLine("The user clicked on the hyperlink button");
+    }
+}
+````
+
+## SelectedChanged
+
+The `SelectedChanged` event will fire when the user changes the state of the [`ToolBarToggleButton`]({%slug toolbar-built-in-tools%}#toolbartogglebutton). It is used for one-way data binding of the `Selected` parameter and will prevent you from using two-way data binding (`@bind-Selected`)
+
+>caption The SelectedChanged event for the ToolBarToggleButton
+
+````CSHTML
+@*Handle the SelectedChangedEvent*@
+
+<TelerikToolBar>
+    <TelerikToggleButton Selected="@Selected" SelectedChanged="@SelectedChangedHandler"></TelerikToggleButton>
+
+</TelerikToolBar>
+
+
+@code {
+    public bool Selected { get; set; }
+
+    public void SelectedChangedHandler(bool value)
+    {
+        Selected = value;
+
+        //your application logic regarding the change of the value
+    }
+}
+````
+
+## See Also
+
+  * [Live Demo: ToolBar Overview](https://demos.telerik.com/blazor-ui/toolbar/overview)
+  * [ToolBar Overview]({%slug toolbar-overview%})
diff --git a/components/toolbar/images/basic-toolbar-screenshot.png b/components/toolbar/images/basic-toolbar-screenshot.png
new file mode 100644
index 0000000000..046462f85e
Binary files /dev/null and b/components/toolbar/images/basic-toolbar-screenshot.png differ
diff --git a/components/toolbar/images/toolbar-grouped-buttons.png b/components/toolbar/images/toolbar-grouped-buttons.png
new file mode 100644
index 0000000000..9fa46ba46b
Binary files /dev/null and b/components/toolbar/images/toolbar-grouped-buttons.png differ
diff --git a/components/toolbar/images/toolbar-separators.png b/components/toolbar/images/toolbar-separators.png
new file mode 100644
index 0000000000..56fc123e51
Binary files /dev/null and b/components/toolbar/images/toolbar-separators.png differ
diff --git a/components/toolbar/images/toolbar-templated-item.png b/components/toolbar/images/toolbar-templated-item.png
new file mode 100644
index 0000000000..450322fb72
Binary files /dev/null and b/components/toolbar/images/toolbar-templated-item.png differ
diff --git a/components/toolbar/images/toolbar-togglebutton-example.png b/components/toolbar/images/toolbar-togglebutton-example.png
new file mode 100644
index 0000000000..9d63293e34
Binary files /dev/null and b/components/toolbar/images/toolbar-togglebutton-example.png differ
diff --git a/components/toolbar/images/toolbar-toolbarbutton-example.png b/components/toolbar/images/toolbar-toolbarbutton-example.png
new file mode 100644
index 0000000000..b94a5988ea
Binary files /dev/null and b/components/toolbar/images/toolbar-toolbarbutton-example.png differ
diff --git a/components/toolbar/overview.md b/components/toolbar/overview.md
new file mode 100644
index 0000000000..81b5a13d7c
--- /dev/null
+++ b/components/toolbar/overview.md
@@ -0,0 +1,115 @@
+---
+title: Overview
+page_title: ToolBar Overview
+description: Overview of the ToolBar component for Blazor.
+slug: toolbar-overview
+tags: telerik,blazor,toolbar,tools,buttoncontainer
+published: True
+position: 0
+---
+
+# ToolBar Overview
+
+The ToolBar component is a container for buttons or other application-specifc tools. This article explains the available features.
+
+#### In This Article
+
+* [Basics](#basics)
+* [Features](#features)
+
+## Basics
+
+To use the Telerik Toolbar component:
+
+1. Add the `<TelerikToolBar>` tag to your page.
+1. Populate it with [Built-In Tools]({%slug toolbar-built-in-tools%}) or [Custom Tools]({%slug toolbar-templated-item%}).
+1. Handle their respective events so your application can respond to the user actions.
+
+>caption Basic Telerik Toolbar
+
+![basic toolbar screenshot](images/basic-toolbar-screenshot.png)
+
+````CSHTML
+@*Add a basic Telerik ToolBar to your page with a few built-in buttons.*@
+
+<TelerikToolBar>
+    <ToolBarButtonGroup>
+        <ToolBarButton Icon="@IconName.Bold" OnClick="@OnBold">Bold</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Italic" OnClick="@OnItalic">Italic</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Underline" OnClick="@OnUnderline">Underline</ToolBarButton>
+    </ToolBarButtonGroup>
+
+    <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
+
+    <ToolBarButton Icon="@IconName.Undo">Undo</ToolBarButton>
+</TelerikToolBar>
+
+<br />
+
+@Result
+
+@code {
+    public bool Selected { get; set; } = true;
+
+    public string Result { get; set; }
+
+    public void OnBold()
+    {
+        Result = "The user clicked on the bold button";
+    }
+
+    public void OnItalic()
+    {
+        Result = "The user clicked on the italic button";
+    }
+
+    public void OnUnderline()
+    {
+        Result = "The user clicked on the underline button";
+    }
+}
+````
+
+
+>caption Components namespace and reference
+
+````CSHTML
+@*Component namespace and reference*@
+
+<TelerikToolBar @ref="@ToolbarReference">
+    <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
+
+    <ToolBarButton Icon="@IconName.Undo">Undo</ToolBarButton>
+</TelerikToolBar>
+
+@code {
+    public Telerik.Blazor.Components.TelerikToolBar ToolbarReference { get; set; }
+
+    public bool Selected { get; set; } = true;
+}
+````
+
+## Features
+
+>caption The ToolBar provides the following features:
+
+* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the ToolBar component. You could use that class to control the size of the component through CSS.
+
+* `ToolBarButton` - renders a button in the ToolBar. You can find more information and examples in the [Built-In Tools]({%slug toolbar-built-in-tools%}#toolbarbutton) article.
+
+* `ToolBarToggleButton` - renders a toggle button in the ToolBar. You can find more information and examples in the [Built-In Tools]({%slug toolbar-built-in-tools%}#toolbartogglebutton) article.
+
+* `ToolBarButtonGroup` - creates a group of buttons in the component. You can find more information and examples in the [Built-In Tools]({%slug toolbar-built-in-tools%}#toolbarbuttongroup) article.
+
+* `ToolBarTemplateItem` - allows you to create a custom item for the ToolBar. You can read more about this in the [Templated Item]({%slug toolbar-templated-item%}) article.
+
+* `ToolBarSeparator` - adds a line that separates items in the ToolBar. You can find more information in the [Separators]({%slug toolbar-separators%}) article.
+
+* `ToolBarSpacer` - adds empty space that separates the items into different groups. You can find more information in the [Separators]({%slug toolbar-separators%}) article.
+
+
+
+## See Also
+
+* [Live Demo: ToolBar Overview](https://demos.telerik.com/blazor-ui/toolbar/overview)
+* [Live Demo: ToolBar Tools](https://demos.telerik.com/blazor-ui/toolbar/tools)
diff --git a/components/toolbar/separators.md b/components/toolbar/separators.md
new file mode 100644
index 0000000000..04954bf773
--- /dev/null
+++ b/components/toolbar/separators.md
@@ -0,0 +1,50 @@
+---
+title: Separators
+page_title: ToolBar - Separators
+description: Separate items in the Telerik ToolBar for Blazor
+slug: toolbar-separators
+tags: telerik,blazor,toolbar,separator,spacer,tools
+published: True
+position: 5
+---
+
+# Separators
+
+You can visually separate the items in the Telerik ToolBar for Blazor. Depending on the needs of your application you can use of the following, or a combination of them:
+
+* `ToolBarSeparator` - to separate two items with a solid line you should add the `<ToolBarSeparator>` tag between them. 
+
+* `ToolBarSpacer` - defines empty space in the toolbar which separates the items. The space between the items is automatically calculated to fit the width of the ToolBar. For example, one spacer in the middle of the items will push the second part of items to the right-hand side of the toolbar.
+
+* `ToolBarButtonGroup` - you can combine built-in buttons into groups and those groups also add some spacing and separation around themselves. You can read more about them in the [Built-in Tools - ToolBarButtonGroup]({%slug toolbar-built-in-tools%}#toolbarbuttongroup) section.
+
+
+>caption Use ToolBarButtonGroup, ToolBarSeparator and ToolBarSpace to separate items in the ToolBar
+
+![toolbar spacers](images/toolbar-separators.png)
+
+````CSHTML
+@* Use the ToolBarSpacer to add space between the button group and the rest and the separator to separate the toggle button and the undo button *@
+
+<TelerikToolBar>
+    <ToolBarButtonGroup>
+        <ToolBarButton Icon="@IconName.Bold">Bold</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Italic">Italic</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Underline">Underline</ToolBarButton>
+    </ToolBarButtonGroup>
+    <ToolBarSpacer />
+    <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
+    <ToolBarSeparator />
+    <ToolBarButton Icon="@IconName.Undo">Undo</ToolBarButton>
+</TelerikToolBar>
+
+
+@code {
+    public bool Selected { get; set; } = true;
+}
+````
+
+## See Also
+
+  * [Live Demo: ToolBar Overview](https://demos.telerik.com/blazor-ui/toolbar/overview)
+  * [ToolBar Overview]({%slug toolbar-overview%})
diff --git a/components/toolbar/templated-item.md b/components/toolbar/templated-item.md
new file mode 100644
index 0000000000..8f7c00a7c2
--- /dev/null
+++ b/components/toolbar/templated-item.md
@@ -0,0 +1,67 @@
+---
+title: Templated Item
+page_title: ToolBar - Templated Item
+description: Templated Item in the Telerik ToolBar for Blazor
+slug: toolbar-templated-item
+tags: telerik,blazor,toolbar,template,item,templateditem
+published: True
+position: 10
+---
+
+# Templated (Custom) Item
+
+The Telerik ToolBar for Blazor allows you to add a custom element. To use it, add the `<ToolBarTemplateItem>` inside the `<TelerikToolBar>`. In it, you can add HTML and components according to your application needs.
+
+You can use that item to add complex toolbars to your application, which have dropdowns, inputs and other components. You can handle any events and use any API they expose to built your business logic.
+
+You cannot add those Templated items to a `ToolBarButtonGroup`.
+
+>caption Add a Telerik DropDownList to the ToolBar
+
+![templated item for the ToolBar](images/toolbar-templated-item.png)
+
+````CSHTML
+@*Use the templated item to add a Telerik DropDownList to the ToolBar*@
+
+<TelerikToolBar>
+    <ToolBarButtonGroup>
+        <ToolBarButton Icon="@IconName.Bold">Bold</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Italic">Italic</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Underline">Underline</ToolBarButton>
+    </ToolBarButtonGroup>
+    <ToolBarSeparator />
+
+    <ToolBarTemplateItem>
+        <TelerikDropDownList Data="@Roles" Value="@SelectedRole" ValueChanged="@( (string v) => RoleChange(v) )"></TelerikDropDownList>
+    </ToolBarTemplateItem>
+</TelerikToolBar>
+
+
+@code {
+    public bool Selected { get; set; } = true;
+
+    public string SelectedRole { get; set; }
+
+    public List<string> Roles { get; set; } = new List<string>()
+    {
+         "Manager", "QA", "Developer", "Support"
+    };
+
+    protected override void OnInitialized()
+    {
+        SelectedRole = Roles.FirstOrDefault();
+    }
+
+    void RoleChange(string newRole)
+    {
+        // use the argument, or use the Value with two-way binding and other events like OnChange
+        SelectedRole = newRole;
+        Console.WriteLine($"The user is now in the {SelectedRole} role");
+    }
+}
+````
+
+
+## See Also
+
+  * [Live Demo: ToolBar Overview](https://demos.telerik.com/blazor-ui/toolbar/overview)