Topics

All topics

Development

Add custom fields to the Navigation widget

This article contains

Overview

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.

Add custom fields to MVC navigation widget

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:

The newly added custom helper method RenderCustomFieldShortInfo calls the created custom field named ShortInfo of type Short text.
In the example, the RenderCustomFieldShortInfo method is called both on the root and on the child level.

	@model Telerik.Sitefinity.Frontend.Navigation.Mvc.Models.INavigationModel

	@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
	@using Telerik.Sitefinity.Frontend.Navigation.Mvc.Models;
	@using Telerik.Sitefinity.Modules.Pages;

	@Add scripts and stylesheets@
	@Html.Script(ScriptRef.JQuery, "top", true)
	@Html.Script(Url.Content("~/ResourcePackages/Bootstrap4/assets/dist/js/popper.min.js"), "top", true)
	@Html.Script(Url.Content("~/ResourcePackages/Bootstrap4/assets/dist/js/bootstrap.min.js"), "top", true)

	<div class="@Model.CssClass">
	<nav class="navbar navbar-expand-md navbar-light bg-light">
	@* @Html.Action("GetView", new { viewName = "Dropdown", model= Model}) *@

	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#@Html.UniqueId("navbar")' aria-controls='@Html.UniqueId("navbar")' aria-expanded="false" aria-label="@Html.Resource("ToggleNavigation")">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id='@Html.UniqueId("navbar")'>
	<ul class="navbar-nav flex-wrap">
	@foreach (var node in Model.Nodes)
	{
	@RenderRootLevelNode(node);
	}
	</ul>
	</div>
	</nav>
	</div>

	@Here is specified the rendering for the root level@
	@helper RenderRootLevelNode(NodeViewModel node)
	{
	if (node.ChildNodes.Count > 0)
	{
	<li class="nav-item dropdown @GetClass(node)">
	@RenderCustomFieldShortInfo(node)
	<a class="nav-link dropdown-toggle" href="#" id='@Html.UniqueId("navbarDropdownMenuLink")' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@node.Title</a>
	<ul class="dropdown-menu" aria-labelledby='@Html.UniqueId("navbarDropdownMenuLink")'>
	@RenderSubLevelsRecursive(node)
	</ul>
	</li>
	}
	else
	{
	<li class="nav-item @GetClass(node)">
	@RenderCustomFieldShortInfo(node)
	<a class="nav-link" href="@node.Url" target="@node.LinkTarget">@node.Title</a>
	</li>
	}
	}

	@Here is specified the rendering for all child levels@
	@helper RenderSubLevelsRecursive(NodeViewModel node)
	{
	foreach (var childNode in node.ChildNodes)
	{
	if (childNode.ChildNodes.Count > 0)
	{
	<li class="dropdown-submenu">
	@RenderCustomFieldShortInfo(childNode)
	<a class="dropdown-item @GetClass(childNode)" href="@childNode.Url" target="@childNode.LinkTarget">
	@childNode.Title
	<span class="right-caret"></span>
	</a>
	<ul class="dropdown-menu">
	@RenderSubLevelsRecursive(childNode)
	</ul>
	</li>
	}
	else
	{
	<li>
	@RenderCustomFieldShortInfo(childNode)
	<a class="dropdown-item @GetClass(childNode)" href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title</a>
	</li>
	}
	}
	}

	@Resolves the class that will be added for each node depending whether it is selected@
	@helper GetClass(NodeViewModel node)
	{

	if (node.IsCurrentlyOpened)
	{
	@Html.HtmlSanitize("active");
	}
	else if (node.HasChildOpen)
	{
	@Html.HtmlSanitize("active");
	}
	}

	@Displaying the custom field (ShortInfo) of type short text in the navigation widget@
	@helper RenderCustomFieldShortInfo(NodeViewModel node)
	{
	if (node.CustomFields.ShortInfo != null)
	{
	<span>@node.CustomFields.ShortInfo</span>
	}
	}

view raw navigationviewcustomfields.cshtml hosted with ❤ by GitHub

Sample custom fields of different types

NOTE: When using any of the templates below, you must replace NameOfField with the name of the custom field.

Short text

	if (node.CustomFields.{{NameOfField}}!= null)
	{
	<div>@node.CustomFields.{{NameOfField}} </div>
	}

view raw shorttextcustomnavigationwidget.cshtml hosted with ❤ by GitHub

Long text (text area)

	if (node.CustomFields.{{NameOfField}}!= null)
	{
	<div>@Html.HtmlSanitize((string)node.CustomFields.{{NameOfField}})</div>
	}

view raw longtextcustomnavigationwidget.cshtml hosted with ❤ by GitHub

Long text (editor)

	if (node.CustomFields.{{NameOfField}}!= null)
	{
	<div class="sf-Long-text"> @Html.HtmlSanitize((string)node.CustomFields.{{NameOfField}})</div>
	}

view raw longtexteditorcustomnavwidget.cshtml hosted with ❤ by GitHub

Number

	if (node.CustomFields.{{NameOfField}}!= null)
	{
	<div>@node.CustomFields.{{NameOfField}} </div>
	}

view raw numbercustomnavigationwidget.cshtml hosted with ❤ by GitHub

Yes/No

	if (node.CustomFields.{{NameOfField}}!= null)
	{
	<div>@node.CustomFields.{{NameOfField}} </div>
	}

view raw yesnocustomnavwidget.cshtml hosted with ❤ by GitHub

Date time

	if (node.CustomFields.{{NameOfField}}!= null)
	{
	<div>@node.CustomFields.{{NameOfField}} </div>
	}

view raw datatimecustomnavwidget.cshtml hosted with ❤ by GitHub

Related image (single)

	if (node.CustomFields.{{NameOfField}}!= null)
	{
	<img src="@node.CustomFields.{{NameOfField}}.MediaUrl" title="@node.CustomFields.{{NameOfField}}.Title" />
	}

view raw singlerelatedimgcustomnavwidget.cshtml hosted with ❤ by GitHub

Related image (multiple)

	if (node.CustomFields.{{NameOfField}}!= null)
	{
	foreach (var image in node.CustomFields.{{NameOfField}})
	{
	<img src="@image.MediaUrl" title="@image.Title" />
	}
	}

view raw relatedimgcustomnavwidget.cshtml hosted with ❤ by GitHub

Want to learn more?

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Yes No

Would you like to submit additional feedback?

Your feedback about this content is important

How helpful is this article?

Very helpful Somewhat helpful Not helpful

How can we improve this article?(Optional)

Fix typos or links

Fix incorrect information

Add or update code samples

Add or update illustrations

Add information about...

Send feedback Cancel

Remove width and height attributes of images