Wrapping the Items in the Kendo UI for Angular Menu Component
Environment
| Product | Progress® Kendo UI® for Angular Menu |
Description
To create a responsive layout when using the Menu component in Angular applications, you can make items wrap based on the available screen size. This KB article demonstrates how to apply custom CSS to achieve item wrapping in a Kendo UI Menu for Angular.
This KB article also answers the following questions:
- How can I make Kendo UI Menu items responsive?
- What CSS is required to wrap menu items in Kendo UI for Angular?
- How do I ensure menu items fit on smaller screens with Kendo UI for Angular?
Solution
To make menu items in Kendo UI Menu for Angular wrap according to the available screen size, you need to apply custom CSS. This customization leverages the Flexbox layout to allow items to wrap when the screen size decreases.
Apply the following CSS styles to the Menu component to make the items wrap responsively:
kendo-menu {
display: flex;
}
kendo-menu .k-menu {
flex-wrap: wrap;
}The following example demonstrates how to apply the Flexbox layout to the Menu component to make the items wrap responsively:
This CSS will make the menu container a flex container and allow the menu items to wrap onto multiple lines as necessary.
Depending on your specific layout and design requirements, you may need to make additional adjustments to these styles. These adjustments could include setting specific widths for menu items, adjusting margins or padding, or other responsive design techniques.
Notes
- The custom CSS provided here is a starting point for making Kendo UI Menu items wrap. Depending on your application's design, further customization may be required.
- Testing in various screen sizes is recommended to ensure the desired responsive behavior across devices.