Skip to main content
Rivet Design System Indiana University

Header

Add an IU-branded header and navigation to your website or application

Overview #

A header is a section at the top of each page that contains the title of your website or application and the IU trident logo. Headers can also contain navigation links and a search button.

Examples #

The examples on this page are best viewed in a new window.


Open in new window
Copy link to example 
<header class="rvt-header-wrapper">
  <!-- Hidden link for keyboard users to skip to main content -->
  <a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
  <div class="rvt-header-global">
    <div class="rvt-container-xl">
      <div class="rvt-header-global__inner">
        <div class="rvt-header-global__logo-slot">
          <a class="rvt-lockup" href="/">  
            <!-- Trident logo -->
            <div class="rvt-lockup__tab">
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
                <path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
              </svg>
            </div>
            <!-- Website or application title -->
            <div class="rvt-lockup__body">
              <span class="rvt-lockup__title">Rivet Design System</span>
              <span class="rvt-lockup__subtitle">Indiana University</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
Open in new window
Copy link to example 
<header class="rvt-header-wrapper">
  <!-- Hidden link for keyboard users to skip to main content -->
  <a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
  <div class="rvt-header-global">
    <div class="rvt-container-xl">
      <div class="rvt-header-global__inner">
        <div class="rvt-header-global__logo-slot">
          <a class="rvt-lockup" href="/">
            <!-- Trident logo -->
            <div class="rvt-lockup__tab">
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
                <path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
              </svg>
            </div>
            <!-- Website or application title -->
            <div class="rvt-lockup__body">
              <span class="rvt-lockup__title">Rivet Design System</span>
              <span class="rvt-lockup__subtitle">Indiana University</span>
            </div>
          </a>
        </div>
        <!-- Header controls -->
        <div class="rvt-header-global__controls">
          <!-- Navigation -->
          <div data-rvt-disclosure="menu" data-rvt-close-click-outside>
            <!-- Menu button that shows/hides navigation on smaller screens -->
            <button aria-expanded="false" class="rvt-global-toggle rvt-global-toggle--menu rvt-hide-lg-up" data-rvt-disclosure-toggle="menu">
              <span class="rvt-sr-only">Menu</span>
              <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M15 4H1V2h14v2Zm0 5H1V7h14v2ZM1 14h14v-2H1v2Z"></path></svg>
              <svg class="rvt-global-toggle__close" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
            </button>
            <!-- Navigation links -->
            <nav aria-label="Main" class="rvt-header-menu" data-rvt-disclosure-target="menu" hidden>
              <ul class="rvt-header-menu__list">
                <!-- Navigation link without dropdown -->
                <li class="rvt-header-menu__item">
                  <a class="rvt-header-menu__link" href="#">Nav Item One</a>
                </li>
                <!-- Navigation link marked as the current page -->
                <li class="rvt-header-menu__item rvt-header-menu__item--current">
                  <a class="rvt-header-menu__link" href="#" aria-current="page">Nav Item Two</a>
                </li>
                <!-- Navigation link with dropdown -->
                <li class="rvt-header-menu__item">
                  <div class="rvt-header-menu__dropdown rvt-dropdown" data-rvt-dropdown="primary-nav-1">
                    <div class="rvt-header-menu__group">
                      <!-- Link that appears in header -->
                      <a class="rvt-header-menu__link" href="#">Nav Item Three</a>
                      <!-- Button that shows/hides dropdown links -->
                      <button aria-expanded="false" class="rvt-dropdown__toggle rvt-header-menu__toggle" data-rvt-dropdown-toggle="primary-nav-1">
                        <span class="rvt-sr-only">Toggle Sub-navigation</span>
                        <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"></path></svg>
                      </button>
                    </div>
                    <!-- Dropdown menu -->
                    <div class="rvt-header-menu__submenu rvt-dropdown__menu rvt-dropdown__menu--right" data-rvt-dropdown-menu="primary-nav-1" hidden>
                      <ul class="rvt-header-menu__submenu-list">
                        <!-- Dropdown links -->
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item One</a>
                        </li>
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item Two</a>
                        </li>
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item Three</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
Open in new window
Copy link to example 
<header class="rvt-header-wrapper">
  <!-- Hidden link for keyboard users to skip to main content -->
  <a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
  <div class="rvt-header-global">
    <div class="rvt-container-xl">
      <div class="rvt-header-global__inner">
        <div class="rvt-header-global__logo-slot">
          <a class="rvt-lockup" href="/">
            <!-- Trident logo -->
            <div class="rvt-lockup__tab">
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
                <path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
              </svg>
            </div>
            <!-- Website or application title -->
            <div class="rvt-lockup__body">
              <span class="rvt-lockup__title">Rivet Design System</span>
              <span class="rvt-lockup__subtitle">Indiana University</span>
            </div>
          </a>
        </div>
        <!-- Header controls -->
        <div class="rvt-header-global__controls">
          <!-- Navigation -->
          <div data-rvt-disclosure="menu" data-rvt-close-click-outside>
            <!-- Menu button that shows/hides navigation on smaller screens -->
            <button aria-expanded="false" class="rvt-global-toggle rvt-global-toggle--menu rvt-hide-lg-up" data-rvt-disclosure-toggle="menu">
              <span class="rvt-sr-only">Menu</span>
              <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M15 4H1V2h14v2Zm0 5H1V7h14v2ZM1 14h14v-2H1v2Z"></path></svg>
              <svg class="rvt-global-toggle__close" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
            </button>
            <!-- Navigation links -->
            <nav aria-label="Main" class="rvt-header-menu" data-rvt-disclosure-target="menu" hidden>
              <ul class="rvt-header-menu__list">
                <!-- Navigation link without dropdown -->
                <li class="rvt-header-menu__item">
                  <a class="rvt-header-menu__link" href="#">Nav Item One</a>
                </li>
                <!-- Navigation link marked as the current page -->
                <li class="rvt-header-menu__item rvt-header-menu__item--current">
                  <a class="rvt-header-menu__link" href="#" aria-current="page">Nav Item Two</a>
                </li>
                <!-- Navigation link with dropdown -->
                <li class="rvt-header-menu__item">
                  <div class="rvt-header-menu__dropdown rvt-dropdown" data-rvt-dropdown="primary-nav-1">
                    <div class="rvt-header-menu__group">
                      <!-- Link that appears in header -->
                      <a class="rvt-header-menu__link" href="#">Nav Item Three</a>
                      <!-- Button that shows/hides dropdown links -->
                      <button aria-expanded="false" class="rvt-dropdown__toggle rvt-header-menu__toggle" data-rvt-dropdown-toggle="primary-nav-1">
                        <span class="rvt-sr-only">Toggle Sub-navigation</span>
                        <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"></path></svg>
                      </button>
                    </div>
                    <!-- Dropdown menu -->
                    <div class="rvt-header-menu__submenu rvt-dropdown__menu rvt-dropdown__menu--right" data-rvt-dropdown-menu="primary-nav-1" hidden>
                      <ul class="rvt-header-menu__submenu-list">
                        <!-- Dropdown links -->
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item One</a>
                        </li>
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item Two</a>
                        </li>
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item Three</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
              <!-- Avatar/username and "log out" link -->
              <div class="rvt-flex rvt-items-center rvt-m-left-md rvt-p-bottom-md rvt-p-bottom-none-lg-up">
                <div class="rvt-avatar rvt-avatar--xs">
                  <span class="rvt-avatar__text">UN</span>
                </div>
                <div class="rvt-ts-14 rvt-m-left-xs rvt-p-right-xs rvt-m-right-xs rvt-border-right">username</div>
                <a href="#0" class="rvt-ts-14">Log out</a>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
