Header Nav

A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.

This component is based on USWDS.

Example:

How to author:

The header element is global, and will be shared across all pages on your site. It's setup is therefore a bit different.

Configuration

  1. Create a document called "nav" at the root of your project.  Recommend copying from another site if possible.

  2. In the "nav" document, add the following metadata:

    1. Robots: noindex, nofollow
    2. hide-breadcrumb: yes

  3. In the "metadata" sheet also at the root of your project, add a column, "nav" for the appropriate "URL" row (e.g. URL: "**" and nav: "/nav")

Content Population

This content is not populated leveraging a block, but instead a page of a specific structure, leveraging sections.

  1. Section 1:

    1. The logo. Drop in an image, being sure to add alt text. This will be automatically linked to the homepage.
    2. Linked text that serves as alt text for the image. The link should go to the homepage.

  2. Section 2 (optional): A bulleted list of links that will be leveraged to build the navigation.

    1. The first layer will serve as the primary navigation items
    2. Sub-bullets will be displayed within a dropdown. Only 1 "layer" is supported.
    3. If a dropdown is leveraged, the bullet it is nested within should not  be linked.

  3. Section 3: A link to the search page

The banner or "tophat" text (e.g. "An official website...") is dynamically populated and leverages the data in the "placeholders" sheet at the root of your project. The "skipnav" (leveraged for accessibility for users leveraging keyboard navigation or a screen reader) is likewise populated from the same source.