New to Kendo UI for Vue? Start a free 30-day trial
Changing Position of Column Menu Icon in Kendo UI for Vue Grid
Updated on Jan 30, 2026
Environment
| Product | Kendo UI for Vue Grid |
| Version | Current |
Description
I want to change the position of the column menu icon in the Kendo UI for Vue Grid from the right of the header text to the left. The component does not provide a built-in property for this functionality, so I need a way to accomplish it with custom CSS.
This knowledge base article also answers the following questions:
- How to move the column menu icon to the left side of the header text in Kendo UI for Vue Grid?
- Can I reposition the Kendo UI for Vue Grid column menu icon?
- How to achieve a custom layout for the column menu icon in Kendo UI for Vue Grid?
Change Theme
Theme
Loading ...
Solution
To move the column menu icon to the left of the header text, overwrite the built-in styles of the header using custom CSS. Follow these steps:
- Add the following CSS rules to your application:
css
/* Move the column menu icon to the left */
div.k-grid .k-grid-header .k-grid-filter,
div.k-grid .k-grid-header .k-header-column-menu,
div.k-grid .k-grid-header .k-grid-header-menu {
left: 0;
}
/* Adjust the header text margin */
.k-grid .k-grid-md .k-table-th > .k-cell-inner,
.k-grid-md .k-table-th > .k-cell-inner {
margin-inline: 8px;
}- Ensure the CSS is applied to the relevant elements within the grid header.
This approach modifies the default styling and makes the column menu icon appear on the left side of the header text.