Open in new window
Copy link to example 
<header class="rvt-header-wrapper">
  <!-- Hidden link for keyboard users to skip to main content -->
  <a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
  <div class="rvt-header-global">
    <div class="rvt-container-xl">
      <div class="rvt-header-global__inner">
        <div class="rvt-header-global__logo-slot">
          <a class="rvt-lockup" href="/">
            <!-- Trident logo -->
            <div class="rvt-lockup__tab">
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
                <path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
              </svg>
            </div>
            <!-- Website or application title -->
            <div class="rvt-lockup__body">
              <span class="rvt-lockup__title">Rivet Design System</span>
              <span class="rvt-lockup__subtitle">Indiana University</span>
            </div>
          </a>
        </div>
        <!-- Header controls -->
        <div class="rvt-header-global__controls">
          <!-- Search -->
          <div data-rvt-disclosure="search" data-rvt-close-click-outside>
            <!-- Button that shows/hides the search field -->
            <button class="rvt-global-toggle" data-rvt-disclosure-toggle="search" aria-expanded="false">
              <span class="rvt-sr-only">Search</span>
              <svg class="rvt-global-toggle__search" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M7 2a5 5 0 1 0 0 10A5 5 0 0 0 7 2ZM0 7a7 7 0 1 1 12.606 4.192l3.101 3.1-1.414 1.415-3.1-3.1A7 7 0 0 1 0 7Z"></path></svg>
            </button>
            <!-- Search field -->
            <form action="/search" class="rvt-header-global__search" data-rvt-disclosure-target="search" role="search" method="get" hidden>
              <label class="rvt-sr-only" for="search">Search</label>
              <div class="rvt-input-group">
                <input id="search" class="rvt-input-group__input rvt-text-input" type="text" name="q">
                <div class="rvt-input-group__append">
                  <button class="rvt-button">Search</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
