Skip Navigation

Left Nav

The Left Nav component is an auto-populating component that is found in the left-most column on pages that have multiple columns. It displays a list of pages -- either the pages under the same parent page as the current page, or, if the current page has children, the child pages. The Left Nav is included on all landing and detail pages so that a user can drill down into additional sub-areas of the section they are viewing.

On This Page:

Related Information

Example

When to Use

Usage

Configure Dialog

Developer Resources

Example

View on public site:

Publication: Aging Veterans: America's Veterans in Later Life

When to Use

The Left Nav component lists a tree of pages so that users of a site can easily navigate to related pages. Authors should use the Left Nav component to display the “sub-navigation” within a section of the website.

Usage

The Left Nav component can be authored in the left rail on the Census Detail 3 Column, Census Detail 2 Column Left or Census Landing templates.

In order to display the child pages in the component, Super Authors must configure the Left Nav settings under Page Properties for each child page. There, Super Authors can define the order the child pages will appear in the Left Nav and the label that is displayed for each page. The default order is alphabetical and label is the page's title.

Configure Dialog

The Left Nav component generates its own content based on page properties and does not have a configurable dialog.

Developer Resources

Expand the section below to see the Left Nav component's HTML output.

<div class="leftnav uscb-grid-3 uscb-grid-tbl-12 uscb-grid-mbl-4 uscb-grid-offset-L-0 aem-GridColumn--tablet--12 aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--default--2">

<a id="uscb-nav-skip-local" class="uscb-nav-skip uscb-button-medium uscb-secondary-button uscb-position-absolute" href="#content">Skip Navigation</a>

<div class="uscb-navigation-header uscb-margin-B-5 visible-lg uscb-print-hide">

<a href="https://www.census.gov/topics.html" onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );" class="uscb-color-primary uscb-medium uscb-underline-hover">

Within Topics

</a>

</div>

<nav class="uscb-navigation-local">

<ul class="uscb-filter-list uscb-hide-lg uscb-print-hide">

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/about.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>About this Topic</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/stories.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>America Counts: Stories</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/data.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>Data</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/news.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>News</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/publications.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>Publications</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/related.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>Related Sites</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/surveys.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>Surveys and Programs</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/videos.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>Videos</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/visualizations.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>Visualizations</span>

</a>

</li>

<li class="uscb-filter-parent uscb-bold-hover">

<a href="https://www.census.gov/topics/education/working-papers.html" class="uscb-color-primary uscb-font-1x " onclick="linkClick( this, 'Left Nav Component' ); leftNavLinkClick( this );">

<span>Working Papers</span>

</a>

</li>

</ul>

<div class="uscb-hide-gt-lg uscb-margin-B-8 uscb-print-hide">

<div class="ui-widget uscb-input-wrapper" id="data-uscb-input-wrapper-mobile-nav">

<div class="uscb-dropdown-container uscb-layout-row">

<div class="tags uscb-flex-row-gt-sm-90 uscb-flex-row-sm-8 uscb-padding-L-15 uscb-navigation-placeholder-text" tabindex="0" style="height: 34px;">Within Topics</div>

<div class="uscb-form-dropdown-button-chevron uscb-icon-button">

<i class="o-angle-down-1 uscb-font-2x uscb-color-accent" alt=""></i>

</div>

</div>

<ul class="uscb-filter-list uscb-w-100" style="float: left; display: none;">

<div class="uscb-margin-B-5 uscb-hide uscb-print-hide uscb-filter-parent uscb-padding-0 uscb-border-0">

<a href="https://www.census.gov/topics.html" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-medium uscb-underline-hover">

<span class="uscb-navigation-local-dropdown-title">Within Topics</span>

<span class="uscb-navigation-local-dropdown-parenthetical"></span>

</a>

</div>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/about.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>About this Topic</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/stories.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>America Counts: Stories</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/data.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>Data</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/news.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>News</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/publications.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>Publications</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/related.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>Related Sites</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/surveys.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>Surveys and Programs</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/videos.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>Videos</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/visualizations.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>Visualizations</span>

</a></span>

</li>

<li class="uscb-filter-parent uscb-border-0 uscb-padding-0 uscb-padding-L-15">

<span><a href="https://www.census.gov/topics/education/working-papers.html" tabindex="0" onclick="linkClick(this, 'Left Nav Component'); leftNavLinkClick(this);" class="uscb-color-primary uscb-padding-L-10 " style="font-size: 1rem;">

<span>Working Papers</span>

</a></span>

</li>

</ul>

</div>

</div>

</nav>

</div>

Top of Section

✕

Is this page helpful?
Thumbs Up Image

Thumbs Up Image

Yes

Thumbs Down Image

No

✕

NO THANKS

255 characters maximum

255 characters maximum reached

✕

Thank you for your feedback.
Comments or suggestions?

Top