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" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M15 4H1V2h14v2Zm0 5H1V7h14v2ZM1 14h14v-2H1v2Z"/></svg>
              <svg class="rvt-global-toggle__close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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">More sub-navigation links</span>
                        <svg class="rvt-global-toggle__open" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M15 4H1V2h14v2Zm0 5H1V7h14v2ZM1 14h14v-2H1v2Z"/></svg>
              <svg class="rvt-global-toggle__close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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">More sub-navigation links</span>
                        <svg class="rvt-global-toggle__open" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M15 4H1V2h14v2Zm0 5H1V7h14v2ZM1 14h14v-2H1v2Z"/></svg>
              <svg class="rvt-global-toggle__close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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">More sub-navigation links</span>
                        <svg class="rvt-global-toggle__open" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M15 4H1V2h14v2Zm0 5H1V7h14v2ZM1 14h14v-2H1v2Z"/></svg>
              <svg class="rvt-global-toggle__close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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">More sub-navigation links</span>
                        <svg class="rvt-global-toggle__open" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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">More local menu links</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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">More sub-navigation links</span>
                    <svg class="rvt-global-toggle__open" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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"/></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>

Elements #

Element Description Usage Required Multiple
Trident logo IU trident logo Do not adjust the shape, size, or color of the trident logo

Trident logo is required

Component may contain only one Trident logo
Site title Title of the website or application Keep as short as possible

Site title is required

Component may contain only one Site title
Site subtitle Subtitle of the website or application. Typically the unit or campus to which the site belongs. Keep as short as possible

Site subtitle is optional

Component may contain only one Site subtitle
Primary navigation link Link that appears in the primary navigation Keep link labels to 1-2 words. Avoid mixing internal and external links in the primary navigation.

Primary navigation link is optional

Component may contain multiple Primary navigation link
Search Search toggle button and text field Put after the primary navigation links, if any

Search is optional

Component may contain only one Search
Secondary navigation title Subsection or subsite title Put before the secondary navigation links. Avoid long titles.

Secondary navigation title is optional

Component may contain only one Secondary navigation title
Secondary navigation link Link that appears in the secondary navigation Keep link text brief. Avoid mixing internal and external links in the secondary navigation.

Secondary navigation link is optional

Component may contain multiple Secondary navigation link

Usage #

  • 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 the header consistent between pages

Don't

  • 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

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.