Is there a way to render a breadcrumb using the navigation viewmodel?

Peter Leleulya

Posted on 06/05/2020 08:42:22

Is there a way to render a breadcrumb using the navigation viewmodel as described in https://doc.dynamicweb.com/template-tags/introduction/concept/viewmodels#sideNavTitle1-5 ?

I noticed an expandmode "PathOnly" is available in the NavigationSettings, but I can't seem to get output.
And I can't seem to find the parameter value options, ther used to be something like 'sitemapmode=true', but that isn't recognized as a valid parameter.

The sample doens't mention "Parameters" on the NavigationSettings, but it seems to be there ...
The sample does mention "RootAreaId" and "RootPageId" without explaining what they are for ...

I output this in the master template, what settings should I have?

var breadcrumbTemplate = "Navigation/Breadcrumb.cshtml";

var navigationSettingsBreadCrumb = new Dynamicweb.Frontend.Navigation.NavigationSettings()
    {
       //Parameters =
       // RootAreaId = 0,
       //RootPageId = pageView.Page.ID,
       // RootNavigationTag = StringConstants.NavigationTags.NAVIGATION_Homepage,
       //StartLevel = 0,
       //  StopLevel = 99,
       ExpandMode = Dynamicweb.Frontend.Navigation.ExpandMode.PathOnly
    };

@Navigation.RenderNavigation(breadcrumbTemplate, navigationSettingsBreadCrumb)

Replies

Nicolai Pedersen

Posted on 06/05/2020 09:48:28

Hi Peter

You can do like below - here using BS4. See my dump.

<nav aria-label="breadcrumb" class="swatch-100 d-none d-md-block breadcrumb2">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <small>
                            @{
                                var navigationSettingsBreadcrump = new Dynamicweb.Frontend.Navigation.NavigationSettings()
                                {
                                    StartLevel = 1,
                                    StopLevel = 10,
                                    ExpandMode = Dynamicweb.Frontend.Navigation.ExpandMode.PathOnly
                                };
                            }

                            @RenderNavigationNodes(GetNavigation(navigationSettingsBreadcrump).Nodes)

                            @helper RenderNavigationNodes(IEnumerable<NavigationTreeNodeViewModel> nodes)
                            {
                                foreach (NavigationTreeNodeViewModel node in nodes)
                                {
                                    <a href="@node.Link" class="text-reset">@node.Name</a> <span class="text-muted dividerBetween"></span>
                                    @RenderNavigationNodes(node.Nodes);
                                }
                            }
                        </small>
                    </div>
                </div>
            </div>
        </nav>

Morten Bengtson

Posted on 06/05/2020 10:10:53

Hi Peter,

I just tried your code and it works for me.

Make sure that your pages are published and not hidden.
Make sure that your navigation template (Navigation/Breadcrumb.cshtml) is in the right folder (probably under your design folder) and that it actually renders the navigation.
You can use the following navigation template for testing:

@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.Navigation.NavigationTreeViewModel>
<div>
    @RenderNodes(Model.Nodes)
</div>

@helper RenderNodes(IEnumerable<Dynamicweb.Frontend.Navigation.NavigationTreeNodeViewModel> nodes)
{
    <ul>
        @foreach (var node in nodes)
        {
            <li>
                <a href="@(node.Link)">@node.Name</a>
                @RenderNodes(node.Nodes)
            </li>
        }
    </ul>
}

Regarding the navigation settings...

Each property is documented. You will get a description when you type if you have a setup that provides IntelliSense - otherwise you can find documentation in API docs (NavigationSettings class).
Sitemapmode is not used anymore.
You can use RootAreaId or RootPageId to change the context of the navigation (show navigation for another area or page). By default it will use the current area (website) and current page.
The Parameters property can be used to pass information from you main template to your navigation template and then use that information when rendering the navigation, e.g. in the main template you set navigationSettingsBreadCrumb.Parameters["NavigationTitle"] = "My breadcrumb path" and in your navigation template you read the value like <h1>@Model.Parameters["NavigationTitle"]</h1>. This makes it possible to use the same navigation template for slightly different navigations.

Best regards,
Morten

You must be logged in to post in the forum

Developer forum

Is there a way to render a breadcrumb using the navigation viewmodel?

Replies