You can customize your Navigation widget by creating custom fields for pages and displaying them and their values in the Navigation widget. For example, if you want to display multiple images in the Navigation widget, you can create a related media custom field for pages and add it to the Navigation widget template that you use – for example, NavigationView.Horizontal.cshtml.
The Navigation widget templates are located in the ~/MVC/Views/Navigation folder. Depending on what kind of template you are using, you can modify the corresponding view. For more information, see Resource packages.
This article shows how to add custom fields to the Navigation widget. For more information, see Use custom fields in widget templates.
Once you create a custom field for pages, it is accessible via the model of the Navigation widget - Model.Nodes.
Each node in Model.Nodes is a NodeViewModel type and corresponds to the particular page you have created. To add the custom field, you need to reference the field through the CustomFields property of the node. For example, if you crated a new custom short text field, named ShortTitle, you can add it with the following reference: @node.CustomFields.ShortTitle.
The following sample demonstrates how to add custom fields of type Related media and Short text to Navigation widget with Horizontal template. For the purpose you need to edit the NavigationView.Horizontal.cshtml located in ~/MVC/Views/Navigation folder. You can add the custom fields on either root or child level.
In the code below:
NOTE: When using any of the templates below, you must replace NameOfField with the name of the custom field.
Sign up for our free beginner training. Boost your credentials through advanced courses and certification. Register for Sitefinity training and certification.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important