From 1d7351679fb13da478c78ba3393c6129e5a75fcd Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Wed, 16 Jul 2025 09:51:17 +0300
Subject: [PATCH] kb(ToolBar): Add KB for vertical display

---
 components/toolbar/appearance.md              |   3 +-
 .../toolbar-vertical-orientation-display.md   | 133 ++++++++++++++++++
 2 files changed, 135 insertions(+), 1 deletion(-)
 create mode 100644 knowledge-base/toolbar-vertical-orientation-display.md

diff --git a/components/toolbar/appearance.md b/components/toolbar/appearance.md
index 90a8950def..41c25bd90a 100644
--- a/components/toolbar/appearance.md
+++ b/components/toolbar/appearance.md
@@ -84,4 +84,5 @@ You can increase or decrease the size of the ToolBar by setting the `Size` param
 
 ## See Also
 
-  * [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance)
\ No newline at end of file
+* [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance)
+* [Vertical ToolBar](slug:toolbar-kb-vertical-orientation-display)
diff --git a/knowledge-base/toolbar-vertical-orientation-display.md b/knowledge-base/toolbar-vertical-orientation-display.md
new file mode 100644
index 0000000000..818e4c66d3
--- /dev/null
+++ b/knowledge-base/toolbar-vertical-orientation-display.md
@@ -0,0 +1,133 @@
+---
+title: Display Vertical ToolBar
+description: Learn how to display the Telerik ToolBar for Blazor vertically.
+type: how-to
+page_title: How to Display Vertical ToolBar
+slug: toolbar-kb-vertical-orientation-display
+tags: telerik, blazor, toolbar
+ticketid: 1693045
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>ToolBar for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+This KB answers the following questions:
+
+* How to display the TelerikToolBar vertically?
+* How to render the Telerik ToolBar for Blazor with vertical orientation?
+* How to arrange the ToolBar buttons one below the other?
+
+## Solution
+
+1. Disable the automatic tool overflowing with `OverflowMode="@ToolBarOverflowMode.None"` or `Adaptive="false"` in older versions.
+1. Set a custom CSS class to the ToolBar with the `Class` parameter.
+1. Use the custom CSS class to [override the ToolBar CSS styles](slug:themes-override):
+    * Set `column` `flex-flow` for the ToolBar and any nested [ButtonGroups](slug:toolbar-built-in-tools#toolbarbuttongroup). See [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more information.
+    * Reduce the component `width`.
+    * Adjust the `border-radius` values of buttons inside nested ButtonGroups.
+
+>caption Configure a vertical Telerik ToolBar for Blazor
+
+````RAZOR
+<h4>Block ToolBar</h4>
+
+before
+
+<TelerikToolBar Class="vertical-toolbar" Adaptive="false">
+    <ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
+        <ToolBarToggleButton Icon="@SvgIcon.Bold" @bind-Selected="@BoldSelected" />
+        <ToolBarToggleButton Icon="@SvgIcon.Italic" @bind-Selected="@ItalicSelected" />
+        <ToolBarToggleButton Icon="@SvgIcon.Underline" @bind-Selected="@UnderlineSelected" />
+    </ToolBarButtonGroup>
+
+    <ToolBarButton Icon="@SvgIcon.Save"></ToolBarButton>
+    <ToolBarButton Icon="@SvgIcon.Cancel"></ToolBarButton>
+    <ToolBarButton Icon="@SvgIcon.Trash"></ToolBarButton>
+
+    <ToolBarButton Icon="@SvgIcon.Undo"></ToolBarButton>
+</TelerikToolBar>
+
+after
+
+<h4>Inline ToolBar</h4>
+
+before
+
+<TelerikToolBar Class="vertical-toolbar inline-toolbar" Adaptive="false">
+    <ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
+        <ToolBarToggleButton Icon="@SvgIcon.Bold" @bind-Selected="@BoldSelected" />
+        <ToolBarToggleButton Icon="@SvgIcon.Italic" @bind-Selected="@ItalicSelected" />
+        <ToolBarToggleButton Icon="@SvgIcon.Underline" @bind-Selected="@UnderlineSelected" />
+    </ToolBarButtonGroup>
+
+    <ToolBarButton Icon="@SvgIcon.Save"></ToolBarButton>
+    <ToolBarButton Icon="@SvgIcon.Cancel"></ToolBarButton>
+    <ToolBarButton Icon="@SvgIcon.Trash"></ToolBarButton>
+
+    <ToolBarButton Icon="@SvgIcon.Undo"></ToolBarButton>
+</TelerikToolBar>
+
+after
+
+<style>
+
+    /* Optional inline display */
+
+    .vertical-toolbar.inline-toolbar {
+        display: inline-flex;
+    }
+
+    /* Apply vertical orientation */
+    .vertical-toolbar,
+    .vertical-toolbar .k-button-group {
+        flex-flow: column wrap;
+    }
+
+    /* Reduce width */
+    .vertical-toolbar {
+        width: min-content;
+    }
+
+        /* Remove unnecessary empty space at the top */
+        .vertical-toolbar::before {
+            content: none;
+        }
+
+        /* Adjust rounded corners in Button Groups */
+        .vertical-toolbar .k-button-group > .k-button:first-child {
+            border-start-end-radius: 4px;
+            border-end-start-radius: 0;
+        }
+
+        .vertical-toolbar .k-button-group > .k-button:last-child {
+            border-start-end-radius: 0;
+            border-end-start-radius: 4px;
+        }
+
+        .vertical-toolbar .k-button-group > .k-button + .k-button {
+            margin-inline-start: 0;
+            margin-block-start: -1px;
+        }
+</style>
+
+@code {
+    private bool BoldSelected { get; set; }
+    private bool ItalicSelected { get; set; }
+    private bool UnderlineSelected { get; set; }
+}
+````
+
+## See Also
+
+* [ToolBar Overview](slug:toolbar-overview)