Open in new window
Copy link to example 
<header class="rvt-header-wrapper">
  <!-- Hidden link for keyboard users to skip to main content -->
  <a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
  <div class="rvt-header-global">
    <div class="rvt-container-xl">
      <div class="rvt-header-global__inner">
        <div class="rvt-header-global__logo-slot">
          <a class="rvt-lockup" href="/">
            <!-- Trident logo -->
            <div class="rvt-lockup__tab">
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
                <path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
              </svg>
            </div>
            <!-- Website or application title -->
            <div class="rvt-lockup__body">
              <span class="rvt-lockup__title">Rivet Design System</span>
              <span class="rvt-lockup__subtitle">Indiana University</span>
            </div>
          </a>
        </div>
        <!-- Header controls -->
        <div class="rvt-header-global__controls">
          <!-- Navigation -->
          <div data-rvt-disclosure="menu" data-rvt-close-click-outside>
            <!-- Menu button that shows/hides navigation on smaller screens -->
            <button aria-expanded="false" class="rvt-global-toggle rvt-global-toggle--menu rvt-hide-lg-up" data-rvt-disclosure-toggle="menu">
              <span class="rvt-sr-only">Menu</span>
              <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M15 4H1V2h14v2Zm0 5H1V7h14v2ZM1 14h14v-2H1v2Z"></path></svg>
              <svg class="rvt-global-toggle__close" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
            </button>
            <!-- Navigation links -->
            <nav aria-label="Main" class="rvt-header-menu" data-rvt-disclosure-target="menu" hidden>
              <ul class="rvt-header-menu__list">
                <!-- Navigation link without dropdown -->
                <li class="rvt-header-menu__item">
                  <a class="rvt-header-menu__link" href="#">Nav Item One</a>
                </li>
                <!-- Navigation link marked as the current page -->
                <li class="rvt-header-menu__item rvt-header-menu__item--current">
                  <a class="rvt-header-menu__link" href="#" aria-current="page">Nav Item Two</a>
                </li>
                <!-- Navigation link with dropdown -->
                <li class="rvt-header-menu__item">
                  <div class="rvt-header-menu__dropdown rvt-dropdown" data-rvt-dropdown="primary-nav-1">
                    <div class="rvt-header-menu__group">
                      <!-- Link that appears in header -->
                      <a class="rvt-header-menu__link" href="#">Nav Item Three</a>
                      <!-- Button that shows/hides dropdown links -->
                      <button aria-expanded="false" class="rvt-dropdown__toggle rvt-header-menu__toggle" data-rvt-dropdown-toggle="primary-nav-1">
                        <span class="rvt-sr-only">Toggle Sub-navigation</span>
                        <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"></path></svg>
                      </button>
                    </div>
                    <!-- Dropdown menu -->
                    <div class="rvt-header-menu__submenu rvt-dropdown__menu rvt-dropdown__menu--right" data-rvt-dropdown-menu="primary-nav-1" hidden>
                      <ul class="rvt-header-menu__submenu-list">
                        <!-- Dropdown links -->
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item One</a>
                        </li>
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item Two</a>
                        </li>
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item Three</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </nav>
          </div>
          <!-- Search -->
          <div data-rvt-disclosure="search" data-rvt-close-click-outside>
            <!-- Button that shows/hides the search field -->
            <button class="rvt-global-toggle" data-rvt-disclosure-toggle="search" aria-expanded="false">
              <span class="rvt-sr-only">Search</span>
              <svg class="rvt-global-toggle__search" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M7 2a5 5 0 1 0 0 10A5 5 0 0 0 7 2ZM0 7a7 7 0 1 1 12.606 4.192l3.101 3.1-1.414 1.415-3.1-3.1A7 7 0 0 1 0 7Z"></path></svg>
            </button>
            <!-- Search field -->
            <form action="/search" class="rvt-header-global__search" data-rvt-disclosure-target="search" role="search" method="get" hidden>
              <label class="rvt-sr-only" for="search">Search</label>
              <div class="rvt-input-group">
                <input id="search" class="rvt-input-group__input rvt-text-input" type="text" name="q">
                <div class="rvt-input-group__append">
                  <button class="rvt-button">Search</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
