Developer forum

Hi Caro

On a page, choose properties - there are a number of options. It is unclear if you are using Swift or not?

• If you use Swift, Swift pages (using Swift_Page item type) already have an item type used for the page that contains the field "Icon" that has been defined in the item types section of settings.You can add your own icons 
• Also on page properties, there is an image field that can also be used - that is a standard field so not related to an item type for that page. See screen dump below.

When rendering the navigation, you can call the GetNavigation to get a Navigation viewmodel for all pages on level 1+2 like this:

var dropdownNavigation = GetNavigation(new() { StopLevel = 2, ExpandMode = Dynamicweb.Frontend.Navigation.ExpandMode.All });

See the docs for navigation here: https://doc.dynamicweb.dev/documentation/implementing/ssr/designs-layouts.html#example-of-a-top-navigation - checkout the "Top-dropdown navigation " section.

When looping the navigation nodes you have a NavigationTreeNodeViewModel - it will have a PageId property. Use Dynamicweb.Content.Pages.GetPage to get hold of the page instance where you can find the image used:

var page = Dynamicweb.Content.Services.Pages.GetPage(node.PageId);
var image = Page.TopImage

Hi Nicolai,

Thanks for your reply. I am using Swift, but unfortunately it's not exactly what I need.

I want to add the icons to the navigation under the products, so to the groups of the products under Ecommerce (and not under Content). The first screenshot I sent is how I want to show it and here is another screenshot of what it currently looks like in the backend, so I want to add an icon to 'Personal protection' and I also want to show the folders/groups (Personal Hygiene, Spray overalls, ...) next to it when you hover on 'Personal protection'.

Caro

Hi Caro

Thank you for clarifying.

It is almost the same though. On a group when you edit it, you have a field called Icon and fields for images. These fields can be used for setting the icon.

To get the navigation items would be the same as my code example above - but maybe you need stoplevel 3 instead of 2.

Instead of getting the Page from the NavigationTreeNodeViewModel you need to get the ecommerce group . an extension method exist for that:

@foreach (var node in nodes)
 {
 var group = node.GetProductGroup();
 if (group != null)
 {
 var groupIcon = group.Assets.Where(asset => asset.Name = "Icon");
 }
 }