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.