Open in new window
Copy link to example 
<header class="rvt-header-wrapper">
  <!-- Hidden link for keyboard users to skip to main content -->
  <a class="rvt-header-wrapper__skip-link" href="#main-content">Skip to main content</a>
  <!-- Primary header area -->
  <div class="rvt-header-global">
    <div class="rvt-container-xl">
      <div class="rvt-header-global__inner">
        <div class="rvt-header-global__logo-slot">
          <a class="rvt-lockup" href="/">
            <!-- Trident logo -->
            <div class="rvt-lockup__tab">
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-lockup__trident" viewBox="0 0 28 34">
                <path d="M-3.34344e-05 4.70897H8.83308V7.174H7.1897V21.1426H10.6134V2.72321H8.83308V0.121224H18.214V2.65476H16.2283V21.1426H19.7889V7.174H18.214V4.64047H27.0471V7.174H25.0614V23.6761L21.7746 26.8944H16.2967V30.455H18.214V33.8787H8.76463V30.592H10.6819V26.8259H5.20403L1.91726 23.6077V7.174H-3.34344e-05V4.70897Z" fill="currentColor"></path>
              </svg>
            </div>
            <!-- Website or application title -->
            <div class="rvt-lockup__body">
              <span class="rvt-lockup__title">Rivet Design System</span>
              <span class="rvt-lockup__subtitle">Indiana University</span>
            </div>
          </a>
        </div>
        <!-- Header controls -->
        <div class="rvt-header-global__controls">
          <!-- Navigation -->
          <div data-rvt-disclosure="menu" data-rvt-close-click-outside>
            <!-- Menu button that shows/hides navigation on smaller screens -->
            <button aria-expanded="false" class="rvt-global-toggle rvt-global-toggle--menu rvt-hide-lg-up" data-rvt-disclosure-toggle="menu">
              <span class="rvt-sr-only">Menu</span>
              <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M15 4H1V2h14v2Zm0 5H1V7h14v2ZM1 14h14v-2H1v2Z"></path></svg>
              <svg class="rvt-global-toggle__close" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
            </button>
            <!-- Navigation links -->
            <nav aria-label="Main" class="rvt-header-menu" data-rvt-disclosure-target="menu" hidden>
              <ul class="rvt-header-menu__list">
                <!-- Navigation link without dropdown -->
                <li class="rvt-header-menu__item">
                  <a class="rvt-header-menu__link" href="#">Nav Item One</a>
                </li>
                <!-- Navigation link marked as the current page -->
                <li class="rvt-header-menu__item rvt-header-menu__item--current">
                  <a class="rvt-header-menu__link" href="#" aria-current="page">Nav Item Two</a>
                </li>
                <!-- Navigation link with dropdown -->
                <li class="rvt-header-menu__item">
                  <div class="rvt-header-menu__dropdown rvt-dropdown" data-rvt-dropdown="primary-nav-1">
                    <div class="rvt-header-menu__group">
                      <!-- Link that appears in header -->
                      <a class="rvt-header-menu__link" href="#">Nav Item Three</a>
                      <!-- Button that shows/hides dropdown links -->
                      <button aria-expanded="false" class="rvt-dropdown__toggle rvt-header-menu__toggle" data-rvt-dropdown-toggle="primary-nav-1">
                        <span class="rvt-sr-only">Toggle Sub-navigation</span>
                        <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"></path></svg>
                      </button>
                    </div>
                    <!-- Dropdown menu -->
                    <div class="rvt-header-menu__submenu rvt-dropdown__menu rvt-dropdown__menu--right" data-rvt-dropdown-menu="primary-nav-1" hidden>
                      <ul class="rvt-header-menu__submenu-list">
                        <!-- Dropdown links -->
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item One</a>
                        </li>
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item Two</a>
                        </li>
                        <li class="rvt-header-menu__submenu-item">
                          <a class="rvt-header-menu__submenu-link" href="#">Sub Item Three</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </nav>
          </div>
          <!-- Search -->
          <div data-rvt-disclosure="search" data-rvt-close-click-outside>
            <!-- Button that shows/hides the search field -->
            <button class="rvt-global-toggle" data-rvt-disclosure-toggle="search" aria-expanded="false">
              <span class="rvt-sr-only">Search</span>
              <svg class="rvt-global-toggle__search" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M7 2a5 5 0 1 0 0 10A5 5 0 0 0 7 2ZM0 7a7 7 0 1 1 12.606 4.192l3.101 3.1-1.414 1.415-3.1-3.1A7 7 0 0 1 0 7Z"></path></svg>
            </button>
            <!-- Search field -->
            <form action="/search" class="rvt-header-global__search" data-rvt-disclosure-target="search" role="search" method="get" hidden>
              <label class="rvt-sr-only" for="search">Search</label>
              <div class="rvt-input-group">
                <input id="search" class="rvt-input-group__input rvt-text-input" type="text" name="q">
                <div class="rvt-input-group__append">
                  <button class="rvt-button">Search</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Secondary header area -->
  <div class="rvt-header-local">
    <div class="rvt-container-xl">
      <div class="rvt-header-local__inner" data-rvt-disclosure="local-header-menu" data-rvt-close-click-outside>
        <!-- Secondary navigation title -->
        <a href="#" class="rvt-header-local__title">Component Library</a>
        <!-- Menu button that shows/hides secondary navigation on smaller screens -->
        <button aria-expanded="false" class="rvt-global-toggle rvt-global-toggle--menu rvt-hide-lg-up" data-rvt-disclosure-toggle="local-header-menu">
          <span class="rvt-sr-only">Toggle local menu</span>
          <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"></path></svg>
        </button>
        <!-- Secondary navigation links -->
        <nav aria-label="Secondary" class="rvt-header-menu" data-rvt-disclosure-target="local-header-menu" hidden>
          <ul class="rvt-header-menu__list">
            <!-- Secondary navigation link -->
            <li class="rvt-header-menu__item">
              <a class="rvt-header-menu__link" href="#">Section Item One</a>
            </li>
            <!-- Secondary navigation link with dropdown -->
            <li class="rvt-header-menu__item">
              <div class="rvt-header-menu__dropdown rvt-dropdown" data-rvt-dropdown="secondary-nav-2">
                <div class="rvt-header-menu__group">
                  <!-- Link that appears in secondary navigation -->
                  <a class="rvt-header-menu__link" href="#">Section Item Two</a>
                  <!-- Button that shows/hides dropdown links -->
                  <button aria-expanded="false" class="rvt-dropdown__toggle rvt-header-menu__toggle" data-rvt-dropdown-toggle="secondary-nav-2">
                    <span class="rvt-sr-only">Toggle Sub-navigation</span>
                    <svg class="rvt-global-toggle__open" fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"></path></svg>
                  </button>
                </div>
                <!-- Dropdown menu -->
                <div class="rvt-header-menu__submenu rvt-dropdown__menu rvt-dropdown__menu--right" data-rvt-dropdown-menu="secondary-nav-2" hidden>
                  <ul class="rvt-header-menu__submenu-list">
                    <!-- Dropdown links -->
                    <li class="rvt-header-menu__submenu-item">
                      <a class="rvt-header-menu__submenu-link" href="#">Sub Item One</a>
                    </li>
                    <li class="rvt-header-menu__submenu-item">
                      <a class="rvt-header-menu__submenu-link" href="#">Sub Item Two</a>
                    </li>
                    <li class="rvt-header-menu__submenu-item">
                      <a class="rvt-header-menu__submenu-link" href="#">Sub Item Three</a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

