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 and includes a banner, skip navigation, logo, primary navigation with dropdowns/mega-menus, and search functionality.

Example:

How to author:

The header element is global and will be shared across all pages on your site. Its setup is therefore different from standard blocks.

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 with a specific structure using sections.

Section 1:

1. Logo Image: Drop in an image with a link to the homepage. Be sure to add alt text. The image will be automatically wrapped in a link to the homepage.
2. Optional Tagline(s): Add 1-2 paragraph elements after the logo for tagline text that will appear next to the logo (e.g., "Department of Example Services"). If your tagline is embedded in the logo image itself, you can skip this step.

Section 2 (optional):

A bulleted list of links that will build the primary navigation menu:

• First-level bullets serve as primary navigation items

• Sub-bullets create dropdown menus. Only 1 level of nesting is supported.

  • Parent items with dropdowns should NOT be linked (the parent text becomes a button to open the dropdown)

• External links in the primary navigation automatically receive a launch icon indicator

• Mega-menu Auto-generation:
  Dropdowns automatically adapt based on the number of links:

  • 2-8 links: Single-column dropdown
  • 9-12 links: Two-column dropdown
  • 13+ links: Four-column mega-menu

• Small Header Variant: If Section 2 is empty (no navigation list), the header will render in a compact "small" variant without dropdowns.

Section 3:

A single link pointing to your search results page (e.g., "/search-results"). This link is used to configure the search form's action URL.

Global Components

The following components are automatically added and configured:

• Banner ("tophat"): The "An official website of the State of Nebraska" text is dynamically populated from the "banner" key in the "placeholders" sheet at the root of your project.
• Skip Navigation: The skip navigation link (for accessibility) is populated from the "skipnav" key in the placeholders sheet. Defaults to "Skip to main content" if not specified.