Help Center

Menu

Display contextual navigation in a Freemarker results template

If you are accessing the raw JSON or XML to produce your search result template see the contextual navigation data model information.

The following Freemarker code from the default template (simple.ftl) is used to display your contextual navigation.

The default template code formats the contextual navigation suggestions as three lists of suggestions that are grouped under the type, topic and site headings. The contextual navigation is presented below the search results with the heading, related searches for (YOUR SEARCH QUERY).

It is often desirable to merge the type and topic lists together into a single list of related search suggestions. 
<@s.ContextualNavigation>
  <@s.ClusterNavLayout /> (1)
  <@s.NoClustersFound /> (2)
  <@s.ClusterLayout>
    <div class="well" id="search-contextual-navigation">
      <h3>Related searches for <strong><@s.QueryClean /></strong></h3>
      <div class="row">
        <@s.Category name="type"> (3)
          <div class="col-md-4 search-contextual-navigation-type">
            <h4>Types of <strong>${s.contextualNavigation.searchTerm}</strong></h4>
            <ul class="list-unstyled">
              <@s.Clusters><li><a href="${s.cluster.href}"><#noautoesc>${s.cluster.label?html?replace("...", " <strong>"+s.contextualNavigation.searchTerm?html+"</strong> ")}</#noautoesc></a></li></@s.Clusters>
              <@s.ShowMoreClusters category="type"><li><a rel="more" href="${changeParam(s.category.moreLink, "type_max_clusters", "40")}" class="btn btn-link btn-sm"><small class="glyphicon glyphicon-plus"></small> More&hellip;</a></li></@s.ShowMoreClusters>
              <@s.ShowFewerClusters category="type" />
            </ul>
          </div>
        </@s.Category>

        <@s.Category name="topic">
            <div class="col-md-4 search-contextual-navigation-topic">
              <h4>Topics on <strong>${s.contextualNavigation.searchTerm}</strong></h4>
              <ul class="list-unstyled">
                <@s.Clusters><li><a href="${s.cluster.href}"><#noautoesc>${s.cluster.label?html?replace("...", " <strong>"+s.contextualNavigation.searchTerm?html+"</strong> ")}</#noautoesc></a></li></@s.Clusters>
                <@s.ShowMoreClusters category="topic"><li><a rel="more" href="${changeParam(s.category.moreLink, "topic_max_clusters", "40")}" class="btn btn-link btn-sm"><small class="glyphicon glyphicon-plus"></small> More&hellip;</a></li></@s.ShowMoreClusters>
                <@s.ShowFewerClusters category="topic" />
              </ul>
            </div>
        </@s.Category>

        <@s.Category name="site">
            <div class="col-md-4 search-contextual-navigation-site">
              <h4><strong>${s.contextualNavigation.searchTerm}</strong> by site</h4>
              <ul class="list-unstyled">
                <@s.Clusters><li><a href="${s.cluster.href}"> ${s.cluster.label}</a></li></@s.Clusters>
                <@s.ShowMoreClusters category="site"><li><a rel="more" href="${changeParam(s.category.moreLink, "site_max_clusters", "40")}" class="btn btn-link btn-sm"><small class="glyphicon glyphicon-plus"></small> More&hellip;</a></li></@s.ShowMoreClusters>
                <@s.ShowFewerClusters category="site" />
              </ul>
            </div>
        </@s.Category>
      </div>
    </div>
  </@s.ClusterLayout>
</@s.ContextualNavigation>
1 Nested code can be added in here to display contextual navigation breadcrumbs.
2 Nested code can be added in here to display something if no contextual navigation suggestions are returned.
3 Renders the list of type suggestions.

See also