Appearance
The Menu renders as a <ul> element and expands horizontally by default.
If a horizontal Menu is wider than the total width of its root items, a blank space will remain visible on the right. To remove this space, use the CSS rules from the following example.
#menu-id /* For a specific Menu instance. */
,
.k-menu-horizontal /* For all horizontal Menus. */
{
display: inline-block;
}
In left-to-right layouts, shrinking the horizontal Menu will cause the border of the last root item to touch the right border of the Menu. The following example demonstrates how to remove the last item border.
#menu-id > .k-last /* For a specific Menu instance. */
,
.k-menu-horizontal > .k-last /* For all horizontal Menus. */
{
border-width: 0;
}
Rendering
Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the Components Rendering Overview article.
To review the latest rendering of the component, refer to the HTML specifications in the Kendo UI Themes Monorepo. The tests folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.