Quick Tip: How to keep the page links on top menu bar instead of displaying categories in nopCommerce

Many times when store admin installs the nopCommerce out of the box and start adding the categories for products  they realize that suddenly the page links on top menu disappears (like homepage, my account, contact us etc) and only the product categories shows up.

Well, this change is due to one of the condition that is hard-coded in  the top menu bar section of nopCommerce.

Many store owners prefer to display the page links on the top menu bar instead of categories and this quick tip tutorial is for all  those store admins who wish to keep the page links in the menu (instead of categories).

In your code, go to: Presentation/Nop.Web > Views > Catalog > TopMenu.cshtml

Open the page "TopMenu.cshtml"

In the code you will see this:

<ul class="top-menu">
    @Html.Widget("header_menu_before")
    @if (Model.Categories.Count > 0)
    {
        foreach (var category in Model.Categories)
        {
            @RenderCategoryLine(category, 0, false)
        }
    }
    else
    {
        //no categories to display? in this case let's diplay some default menu items (should we?)
        <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
        if (Model.RecentlyAddedProductsEnabled)
        {
            <li><a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
            </li>
        }
        <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
        <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
        if (Model.BlogEnabled)
        {
            <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
        }
        if (Model.ForumEnabled)
        {
            <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
        }
        <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
    }
    @Html.Widget("header_menu_after")
</ul>


If you pay attention so the code, at the beginning you will find the IF CONDITION that states that if categories is more than 1 then display  the categories. This is the reason your top menu only shows categories because the code is forcing the site to display categories only.

Now, if we update this:

@if (Model.Categories.Count > 0)

to this:

@if (Model.Categories.Count == 0)


This should make the top menu to display only  the page links and not categories. Why? Because we have change the condition by simply using "==" (NOT EQUAL SIGN). According to the new condition, if category is not equal to 0 (which can be anything more than 0 like 1 or 2 or any number), the code will perform  the task mention in the "ELSE" case i.e. display the menu links.

Here is the result (even when I have product categories in the database):


About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment