New to Telerik UI for Blazor? Start a free 30-day trial
Display Vertical ToolBar
Updated on Jul 16, 2025
Environment
Product | ToolBar for Blazor |
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
- Disable the automatic tool overflowing with
OverflowMode="@ToolBarOverflowMode.None"
orAdaptive="false"
in older versions. - Set a custom CSS class to the ToolBar with the
Class
parameter. - Use the custom CSS class to override the ToolBar CSS styles:
- Set
column
flex-flow
for the ToolBar and any nested ButtonGroups. See Flexbox Guide for more information. - Reduce the component
width
. - Adjust the
border-radius
values of buttons inside nested ButtonGroups.
- Set
Configure a vertical Telerik ToolBar for Blazor
<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; }
}