Bootstrap dynamic menu from database
Bootstrap is a great CSS framework for developing responsive and mobile-first websites.
In this blog, I will show you have to create dynamic menus for your website using ASP.NET; once complete, you will have a menu similar to the image below.

To start, let's create a view model with the code below.
using System.Collections.Generic;
namespace Web.Model.DynamicNavigationModel
{
public class DisplayBootstrapNavigtaionViewModel
{
public List<BootstrapNavigtaionViewModel> DisplayNavigation { get; set; }
}
public class BootstrapNavigtaionViewModel
{
public BootstrapNavigtaionViewModel(string manufacturer, string carType,string model, string pageUrl)
{
Manufacturer = manufacturer;
CarType = carType;
Model = model;
PageUrl = pageUrl;
}
public string Manufacturer { get; }
public string CarType { get;}
public string Model { get;}
public string PageUrl { get;}
}
}
Now let's create our data view model, which in this blog has hardcoded values, in a production environment, the data for the dynamic menu would most likely come from a database.
using System;
using System.Collections.Generic;
namespace Web.Model.DynamicNavigationModel
{
public class BootstrapNavigtaionDataModel
{
public List<BootstrapNavigtaionViewModel> RetrieveMenuData()
{
//This data model would pull the data from a database
//The data is just hard coded here for demo purposes
try
{
List<BootstrapNavigtaionViewModel> model = new List<BootstrapNavigtaionViewModel>
{
new BootstrapNavigtaionViewModel(manufacturer: "BMW", carType:"Petrol",model: "X5", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "BMW", carType:"Petrol",model: "X3", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "BMW", carType:"Diesel",model: "i8", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "BMW", carType:"Diesel",model: "Z4", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "Audi", carType:"Electric",model: "A4", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "Audi", carType:"Electric",model: "A6", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "Audi", carType:"Hybrid",model: "Q5", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "Audi", carType:"Hybrid",model: "A8", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "Porsche", carType:"Petrol",model: "911", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "Porsche", carType:"Petrol",model: "Cayenne", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "Porsche", carType:"Diesel",model: "Taycan", pageUrl: "#"),
new BootstrapNavigtaionViewModel(manufacturer: "Porsche", carType:"Diesel",model: "718", pageUrl: "#")
};
return model;
}
catch (Exception e)
{
//Do whatever if error occurs
Console.WriteLine(e);
throw;
}
}
}
}
Now create a controller and enter the following code.
using System.Linq;
using System.Web.Mvc;
using Web.Model.DynamicNavigationModel;
namespace Web.Controller.Controllers
{
public class BootstrapNavigationController : System.Web.Mvc.Controller
{
public ActionResult BootstrapNav()
{
return View("~/Views/DemoNav/BootstrapNav.cshtml");
}
public ActionResult DisplayNavigation()
{
var dataModel = new BootstrapNavigtaionDataModel();
var displayData = dataModel.RetrieveMenuData().ToList();
var model = new DisplayBootstrapNavigtaionViewModel
{
DisplayNavigation = displayData
};
return PartialView("~/Views/Partials/pvDynamicMenu.cshtml",model);
}
}
}
Finally, let's create our bootstrap menu using the code below.
@model Web.Model.DynamicNavigationModel.DisplayBootstrapNavigtaionViewModel
@{
int counter = 1;
var navigationData = Model.DisplayNavigation.GroupBy(x => x.Manufacturer).OrderBy(x=>x.Key).ToList();
}
<header id="link-header">
<nav class="navbar navbar-light navbar-expand-md navigation-clean">
<div class="container">
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><i class="fas fa-align-justify"></i></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav mx-auto" id="main-div" itemscope="" itemtype="https://schema.org/SiteNavigationElement">
@foreach (var category in navigationData.ToList())
{
<li class="nav-item dropdown" role="presentation">
<a class="nav-link dropdown-toggle" id="@category.Key" href="#" data-toggle="dropdown" aria-expand="false">@category.Key</a>
<div class="sub-container-@counter sub-container-top">
<ul class="dropdown-menu multi-column">
<li>
<div class="row p-2" role="menu">
@foreach (var subCategory in category.GroupBy(x => x.CarType))
{
<div class="col-sm-6">
<h4 class="menu-subcategory-header">@subCategory.Key</h4>
<hr>
<ul class="multi-column-dropdown">
@foreach (var product in subCategory)
{
<li><a class="sub-category-link" href="@product.PageUrl">@product.Model</a></li>
}
</ul>
</div>
}
</div>
</li>
</ul>
</div>
</li>
counter++;
}
</ul>
</div>
</div>
</nav>
</header>
Bootstrap dynamic menu from database
I hope you found this blog post helpful, you can view the complete working example of this blog on Github, where you can download and use if required.