Skip to main content
GitHub stars

Page Header

The page header contains top-level branding and navigation.

Considerations

We use the <header> element to wrap content, which provides a "banner" role to assistive technologies. Only use one per page. You can give the header a more descriptive name with the aria-label attribute, which will be announced by assistive technologies. But generally this is not necessary.

It's important to include a "skip navigation" link so that keyboard and assistive technology users can jump to the main page content without having to tab through all the header links. This is usually hidden and only becomes visible when focused using the keyboard.

If a logo is included, be sure to give it appropriate alt text. Logo SVGs should include a descriptive <title> element.

Navigation must use a <nav> element which provides the "navigation" role to assistive technologies. Give it an aria-label like "main menu" to differentiate it from other navs like the footer menu.

Examples

Page Header with Navigation and Skip Navigation Link

<header class="page-header" aria-label="Main site header">
  <a
    class="button button--primary u-hide-visually u-hide-visually--focus-unhide"
    href="#main"
  >
    Skip to main content
  </a>

  <a class="header-logo" href="/">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="860"
      height="168"
      viewBox="0 0 860 168"
      fill="currentcolor"
      role="img"
      aria-labelledby="header-logo-title"
    >
      <title id="header-logo-title">thoughtbot</title>
      <path
        d="M210.603 128.912C204.519 131.08 197.603 132.168 193.435 132.44C188.951 132.74 185.272 131.515 182.46 129.674C179.622 127.833 177.542 125.448 176.214 122.573C174.867 119.698 174.188 116.687 174.188 113.568V73.6548H164V58.9629H174.188V45.84L191.998 32.8441V58.9538H207.81V73.6457H191.998V106.213C191.998 109.877 192.215 112.507 192.649 114.103C193.083 115.699 194.05 116.706 195.596 117.141C197.133 117.522 199.004 117.603 202.539 116.814L206.969 115.49C206.969 115.49 209.374 123.924 210.594 128.912H210.603Z"
      ></path>
      <path
        d="M282.628 90.9494V130.998H264.818V92.2282C264.818 85.508 263.76 80.5382 261.6 77.3187C259.439 74.1173 255.922 72.4939 251.032 72.4939C246.873 72.4939 243.465 73.4734 240.816 75.4232C239.496 76.3755 238.276 77.5091 237.109 78.8151V131.007H219.3V28.9353H237.109V63.697C238.972 62.5543 240.897 61.475 242.922 60.4684C246.466 58.6818 250.706 57.7839 255.624 57.7839C261.952 57.7839 267.087 59.1896 271.083 62.0101C275.061 64.8034 277.972 68.7031 279.843 73.6729C281.706 78.6609 282.628 84.4107 282.628 90.9494Z"
      ></path>
      <path
        d="M363.747 76.3845C360.854 70.662 356.668 66.1093 351.154 62.6631C345.639 59.2168 338.994 57.5119 331.184 57.5119C323.373 57.5119 316.719 59.2168 311.231 62.6631C305.717 66.1093 301.531 70.662 298.638 76.3845C295.718 82.1071 294.29 88.3466 294.29 95.1212C294.29 101.896 295.718 108.026 298.638 113.695C301.531 119.363 305.717 123.915 311.231 127.307C316.719 130.726 323.391 132.431 331.184 132.431C338.976 132.431 345.648 130.726 351.154 127.307C356.668 123.915 360.854 119.363 363.747 113.695C366.64 108.026 368.095 101.841 368.095 95.1212C368.095 88.401 366.64 82.1071 363.747 76.3845ZM345.015 111.445C341.77 115.644 337.177 117.739 331.175 117.739C325.172 117.739 320.661 115.654 317.388 111.445C314.142 107.247 312.524 101.796 312.524 95.1212C312.524 88.4464 314.142 82.8417 317.388 78.5793C320.661 74.3259 325.253 72.2037 331.175 72.2037C337.096 72.2037 341.77 74.3168 345.015 78.5793C348.261 82.8326 349.852 88.3376 349.852 95.1212C349.852 101.905 348.261 107.237 345.015 111.445Z"
      ></path>
      <path
        d="M442.181 58.9538V130.998H425.529L425.231 126.663C423.874 127.697 422.256 128.695 420.394 129.647C416.66 131.515 412.963 132.44 409.283 132.44C401.825 132.44 395.849 130.953 391.42 127.969C386.963 125.013 383.744 120.923 381.773 115.69C379.83 110.484 378.853 104.49 378.853 97.7149V58.972H396.636V97.7149C396.636 104.408 397.775 109.351 399.99 112.597C402.205 115.853 405.857 117.449 410.883 117.449C414.879 117.449 418.233 116.497 420.882 114.574C422.148 113.649 423.341 112.57 424.372 111.291V58.9629H442.181V58.9538Z"
      ></path>
      <path
        d="M590.751 90.9494V130.998H572.941V92.2282C572.941 85.508 571.856 80.5382 569.696 77.3187C567.562 74.1173 564.018 72.4939 559.155 72.4939C554.996 72.4939 551.561 73.4734 548.912 75.4232C547.592 76.4027 546.344 77.5363 545.205 78.8423V131.007H527.396V28.9353H545.205V63.697C547.04 62.5543 548.993 61.475 551.045 60.4684C554.589 58.6818 558.802 57.7839 563.747 57.7839C570.075 57.7839 575.21 59.1896 579.179 62.0101C583.157 64.8034 586.068 68.7031 587.939 73.6729C589.801 78.6609 590.751 84.4107 590.751 90.9494Z"
      ></path>
      <path
        d="M722.062 76.5206C719.603 70.8524 715.978 66.327 711.196 62.9079C706.413 59.4889 700.492 57.7839 693.44 57.7839C688.414 57.7839 683.957 58.709 680.06 60.5228C677.846 61.5839 675.739 62.8535 673.759 64.3499V28.9353H655.977V130.998H672.629L672.955 126.228C674.98 127.616 677.113 128.776 679.31 129.783C683.279 131.542 687.989 132.44 693.449 132.44C700.501 132.44 706.422 130.735 711.205 127.316C715.987 123.924 719.612 119.372 722.071 113.704C724.557 108.036 725.778 101.85 725.778 95.1303C725.778 88.4101 724.557 82.1978 722.071 76.5297L722.062 76.5206ZM705.6 106.893C704.298 110.285 702.408 112.942 699.922 114.865C697.409 116.787 694.408 117.739 690.864 117.739C686.705 117.739 683.297 116.787 680.675 114.865C678.026 112.942 676.083 110.285 674.808 106.893C673.533 103.501 672.919 99.5741 672.919 95.1212C672.919 90.6683 673.542 86.7142 674.808 83.3224C676.074 79.9305 678.026 77.3005 680.675 75.3779C683.297 73.4552 686.705 72.4758 690.864 72.4758C694.408 72.4758 697.409 73.4552 699.922 75.3779C702.408 77.3005 704.298 79.9305 705.6 83.3224C706.865 86.7142 707.516 90.6411 707.516 95.1212C707.516 99.6013 706.865 103.501 705.6 106.893Z"
      ></path>
      <path
        d="M803.29 76.3845C800.397 70.662 796.184 66.1093 790.696 62.6631C785.182 59.2168 778.537 57.5119 770.726 57.5119C762.915 57.5119 756.262 59.2168 750.783 62.6631C745.269 66.1093 741.056 70.662 738.163 76.3845C735.27 82.1071 733.815 88.3466 733.815 95.1212C733.815 101.896 735.27 108.026 738.163 113.695C741.056 119.363 745.269 123.915 750.783 127.307C756.271 130.726 762.915 132.431 770.726 132.431C778.537 132.431 785.191 130.726 790.696 127.307C796.184 123.915 800.397 119.363 803.29 113.695C806.183 108.026 807.638 101.841 807.638 95.1212C807.638 88.401 806.183 82.1071 803.29 76.3845ZM784.558 111.445C781.313 115.644 776.72 117.739 770.717 117.739C764.714 117.739 760.203 115.654 756.931 111.445C753.685 107.247 752.04 101.796 752.04 95.1212C752.04 88.4464 753.685 82.8417 756.931 78.5793C760.203 74.3259 764.769 72.2037 770.717 72.2037C776.666 72.2037 781.313 74.3168 784.558 78.5793C787.776 82.8326 789.395 88.3376 789.395 95.1212C789.395 101.905 787.776 107.237 784.558 111.445Z"
      ></path>
      <path
        d="M646.665 128.912C640.581 131.08 633.665 132.168 629.498 132.44C625.014 132.74 621.334 131.515 618.523 129.674C615.684 127.833 613.605 125.448 612.276 122.573C610.929 119.698 610.251 116.687 610.251 113.568V73.6548H600.062V58.9629H610.251V45.84L628.06 32.8531V58.9629H643.872V73.6548H628.06V106.222C628.06 109.886 628.277 112.516 628.711 114.112C629.145 115.708 630.112 116.715 631.658 117.15C633.195 117.531 635.067 117.612 638.601 116.823L643.031 115.499C643.031 115.499 645.436 123.934 646.656 128.922L646.665 128.912Z"
      ></path>
      <path
        d="M860 128.912C853.916 131.08 847 132.168 842.832 132.44C838.348 132.74 834.669 131.515 831.857 129.674C829.019 127.833 826.939 125.448 825.61 122.573C824.263 119.698 823.585 116.687 823.585 113.568V73.6548H813.397V58.9629H823.585V45.84L841.395 32.8531V58.9629H857.206V73.6548H841.395V106.222C841.395 109.886 841.612 112.516 842.046 114.112C842.48 115.708 843.447 116.715 844.993 117.15C846.53 117.531 848.401 117.612 851.936 116.823L856.366 115.499C856.366 115.499 858.771 123.934 859.991 128.922L860 128.912Z"
      ></path>
      <path
        d="M495.718 123.462C491.65 123.199 479.428 122.709 479.428 122.709C474.862 122.709 471.779 119.163 471.779 115.499C471.779 113.985 472.964 112.298 474.41 110.901C477.864 112.479 481.778 113.377 486.027 113.377C500.012 113.377 513.754 103.238 513.754 85.4264C513.754 77.364 509.559 68.4038 502.056 62.8535L510.834 56.2603L502.67 45.3321L486.488 57.4937C486.135 57.4847 485.783 57.4756 485.43 57.4756C465.053 57.4756 458.237 74.6161 458.237 85.4264C458.237 91.1943 460.036 96.808 463.245 101.47C458.689 105.233 455.335 111.582 455.127 117.485C454.946 122.365 456.429 127.253 460.262 129.701C456.546 133.547 452.279 138.634 452.279 144.792C452.279 161.434 469.366 168 487.266 168C505.165 168 518.509 162.64 518.509 143.722C518.509 131.76 508.583 124.296 495.718 123.462ZM477.005 74.9516C479.093 72.376 482.076 71.0338 486.027 71.0338C489.978 71.0338 492.97 72.376 494.95 74.9516C496.939 77.5363 497.942 81.0007 497.942 85.3811C497.942 89.7614 496.939 93.2167 494.95 95.9011C492.97 98.4767 490.005 99.819 486.027 99.819C482.049 99.819 479.093 98.4767 477.005 95.9011C475.043 93.2167 474.049 89.7523 474.049 85.3811C474.049 81.0098 475.043 77.5363 477.005 74.9516ZM487.184 154.197C477.294 154.197 468.326 150.878 468.326 143.55C468.326 140.648 470.902 137.22 472.114 135.388C475.124 136.286 478.722 136.803 481.923 136.803C481.923 136.803 488.92 136.948 491.09 137.038C498.403 137.356 502.327 138.381 502.327 144.792C502.327 151.658 496.161 154.197 487.184 154.197Z"
      ></path>
      <g class="logo-signals">
        <path
          d="M51.8337 44.0707C62.8506 44.0707 72.8289 48.0772 78.9791 54.1063L83.8412 47.0337C76.1602 40.0116 64.6716 35.5488 51.8337 35.5488C38.9617 35.5488 27.4459 40.0322 19.7649 47.0865L24.6225 54.1705C30.7682 48.1047 40.7805 44.0707 51.8337 44.0707Z"
        ></path>
        <path
          d="M52.3558 25.9989C64.3955 25.9989 75.6233 29.5512 83.971 35.9977C85.6673 37.3095 87.1958 38.7039 88.5474 40.167L93.4164 33.0669C83.937 23.5863 69.0717 17.4792 52.3581 17.4792C35.2385 17.4792 20.0625 23.8821 10.624 33.7595L15.5178 40.894C17.094 39.0909 18.8435 37.4508 20.7406 35.9977C29.0906 29.5512 40.3184 25.9989 52.3581 25.9989H52.3558Z"
        ></path>
        <path
          d="M51.833 8.66602C70.9392 8.66602 87.8274 15.773 97.8669 26.5768L102.7 19.5455C90.9955 7.74869 72.5629 0.144043 51.833 0.144043C31.0669 0.144043 12.6116 7.77162 0.907593 19.5983L5.73798 26.6388C15.7684 15.8005 32.6884 8.66602 51.833 8.66602Z"
        ></path>
      </g>
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M5.4735 70.6095C5.4735 67.0702 8.32771 64.2011 11.8485 64.2011L91.7584 64.2011C95.2791 64.2011 98.1334 67.0702 98.1334 70.6095V123.725C98.1334 127.264 95.2791 130.133 91.7584 130.133H11.8485C8.32771 130.133 5.4735 127.264 5.4735 123.725L5.4735 70.6095ZM72.1261 102.682C66.4121 102.652 61.8018 97.9477 61.8241 92.1694C61.8241 86.3191 66.4343 81.6298 72.1261 81.6298C77.8596 81.6547 82.4898 86.3711 82.4726 92.1694C82.4678 97.9539 77.8462 102.65 72.1261 102.682ZM21.0696 92.1694C21.0474 97.9477 25.6576 102.652 31.3716 102.682C37.0917 102.65 41.7133 97.9539 41.7181 92.1694C41.7353 86.3711 37.1052 81.6547 31.3716 81.6298C25.6799 81.6298 21.0696 86.3191 21.0696 92.1694Z"
      ></path>
      <path
        d="M31.3844 97.1482C28.6743 97.1341 26.4877 94.9029 26.4982 92.1623C26.4982 89.3875 28.6849 87.1635 31.3844 87.1635C34.1038 87.1752 36.2998 89.4123 36.2916 92.1623C36.2893 94.9058 34.0974 97.133 31.3844 97.1482Z"
      ></path>
      <path
        d="M72.1388 97.1482C69.4288 97.1341 67.2422 94.9029 67.2527 92.1623C67.2527 89.3875 69.4393 87.1635 72.1388 87.1635C74.8582 87.1752 77.0543 89.4123 77.0461 92.1623C77.0438 94.9058 74.8518 97.133 72.1388 97.1482Z"
      ></path>
    </svg>
  </a>
  <nav aria-label="Main menu" class="header-nav">
    <ul class="page-nav">
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
      <li>
        <a href="#" class="page-nav__link--active" aria-current="page"
          >Link 3</a
        >
      </li>
      <li>
        <a href="#">Link 4</a>
      </li>
    </ul>
  </nav>

  <div class="header-actions">
    <button type="button" class="button button--accent">Sign In</button>
    <a href="#" class="button button--primary">Join</a>
  </div>
</header>