|
| 1 | +--- |
| 2 | +title: Mega Menu |
| 3 | +description: How to make a mega menu dropdown with grouped items |
| 4 | +type: how-to |
| 5 | +page_title: Mega Menu Dropdown |
| 6 | +slug: menu-kb-megamenu |
| 7 | +position: |
| 8 | +tags: |
| 9 | +ticketid: 1519248 |
| 10 | +res_type: kb |
| 11 | +--- |
| 12 | + |
| 13 | +## Environment |
| 14 | +<table> |
| 15 | + <tbody> |
| 16 | + <tr> |
| 17 | + <td>Product</td> |
| 18 | + <td>Menu for Blazor</td> |
| 19 | + </tr> |
| 20 | + </tbody> |
| 21 | +</table> |
| 22 | + |
| 23 | + |
| 24 | +## Description |
| 25 | +How can I create a large structured menu? I want the dropdown to be big and to contain many items instead of one item per row. |
| 26 | + |
| 27 | + |
| 28 | + |
| 29 | +## Solution |
| 30 | +You can use the ItemTemplate of the menu to render the desired content and layout. |
| 31 | + |
| 32 | +To avoid the expand arrows, make sure you have no further child items for the items you want to make into a mega-menu. You may also want to add a bit of CSS to remove the built-in paddings on nested menu items so you can have full control over the layout and colors. |
| 33 | + |
| 34 | +>caption A structured mega-menu dropdown |
| 35 | +
|
| 36 | +````CSHTML |
| 37 | +@* This sample shows how you can make a mega menu with the Telerik Menu |
| 38 | + The key point is to have only one level of nesting so that the mega menu item |
| 39 | + does not render the expand arrow to indicate child items exist, |
| 40 | + and then a bit of CSS to remove the default padding for full control*@ |
| 41 | +
|
| 42 | +<TelerikMenu Data="@MenuItems"> |
| 43 | + <ItemTemplate> |
| 44 | + @{ |
| 45 | + MenuItem currItem = context as MenuItem; |
| 46 | + if (currItem.ParentId == null) // root level items get their text rendered |
| 47 | + { |
| 48 | + @currItem.Text |
| 49 | + } |
| 50 | + else // for child items we render the mega menu |
| 51 | + { |
| 52 | + <div style="width: 400px; height: 300px; background: yellow; padding: 2rem;"> |
| 53 | + <h6>@currItem.Text</h6> |
| 54 | + <p style="white-space: normal"> |
| 55 | + This here would often be a separate component |
| 56 | + or otherwise use metadata from the model to render |
| 57 | + the desired HTML structure and layout. |
| 58 | + Here, we just add some text and let the parent element provide |
| 59 | + dimensions that will stretch the menu item. In a real app |
| 60 | + you can refactor this as needed - use more child elements |
| 61 | + of this node, other metadata, components and so on. |
| 62 | + </p> |
| 63 | + </div> |
| 64 | + } |
| 65 | + } |
| 66 | + </ItemTemplate> |
| 67 | +</TelerikMenu> |
| 68 | +
|
| 69 | +<style> |
| 70 | + /* we use this to style the menu items in popups so you don't see the built-in background |
| 71 | + so you can ahve full control over the layout and colors of the mega menu items */ |
| 72 | + .k-menu-popup .k-menu-item .k-link { |
| 73 | + padding: 0; |
| 74 | + } |
| 75 | +</style> |
| 76 | +
|
| 77 | +@code { |
| 78 | + // just sample data binding |
| 79 | + public List<MenuItem> MenuItems { get; set; } |
| 80 | +
|
| 81 | + // this model uses the default field name for the menu |
| 82 | + public class MenuItem |
| 83 | + { |
| 84 | + public int Id { get; set; } |
| 85 | + public int? ParentId { get; set; } |
| 86 | + public string Text { get; set; } |
| 87 | + } |
| 88 | +
|
| 89 | + protected override void OnInitialized() |
| 90 | + { |
| 91 | + MenuItems = new List<MenuItem>() |
| 92 | + { |
| 93 | + new MenuItem() |
| 94 | + { |
| 95 | + Id = 1, |
| 96 | + Text = "Overview" |
| 97 | + }, |
| 98 | + new MenuItem() |
| 99 | + { |
| 100 | + Id = 2, |
| 101 | + Text = "Demos" |
| 102 | + }, |
| 103 | + new MenuItem() |
| 104 | + { |
| 105 | + Id = 3, |
| 106 | + Text = "Roadmap" |
| 107 | + }, |
| 108 | + // sample models for the nested mega dropdowns |
| 109 | + // there should be only one child per root-level item for best results |
| 110 | + new MenuItem() |
| 111 | + { |
| 112 | + Id = 4, |
| 113 | + ParentId = 1, |
| 114 | + Text = "Products", |
| 115 | + }, |
| 116 | + new MenuItem() |
| 117 | + { |
| 118 | + Id = 5, |
| 119 | + ParentId = 2, |
| 120 | + Text = "Demo List", |
| 121 | + }, |
| 122 | + new MenuItem() |
| 123 | + { |
| 124 | + Id = 6, |
| 125 | + ParentId = 3, |
| 126 | + Text = "What's new", |
| 127 | + }, |
| 128 | + }; |
| 129 | +
|
| 130 | + base.OnInitialized(); |
| 131 | + } |
| 132 | +} |
| 133 | +```` |
0 commit comments