Section Nav Sidebar

Section Nav Sidebar

⚠️ WARNING
This page contains documentation for a feature in preparation for history.state.gov

The Section nav sidebar in HSG is a generated lists of links providing 'horizontal navigation' to the main pages within a section of the site. This page describes how the HSG site generates this sidebar, and how to the content of the link labels are configured.

Adding a section nav to a page

The section nav sidebar can be added to a page template using the templating function pages:section-nav:

<div data-template="pages:section-nav"/>

How Section Nav sidebars are generated

Section Nav sidebars are driven by the URL of a given page: the section ID is extracted from the first 'step' within the URL. So the section id for the URL:

/departmenthistory/travels/president/taft-william-howard

Will be the id departmenthistory.

This ID determines the title of the section-nav sidebar, and the links within are taken from the other URLs on the site, taken from the sitemap config file urls.xml.

Section nav link labels

Section nav link labels are populated using the breadcrumb title labels, as described in Breadcrumbs.

Skipping heading levels

If the section nav needs to skip a level, this can be configured in the sitemap config by adding an appopriate config option.

For instance, the landing page /departmenthistory/travels can be skipped so that it is replaced by the links to its children /departmenthistory/travels/president and /departementhistory/travels/secretary by adding the following to urls.xml:

<step value="departmenthistory">
    ...
    <step value="travels">
        <step value="president">...</step>
        <step value="secretary">...</step>
        ...
        <config>
            <skip role="section-nav"/>
            ...
        </config>
    </step>
    ...
</step>

Excluding items from the section-nav list

If there is a page in the section nav list that is to be excluded, this can be done by adding an appropriate config option to urls.xml; for instance, to exclude the URL /departmenthistory/short-history:

<step value="departmenthistory">
    ...
    <step value="short-history">
        ...
        <config>
            <exclude role="section-nav"/>
        </config>
    </step>
    ...
</step>