How to use mega menu
I have used syncfusion blazor menu for page navigation in my web applications.I would like to know how to use "mega menu" in blazor web applications.
SIGN IN To post a reply.
5 Replies
GK
Gayathri KarunaiAnandam
Syncfusion Team
August 23, 2021 04:15 PM UTC
Hi Kins,
We have checked your reported query. We have prepared a mega menu sample by using the Menu Template. Please check the below code snippet.
|
<SfMenu Items="@data">
<MenuFieldSettings Text="Value" Children="Options"></MenuFieldSettings>
<MenuTemplates TValue="CategoryModel">
<Template>
@{
var MenuItems = context;
if (MenuItems.Value != null )
{
<div>@MenuItems.Value</div>
}
else
{
<div style="width: 400px; height: 200px; padding: 2rem;">
<div tabindex="0" class="e-card" >
<div class="e-card-header">
<div class="e-card-header-caption">
<div class="e-card-header-title">Description</div>
</div>
</div>
<div class="e-card-content">
@MenuItems.About
</div>
</div>
</div>
}
}
</Template>
</MenuTemplates>
</SfMenu>
</div>
@code{
private List<CategoryModel> data = new List<CategoryModel>
{
new CategoryModel {
Value = "Products",
Options = new List<CategoryModel>
{
new CategoryModel {
Id = "about",
About = "We are on a mission to provide world-class best software solutions for web, mobile and desktop platforms. Around 900+ applications are desgined and delivered to our customers to make digital & strengthen their businesses."
}
}
},
new CategoryModel {
Value = "Services",
Options = new List<CategoryModel>
{
new CategoryModel {
Id = "about",
About = "We are on a mission to provide world-class best software solutions for web, mobile and desktop platforms. Around 900+ applications are desgined and delivered to our customers to make digital & strengthen their businesses."
}
}
},
new CategoryModel {
Value = "About Us",
Options = new List<CategoryModel>
{
new CategoryModel {
Id = "about",
About = "We are on a mission to provide world-class best software solutions for web, mobile and desktop platforms. Around 900+ applications are desgined and delivered to our customers to make digital & strengthen their businesses."
}
}
},
new CategoryModel { Value = "Careers" },
new CategoryModel { Value = "Sign In" }
};
private class CategoryModel
{
public List<CategoryModel> Options { get; set; }
public string Value { get; set; }
public string About { get; set; }
public string Id { get; set; }
}
} |
For your convenience, we have prepared a sample based on this. Please check the below link.
If we misunderstood your requirement, Please share the below details.
- Please share your use case scenario.
Could you please check the above sample and get back to us with more information if we misunderstood your requirement so that we can analyze based on that and provide a better solution? The information provided would be great help for us to proceed further.
Regards,
Gayathri K
KI
KINS
August 24, 2021 04:32 AM UTC
thanks for support...
I need this mega menu in attached format
and also I need brudcrum in page header when I navigate from mega menu
Attachment: image001_4a40ae54.zip
GK
Gayathri KarunaiAnandam
Syncfusion Team
August 25, 2021 02:42 AM UTC
Hi Kins,
We have checked your reported query. We have prepared a sample based on your requirement. We can customize the menu popup using Menu Template. Please check the below code snippet.
|
<Template>
@{
var MenuItems = context;
if (MenuItems.Value != null )
{
<div>@MenuItems.Value</div>
}
else
{
<div style="width: 100%; padding: 2rem;">
<div tabindex="0" >
<div class="e-card-header">
<div class="e-card-header-caption">
<div class="e-card-header-title">Description</div>
</div>
</div>
<div>
<input />
</div>
<table class="e-table">
<tr>
<td> <div style="padding-right:30px;">
<p>Configuration </p>
<hr>
<li>Paygroup master</li>
<li>Paygroup mapping</li>
<li>master</li>
</div></td>
<td> <div style="padding-right:30px;">
<p>Configuration </p>
<hr>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</div></td>
<td> <div style="padding-right:30px;">
<p>Associate </p>
<hr>
<li>Master</li>
<li>Salve</li>
<li>Import</li>
</div></td>
</tr>
</table>
<table class="e-table">
<tr>
<td> <div style="padding-right:30px;">
<p>Configuration </p>
<hr>
<li>Master</li>
<li>Salve</li>
<li>Import</li>
</div></td>
<td> <div style="padding-right:30px;">
<p>Transaction </p>
<hr>
<li>Promote</li>
<li>Decline</li>
<li>wait</li>
</div></td>
</tr>
</table>
</div>
</div>
}
}
</Template> |
For your convenience, we have prepared a sample based on this. Please check the below sample link.
Please check the above link and get back to us, if you need further assistance.
Regards,
Gayathri K
KI
KINS
August 25, 2021 03:46 AM UTC
Thanks for prompt reply..
I will implement the same.
Can you add brudcrum example when I navigate from mega menu.
Please help...
GK
Gayathri KarunaiAnandam
Syncfusion Team
August 25, 2021 03:54 PM UTC
Hi Kins,
We have checked your reported query. Currently, we don’t have a Breadcrumb component in our Blazor platform. However, we have already logged a feature request for this component and you can track the status through our feedback portal link below. We have planned to implement this component and it will be available in our Volume 3 2021 which will be expected on end of September 2021.
Please check the below Roadmap link.
Please get back to us, if you need further assistance.
Regards,
Gayathri K
SIGN IN To post a reply.
