Skip Navigation
Within Components

Contextual Navigation

The Census Contextual Navigation component is a horizontal list that can display up to four AEM, or Non-AEM, pages of recommended or related content.

On This Page:

Related Information

Example

View on public site:

When to Use

Although this can be used on any page, it is best used on pages with topics or subject matter that is touched on by a number of other pages or pages with other relevant connections across the site. For example, this component incorporates very well on topic landing pages. 

Usage

The Contextual Navigation component can be used on any page as a way to link to related pages.

Configure Dialog

When the Contextual Navigation component is added to a page, the author will have two configurable dialog boxes.

author

The main dialog box allows the author to define which tag type to display from the list of pages in the list and is found by opening the Contextual Navigation component's dialog. 'Content Type' tag is the default.

author

The next configure dialog can be found by editing one of the Contextual Nav Items. Authors will choose either an AEM page or a Non-AEM page to display in the Contextual Navigation component.

If the author selects 'AEM Page', they can either browse the DAM or directly input the URL for the page they wish to display in the list. 

author

If the author selects 'Non-AEM Page', they will need to manually input the external page's title, hyperlink, and description.

author

Developer Resources

Expand the section below to see the Contextual Navigation component's HTML output.

<div class="censuscontextualnavigation aem-GridColumn--tablet--12 aem-GridColumn aem-GridColumn--default--12">

<div class="uscb-margin-B-30 belowHeader">

<h3 class="uscb-h3 uscb-contextnav-heading">You May Be Interested In</h3>

<div>

  <div class="uscb-contextnav-display-horizontal uscb-contextnav-layout-row uscb-grid-wrap-container"> 

                

<div class="data-uscb-related-pages uscb-nav-button-container-no-hover uscb-grid-3 uscb-grid-tbl-6 uscb-grid-mbl-4 uscb-position-relative">

  

<span class="uscb-tag-label uscb-tag-label" style="background-color: white; border: 1px solid rgb(172, 172, 172); visibility: hidden; display: inline-block;">no-tag</span>

 

<a tabindex="0" href="/topics/employment.html" onclick="linkClick(this, 'Related Page Item');" class="uscb-text-decoration-none data-uscb-related-item-anchor">

<p class="uscb-title-3 uscb-color-primary uscb-line-height-26" style="height: 26px;">

Employment

</p>

<p class="uscb-sub-heading-2 uscb-color-secondary-1 uscb-line-height-20-18" style="height: 144px;">

We measure the state of the nation's workforce, including employment and unemployment levels, weeks and hours worked, occupations, and commuting.

</p>

        

<div class="o-angle-right-circle-1"></div>

         </a>

    

   

 

 

    

 

          </div>

        

        

                

<div class="data-uscb-related-pages uscb-nav-button-container-no-hover uscb-grid-3 uscb-grid-tbl-6 uscb-grid-mbl-4 uscb-position-relative">

  

<span class="uscb-tag-label uscb-tag-label" style="background-color: white; border: 1px solid rgb(172, 172, 172); visibility: hidden; display: inline-block;">no-tag</span>

 

<a tabindex="0" href="/topics/income-poverty.html" onclick="linkClick(this, 'Related Page Item');" class="uscb-text-decoration-none data-uscb-related-item-anchor">

<p class="uscb-title-3 uscb-color-primary uscb-line-height-26" style="height: 26px;">

Income and Poverty

</p>

<p class="uscb-sub-heading-2 uscb-color-secondary-1 uscb-line-height-20-18" style="height: 144px;">

Income is the gauge many use to determine the well-being of the U.S. population. Survey and census questions cover poverty, income, and wealth.

</p>

        

<div class="o-angle-right-circle-1"></div>

         </a>

    

   

 

 

    

 

          </div>                   

        

        

                

<div class="data-uscb-related-pages uscb-nav-button-container-no-hover uscb-grid-3 uscb-grid-tbl-6 uscb-grid-mbl-4 uscb-position-relative">

  

<span class="uscb-tag-label uscb-tag-label" style="background-color: #ffccbc; border: 1px solid #ffccbc;">Data Tool</span>

 

<a tabindex="0" href="/data/data-tools/opportunity-atlas.html" onclick="linkClick(this, 'Related Page Item');" class="uscb-text-decoration-none data-uscb-related-item-anchor">

<p class="uscb-title-3 uscb-color-primary uscb-line-height-26" style="height: 26px;">

Opportunity Atlas

</p>

<p class="uscb-sub-heading-2 uscb-color-secondary-1 uscb-line-height-20-18" style="height: 144px;">

Which neighborhoods in America offer children the best chance to rise out of poverty?

</p>

        

<div class="o-angle-right-circle-1"></div>

         </a>

    

   

 

 

    

 

          </div>                     

        

        

</div>

 

  

 

</div>

</div>

 

</div>

Top of Section