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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" viewBox="0 0 16 16">
                <g fill="currentColor">
                  <path d="M15,3H1A1,1,0,0,1,1,1H15a1,1,0,0,1,0,2Z"></path>
                  <path d="M15,9H1A1,1,0,0,1,1,7H15a1,1,0,0,1,0,2Z"></path>
                  <path d="M15,15H1a1,1,0,0,1,0-2H15a1,1,0,0,1,0,2Z"></path>
                </g>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__close" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.46954 7.00409L13.7595 1.71409C13.9234 1.52279 14.009 1.27671 13.9993 1.02504C13.9895 0.773362 13.8852 0.534623 13.7071 0.356528C13.529 0.178434 13.2903 0.0741014 13.0386 0.0643803C12.7869 0.0546591 12.5408 0.140265 12.3495 0.304092L7.05954 5.59409L1.76954 0.294092C1.58124 0.105788 1.32585 -3.72428e-09 1.05954 -1.74018e-09C0.793242 2.43924e-10 0.537847 0.105788 0.349544 0.294092C0.16124 0.482395 0.055452 0.73779 0.055452 1.00409C0.055452 1.27039 0.16124 1.52579 0.349544 1.71409L5.64954 7.00409L0.349544 12.2941C0.244862 12.3837 0.159841 12.4941 0.0998179 12.6181C0.0397946 12.7422 0.00606467 12.8773 0.000745174 13.015C-0.00457432 13.1528 0.0186315 13.2901 0.0689061 13.4184C0.119181 13.5467 0.195439 13.6633 0.292893 13.7607C0.390348 13.8582 0.506896 13.9345 0.635221 13.9847C0.763546 14.035 0.900878 14.0582 1.0386 14.0529C1.17632 14.0476 1.31145 14.0138 1.43551 13.9538C1.55958 13.8938 1.6699 13.8088 1.75954 13.7041L7.05954 8.41409L12.3495 13.7041C12.5408 13.8679 12.7869 13.9535 13.0386 13.9438C13.2903 13.9341 13.529 13.8297 13.7071 13.6517C13.8852 13.4736 13.9895 13.2348 13.9993 12.9831C14.009 12.7315 13.9234 12.4854 13.7595 12.2941L8.46954 7.00409Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" height="16" viewBox="0 0 16 16" width="16">
                          <path d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" viewBox="0 0 16 16">
                <g fill="currentColor">
                  <path d="M15,3H1A1,1,0,0,1,1,1H15a1,1,0,0,1,0,2Z"></path>
                  <path d="M15,9H1A1,1,0,0,1,1,7H15a1,1,0,0,1,0,2Z"></path>
                  <path d="M15,15H1a1,1,0,0,1,0-2H15a1,1,0,0,1,0,2Z"></path>
                </g>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__close" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.46954 7.00409L13.7595 1.71409C13.9234 1.52279 14.009 1.27671 13.9993 1.02504C13.9895 0.773362 13.8852 0.534623 13.7071 0.356528C13.529 0.178434 13.2903 0.0741014 13.0386 0.0643803C12.7869 0.0546591 12.5408 0.140265 12.3495 0.304092L7.05954 5.59409L1.76954 0.294092C1.58124 0.105788 1.32585 -3.72428e-09 1.05954 -1.74018e-09C0.793242 2.43924e-10 0.537847 0.105788 0.349544 0.294092C0.16124 0.482395 0.055452 0.73779 0.055452 1.00409C0.055452 1.27039 0.16124 1.52579 0.349544 1.71409L5.64954 7.00409L0.349544 12.2941C0.244862 12.3837 0.159841 12.4941 0.0998179 12.6181C0.0397946 12.7422 0.00606467 12.8773 0.000745174 13.015C-0.00457432 13.1528 0.0186315 13.2901 0.0689061 13.4184C0.119181 13.5467 0.195439 13.6633 0.292893 13.7607C0.390348 13.8582 0.506896 13.9345 0.635221 13.9847C0.763546 14.035 0.900878 14.0582 1.0386 14.0529C1.17632 14.0476 1.31145 14.0138 1.43551 13.9538C1.55958 13.8938 1.6699 13.8088 1.75954 13.7041L7.05954 8.41409L12.3495 13.7041C12.5408 13.8679 12.7869 13.9535 13.0386 13.9438C13.2903 13.9341 13.529 13.8297 13.7071 13.6517C13.8852 13.4736 13.9895 13.2348 13.9993 12.9831C14.009 12.7315 13.9234 12.4854 13.7595 12.2941L8.46954 7.00409Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" height="16" viewBox="0 0 16 16" width="16">
                          <path d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__search" height="16" viewBox="0 0 16 16" width="16">
                <path d="M15.71,14.29,10.89,9.47a6,6,0,1,0-1.42,1.42l4.82,4.82a1,1,0,0,0,1.42,0A1,1,0,0,0,15.71,14.29ZM6,10a4,4,0,1,1,4-4A4,4,0,0,1,6,10Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" viewBox="0 0 16 16">
                <g fill="currentColor">
                  <path d="M15,3H1A1,1,0,0,1,1,1H15a1,1,0,0,1,0,2Z"></path>
                  <path d="M15,9H1A1,1,0,0,1,1,7H15a1,1,0,0,1,0,2Z"></path>
                  <path d="M15,15H1a1,1,0,0,1,0-2H15a1,1,0,0,1,0,2Z"></path>
                </g>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__close" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.46954 7.00409L13.7595 1.71409C13.9234 1.52279 14.009 1.27671 13.9993 1.02504C13.9895 0.773362 13.8852 0.534623 13.7071 0.356528C13.529 0.178434 13.2903 0.0741014 13.0386 0.0643803C12.7869 0.0546591 12.5408 0.140265 12.3495 0.304092L7.05954 5.59409L1.76954 0.294092C1.58124 0.105788 1.32585 -3.72428e-09 1.05954 -1.74018e-09C0.793242 2.43924e-10 0.537847 0.105788 0.349544 0.294092C0.16124 0.482395 0.055452 0.73779 0.055452 1.00409C0.055452 1.27039 0.16124 1.52579 0.349544 1.71409L5.64954 7.00409L0.349544 12.2941C0.244862 12.3837 0.159841 12.4941 0.0998179 12.6181C0.0397946 12.7422 0.00606467 12.8773 0.000745174 13.015C-0.00457432 13.1528 0.0186315 13.2901 0.0689061 13.4184C0.119181 13.5467 0.195439 13.6633 0.292893 13.7607C0.390348 13.8582 0.506896 13.9345 0.635221 13.9847C0.763546 14.035 0.900878 14.0582 1.0386 14.0529C1.17632 14.0476 1.31145 14.0138 1.43551 13.9538C1.55958 13.8938 1.6699 13.8088 1.75954 13.7041L7.05954 8.41409L12.3495 13.7041C12.5408 13.8679 12.7869 13.9535 13.0386 13.9438C13.2903 13.9341 13.529 13.8297 13.7071 13.6517C13.8852 13.4736 13.9895 13.2348 13.9993 12.9831C14.009 12.7315 13.9234 12.4854 13.7595 12.2941L8.46954 7.00409Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" height="16" viewBox="0 0 16 16" width="16">
                          <path d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__search" height="16" viewBox="0 0 16 16" width="16">
                <path d="M15.71,14.29,10.89,9.47a6,6,0,1,0-1.42,1.42l4.82,4.82a1,1,0,0,0,1.42,0A1,1,0,0,0,15.71,14.29ZM6,10a4,4,0,1,1,4-4A4,4,0,0,1,6,10Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" viewBox="0 0 16 16">
                <g fill="currentColor">
                  <path d="M15,3H1A1,1,0,0,1,1,1H15a1,1,0,0,1,0,2Z"></path>
                  <path d="M15,9H1A1,1,0,0,1,1,7H15a1,1,0,0,1,0,2Z"></path>
                  <path d="M15,15H1a1,1,0,0,1,0-2H15a1,1,0,0,1,0,2Z"></path>
                </g>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__close" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.46954 7.00409L13.7595 1.71409C13.9234 1.52279 14.009 1.27671 13.9993 1.02504C13.9895 0.773362 13.8852 0.534623 13.7071 0.356528C13.529 0.178434 13.2903 0.0741014 13.0386 0.0643803C12.7869 0.0546591 12.5408 0.140265 12.3495 0.304092L7.05954 5.59409L1.76954 0.294092C1.58124 0.105788 1.32585 -3.72428e-09 1.05954 -1.74018e-09C0.793242 2.43924e-10 0.537847 0.105788 0.349544 0.294092C0.16124 0.482395 0.055452 0.73779 0.055452 1.00409C0.055452 1.27039 0.16124 1.52579 0.349544 1.71409L5.64954 7.00409L0.349544 12.2941C0.244862 12.3837 0.159841 12.4941 0.0998179 12.6181C0.0397946 12.7422 0.00606467 12.8773 0.000745174 13.015C-0.00457432 13.1528 0.0186315 13.2901 0.0689061 13.4184C0.119181 13.5467 0.195439 13.6633 0.292893 13.7607C0.390348 13.8582 0.506896 13.9345 0.635221 13.9847C0.763546 14.035 0.900878 14.0582 1.0386 14.0529C1.17632 14.0476 1.31145 14.0138 1.43551 13.9538C1.55958 13.8938 1.6699 13.8088 1.75954 13.7041L7.05954 8.41409L12.3495 13.7041C12.5408 13.8679 12.7869 13.9535 13.0386 13.9438C13.2903 13.9341 13.529 13.8297 13.7071 13.6517C13.8852 13.4736 13.9895 13.2348 13.9993 12.9831C14.009 12.7315 13.9234 12.4854 13.7595 12.2941L8.46954 7.00409Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" height="16" viewBox="0 0 16 16" width="16">
                          <path d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__search" height="16" viewBox="0 0 16 16" width="16">
                <path d="M15.71,14.29,10.89,9.47a6,6,0,1,0-1.42,1.42l4.82,4.82a1,1,0,0,0,1.42,0A1,1,0,0,0,15.71,14.29ZM6,10a4,4,0,1,1,4-4A4,4,0,0,1,6,10Z" fill="currentColor"></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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path fill="currentColor" d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z" />
          </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 xmlns="http://www.w3.org/2000/svg" class="rvt-global-toggle__open" height="16" viewBox="0 0 16 16" width="16">
                      <path d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z" fill="currentColor"></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.