Usage #

  • Navigation, search, username, and “log out” link are optional. Only the base header with the IU trident and site title are required.
  • Navigation must appear first. The primary navigation must appear before the search button, username, and “log out” link. See the code examples on this page for guidance.
  • Adjust the header width to match the width of your site’s content. The header shown in the code examples on this page uses the .rvt-container-xl class. You can use a different container width class to make you header’s content narrower to match the width of your page’s content.
  • Top-level navigation links must appear in the primary navigation. Don’t use secondary navigation for your site’s primary navigation links.
  • Use only one secondary navigation. Don’t stack multiple secondary navigation elements on top of one another in your site’s header.

Do

  • Use a header on every page of your website or web application
  • Use to present primary site navigation, secondary navigation, and search
  • Keep navigation labels brief
  • Keep the header consistent between pages

Don't

  • Alter the IU trident logo
  • Use secondary navigation as your site's primary navigation
  • Use more than one secondary navigation at the same time
  • Use different primary navigation links on different pages
  • Add a third subtitle next to the trident logo
  • Nest secondary navigation links more than four levels deep

Accessibility #

  • The header must contain a “Skip to main content” link. The first element inside the header must be a skip link with the .rvt-header-wrapper__skip-link class. This link must direct users to your page’s main element that has an ID of #main-content. See the code examples on this page for guidance. (Layouts have these skip links already set up.)
  • The header contains disclosure and dropdown components. See the disclosure and dropdown documentation for additional accessibility information.

JavaScript #

  • The header contains disclosure and dropdown components. To control these elements of the header using JavaScript, see the documentation for disclosures and dropdowns.