Global header

Global header

The header appears on every page of the site. It includes:

  • banner identifying the site as an official U.S. government website
  • utility menu with glossary and downloads links
  • search field
  • logo
  • main navigation menu
<!-- <div class="header"></div> -->

<!-- </header>
<header class="header">
  <div>
    <a class="header-image_link" href="/">
      <img class="header-image" src="https://eiti-dev.18f.gov/img/NRRD-logo.svg" alt="NRRD logo">
    </a>
  </div>
  <nav class="header-nav">
    <ul class="header-nav_inner">
      <li class="header-nav_item">
        <a class="header-nav_item_link" href="/">Home</a>
      </li>
      <li class="header-nav_item">
        <a class="header-nav_item_link" href="/about">About</a>
      </li>
    </ul>
  </nav>
</header> -->

<section class="banner slab-beta">
    <span class="banner-left"><img class="banner-image" src="../../../public/img/us-flag-small.png" alt="US flag signifying that this is a United States Federal Government website">An official website of the U.S. Government</span>
</section>

<header class="header container-page-wrapper">
    <div class="header-left">
        <a class="header-image_link" href="/">
            <h1 class="sr-only">
                U.S. Department of the Interior Natural Resources Revenue Data
            </h1>
            <img class="header-image" src="../../../public/img/NRRD-logo.svg" alt="Logo">
        </a>
    </div>

    <nav class="header-nav header-right">
        <ul class="header-nav_top">
            <li class="header-nav_item_top">
                <a href="javascript:void(0)" class="header-nav_item_link_top js-glossary-toggle" alt="this is the glossary drawer">Glossary</a>
            </li>
            <span class="header-nav_item_link_spacer"> | </span>
            <li class="header-nav_item_top">
                <a class="header-nav_item_link_top " href="/downloads/">Download data</a>
            </li>

            <li class="header-nav_item_top">
                <form action="/search-results/">
                    <label class="sr-only" for="q">Search</label>
                    <input type="search" class="search-box header-nav_search" placeholder="Search" id="search-input" name="q" role="search">
                    <button type="submit" class="header-nav_search_icon icon-search" title="search"><label class="sr-only">Search</label></button>
                </form>
            </li>

        </ul>
        <ul class="header-nav_bottom">
            <li class="header-nav_item active">
                <a class="header-nav_item_link" href="/">Home</a>
            </li>
            <li class="header-nav_item ">
                <a class="header-nav_item_link" href="/about/">About</a>
            </li>
            <li class="header-nav_item ">
                <a class="header-nav_item_link" href="/how-it-works/">How it works</a>
            </li>
            <li class="header-nav_item ">
                <a class="header-nav_item_link" href="/explore/">Explore data</a>
            </li>
            <li class="header-nav_item ">
                <a class="header-nav_item_link" href="/case-studies/">Case studies</a>
            </li>

        </ul>
    </nav>
    <button data-toggler="nav-drawer" is="eiti-toggle" aria-controls="nav-drawer" aria-hidden="false" aria-expanded="false" class="header-right header-bars" data-inner-markup="bars" title="Global navigation toggle" aria-labelledby="menu-button"><icon class="icon-bars"></icon></button>
</header>
<!-- <div class="{{ className }}">{{ text }}</div> -->

<!-- </header>
<header class="header">
  <div>
    <a class="header-image_link" href="/">
      <img class="header-image" src="https://eiti-dev.18f.gov/img/NRRD-logo.svg" alt="NRRD logo">
    </a>
  </div>
  <nav class="header-nav">
    <ul class="header-nav_inner">
      <li class="header-nav_item">
        <a class="header-nav_item_link" href="{{ site.baseurl }}/">Home</a>
      </li>
      <li class="header-nav_item">
        <a class="header-nav_item_link" href="{{ site.baseurl }}/about">About</a>
      </li>
    </ul>
  </nav>
</header> -->


<section class="banner slab-beta">
  <span class="banner-left"><img class="banner-image" src="../../../public/img/us-flag-small.png" alt="US flag signifying that this is a United States Federal Government website">An official website of the U.S. Government</span>
</section>

<header class="header container-page-wrapper">
  <div class="header-left">
    <a class="header-image_link" href="/">
      <h1 class="sr-only">
        U.S. Department of the Interior Natural Resources Revenue Data
      </h1>
      <img class="header-image" src="../../../public/img/NRRD-logo.svg" alt="Logo">
    </a>
  </div>

  <nav class="header-nav header-right">
    <ul class="header-nav_top">
      <li class="header-nav_item_top">
        <a href="javascript:void(0)" class="header-nav_item_link_top js-glossary-toggle" alt="this is the glossary drawer">Glossary</a>
      </li>
      <span class="header-nav_item_link_spacer"> | </span>
      <li class="header-nav_item_top">
        <a class="header-nav_item_link_top " href="/downloads/">Download data</a>
      </li>

      <li class="header-nav_item_top">
        <form action="/search-results/">
          <label class="sr-only" for="q">Search</label>
          <input type="search" class="search-box header-nav_search" placeholder="Search" id="search-input" name="q" role="search">
          <button type="submit" class="header-nav_search_icon icon-search" title="search"><label class="sr-only">Search</label></button>
        </form>
      </li>

    </ul>
    <ul class="header-nav_bottom">
      <li class="header-nav_item active">
        <a class="header-nav_item_link" href="/">Home</a>
      </li>
      <li class="header-nav_item ">
        <a class="header-nav_item_link" href="/about/">About</a>
      </li>
      <li class="header-nav_item ">
        <a class="header-nav_item_link" href="/how-it-works/">How it works</a>
      </li>
      <li class="header-nav_item ">
        <a class="header-nav_item_link" href="/explore/">Explore data</a>
      </li>
      <li class="header-nav_item ">
        <a class="header-nav_item_link" href="/case-studies/">Case studies</a>
      </li>

    </ul>
  </nav>
  <button data-toggler="nav-drawer" is="eiti-toggle" aria-controls="nav-drawer" aria-hidden="false" aria-expanded="false" class="header-right header-bars" data-inner-markup="bars" title="Global navigation toggle" aria-labelledby="menu-button"><icon class="icon-bars"></icon></button>
</header>
/* No context defined for this component. */