Origami Frontend Components & Services

Demos: o-header

Header

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Mega menu

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
      <nav id="o-header-nav-mobile" class="o-header__row o-header__nav o-header__nav--mobile" role="navigation" aria-label="Main navigation">
        <ul class="o-header__nav-list">
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href aria-label="xxxx, current page" aria-current="page">xxxx</a>
          </li>
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxxxx</a>
          </li>
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxxxxx xxxx</a>
          </li>
        </ul>
      </nav>

      <nav id="o-header-nav-desktop" class="o-header__row o-header__nav o-header__nav--desktop" role="navigation" aria-label="Main navigation">
        <div class="o-header__container">
          <ul class="o-header__nav-list o-header__nav-list--left">
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href aria-label="xxxx, current page" aria-current="page" id="o-header-link-0">xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-1" aria-controls="o-header-mega-1">xxxxx</a>
              <div class="o-header__mega" id="o-header-mega-1" role="group" aria-labelledby="o-header-link-1" data-o-header-mega>
                <div class="o-header__container">
                  <div class="o-header__mega-wrapper">
                    <div class="o-header__mega-column o-header__mega-column--subsections">
                      <div class="o-header__mega-heading">Sub-sections</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxx xxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxx xxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxx xxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxx xxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxx xxxx xxx xxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxx xxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxx x xxxxxxxxxxx
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="o-header__mega-column o-header__mega-column--articles">
                      <div class="o-header__mega-heading">Top Stories</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              The UK expats voting for Brexit no matter what the
                              cost
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Lunch with the FT: Adair Turner
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              English carpenter who makes beehives that sell
                              across the world
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              French ambassador urges UK to help shape a
                              &#x2018;reformed Europe&#x2019;
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Where do politicians live? How MPs across the
                              world find city digs
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-2" aria-controls="o-header-mega-2">xx</a>
              <div class="o-header__mega" id="o-header-mega-2" role="group" aria-labelledby="o-header-link-2" data-o-header-mega>
                <div class="o-header__container">
                  <div class="o-header__mega-wrapper">
                    <div class="o-header__mega-column o-header__mega-column--subsections">
                      <div class="o-header__mega-heading">Sub-sections</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxx xx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xx xxxxxxxx x xxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xx xxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xx xxxxxxx
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="o-header__mega-column o-header__mega-column--articles">
                      <div class="o-header__mega-heading">Top Stories</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              The UK expats voting for Brexit no matter what the
                              cost
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Lunch with the FT: Adair Turner
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              English carpenter who makes beehives that sell
                              across the world
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              French ambassador urges UK to help shape a
                              &#x2018;reformed Europe&#x2019;
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Where do politicians live? How MPs across the
                              world find city digs
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-3" aria-controls="o-header-mega-3">xxxxxxxxx</a>
              <div class="o-header__mega" id="o-header-mega-3" role="group" aria-labelledby="o-header-link-3" data-o-header-mega>
                <div class="o-header__container">
                  <div class="o-header__mega-wrapper">
                    <div class="o-header__mega-column o-header__mega-column--subsections">
                      <div class="o-header__mega-heading">Sub-sections</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxx xxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxx x xxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxx
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="o-header__mega-column o-header__mega-column--articles">
                      <div class="o-header__mega-heading">Top Stories</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              The UK expats voting for Brexit no matter what the
                              cost
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Lunch with the FT: Adair Turner
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              English carpenter who makes beehives that sell
                              across the world
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              French ambassador urges UK to help shape a
                              &#x2018;reformed Europe&#x2019;
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Where do politicians live? How MPs across the
                              world find city digs
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-4" aria-controls="o-header-mega-4">xxxxxxx</a>
              <div class="o-header__mega" id="o-header-mega-4" role="group" aria-labelledby="o-header-link-4" data-o-header-mega>
                <div class="o-header__container">
                  <div class="o-header__mega-wrapper">
                    <div class="o-header__mega-column o-header__mega-column--subsections">
                      <div class="o-header__mega-heading">Sub-sections</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxx xxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxx xxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxx xxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxxxx </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="o-header__mega-column o-header__mega-column--articles">
                      <div class="o-header__mega-heading">Top Stories</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              The UK expats voting for Brexit no matter what the
                              cost
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Lunch with the FT: Adair Turner
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              English carpenter who makes beehives that sell
                              across the world
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              French ambassador urges UK to help shape a
                              &#x2018;reformed Europe&#x2019;
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Where do politicians live? How MPs across the
                              world find city digs
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-5" aria-controls="o-header-mega-5">xxxxxxx</a>
              <div class="o-header__mega" id="o-header-mega-5" role="group" aria-labelledby="o-header-link-5" data-o-header-mega>
                <div class="o-header__container">
                  <div class="o-header__mega-wrapper">
                    <div class="o-header__mega-column o-header__mega-column--subsections">
                      <div class="o-header__mega-heading">Sub-sections</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxx xxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xx xxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxx xxx xxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxx
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="o-header__mega-column o-header__mega-column--articles">
                      <div class="o-header__mega-heading">Top Stories</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              The UK expats voting for Brexit no matter what the
                              cost
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Lunch with the FT: Adair Turner
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              English carpenter who makes beehives that sell
                              across the world
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              French ambassador urges UK to help shape a
                              &#x2018;reformed Europe&#x2019;
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Where do politicians live? How MPs across the
                              world find city digs
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-6" aria-controls="o-header-mega-6">xxxx x xxxxxxx</a>
              <div class="o-header__mega" id="o-header-mega-6" role="group" aria-labelledby="o-header-link-6" data-o-header-mega>
                <div class="o-header__container">
                  <div class="o-header__mega-wrapper">
                    <div class="o-header__mega-column o-header__mega-column--subsections">
                      <div class="o-header__mega-heading">Sub-sections</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxx xxxx x xxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxx xxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxx xxxxx
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="o-header__mega-column o-header__mega-column--articles">
                      <div class="o-header__mega-heading">Top Stories</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              The UK expats voting for Brexit no matter what the
                              cost
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Lunch with the FT: Adair Turner
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              English carpenter who makes beehives that sell
                              across the world
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              French ambassador urges UK to help shape a
                              &#x2018;reformed Europe&#x2019;
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Where do politicians live? How MPs across the
                              world find city digs
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-7" aria-controls="o-header-mega-7">xxxx x xxxx</a>
              <div class="o-header__mega" id="o-header-mega-7" role="group" aria-labelledby="o-header-link-7" data-o-header-mega>
                <div class="o-header__container">
                  <div class="o-header__mega-wrapper">
                    <div class="o-header__mega-column o-header__mega-column--subsections">
                      <div class="o-header__mega-heading">Sub-sections</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxx xxxx x xxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxx x xxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxx x xxxxx
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href> xxxxx </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              xxxxx xx x xxxxx
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="o-header__mega-column o-header__mega-column--articles">
                      <div class="o-header__mega-heading">Top Stories</div>
                      <div class="o-header__mega-content">
                        <ul class="o-header__mega-list">
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              The UK expats voting for Brexit no matter what the
                              cost
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Lunch with the FT: Adair Turner
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              English carpenter who makes beehives that sell
                              across the world
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              French ambassador urges UK to help shape a
                              &#x2018;reformed Europe&#x2019;
                            </a>
                          </li>
                          <li class="o-header__mega-item">
                            <a class="o-header__mega-link" href>
                              Where do politicians live? How MPs across the
                              world find city digs
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <ul class="o-header__nav-list o-header__nav-list--right">
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--utility" href="/login">Sign In</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-button" href="/products">Subscribe</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

Header with subnav

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
      <nav id="o-header-nav-mobile" class="o-header__row o-header__nav o-header__nav--mobile" role="navigation" aria-label="Main navigation">
        <ul class="o-header__nav-list">
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxx</a>
          </li>
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxxxx</a>
          </li>
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxxxxx xxxx</a>
          </li>
        </ul>
      </nav>

      <nav id="o-header-nav-desktop" class="o-header__row o-header__nav o-header__nav--desktop" role="navigation" aria-label="Main navigation">
        <div class="o-header__container">
          <ul class="o-header__nav-list o-header__nav-list--left">
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx x xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx x xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxx xx xxxxx xx</a>
            </li>
          </ul>
          <ul class="o-header__nav-list o-header__nav-list--right">
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--utility" href="https://markets.ft.com/data/portfolio/dashboard">Portfolio</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--utility" href="https://myaccount.ft.com/details/core/view">My Account</a>
            </li>
          </ul>
        </div>
      </nav>

      <div class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav>
        <div class="o-header__container">
          <div class="o-header__subnav-wrap-outside">
            <div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
              <div class="o-header__subnav-content">
                <ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#"> xxxxx </a>
                  </li>
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href aria-current="page" aria-label="xx x xxxxxx, current page">
                      xx x xxxxxx
                    </a>
                  </li>
                </ol>

                <ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#"> xx xxxxxxx </a>
                  </li>
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#">
                      xx xxxxxxxx x xxxxxx
                    </a>
                  </li>
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#"> xx xxxxxxxxx </a>
                  </li>
                </ul>
              </div>
            </div>
            <button class="o-header__subnav-button o-header__subnav-button--left" aria-hidden="true" disabled></button>
            <button class="o-header__subnav-button o-header__subnav-button--right" aria-hidden="true" disabled></button>
          </div>
        </div>
      </div>
    </header>

Header with subnav and right aligned items

The subnav may have right aligned actions, for example to sign out of an admin area. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
      <nav id="o-header-nav-mobile" class="o-header__row o-header__nav o-header__nav--mobile" role="navigation" aria-label="Main navigation">
        <ul class="o-header__nav-list">
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxx</a>
          </li>
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxxxx</a>
          </li>
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxxxxx xxxx</a>
          </li>
        </ul>
      </nav>

      <nav id="o-header-nav-desktop" class="o-header__row o-header__nav o-header__nav--desktop" role="navigation" aria-label="Main navigation">
        <div class="o-header__container">
          <ul class="o-header__nav-list o-header__nav-list--left">
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx x xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx x xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxx xx xxxxx xx</a>
            </li>
          </ul>
          <ul class="o-header__nav-list o-header__nav-list--right">
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--utility" href="https://markets.ft.com/data/portfolio/dashboard">Portfolio</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--utility" href="https://myaccount.ft.com/details/core/view">My Account</a>
            </li>
          </ul>
        </div>
      </nav>

      <div class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav>
        <div class="o-header__container">
          <div class="o-header__subnav-wrap-outside">
            <div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
              <div class="o-header__subnav-content">
                <ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#"> xxxxx </a>
                  </li>
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href aria-current="page" aria-label="xx x xxxxxx, current page">
                      xx x xxxxxx
                    </a>
                  </li>
                </ol>

                <ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#"> xx xxxxxxx </a>
                  </li>
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#">
                      xx xxxxxxxx x xxxxxx
                    </a>
                  </li>
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#"> xx xxxxxxxxx </a>
                  </li>
                </ul>

                <ul class="o-header__subnav-list o-header__subnav-list--children o-header__subnav-list--right" aria-label="Actions">
                  <li class="o-header__subnav-item">
                    <a class="o-header__subnav-link" href="#"> xxxx xxx </a>
                  </li>
                </ul>
              </div>
            </div>
            <button class="o-header__subnav-button o-header__subnav-button--left" aria-hidden="true" disabled></button>
            <button class="o-header__subnav-button o-header__subnav-button--right" aria-hidden="true" disabled></button>
          </div>
        </div>
      </div>
    </header>

Simple header

Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Simple transparent (inverse) header

The "transparent" header is useful for use on dark backgrounds. This variant doesn't support the drawer. Please speak to Origami if you would like to add drawer support to this variant. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

<header class="o-header o-header--transparent o-header--simple" data-o-component="o-header" data-o-header--no-js>
      <div class="o-header__row o-header__anon">
        <ul class="o-header__anon-list">
          <li class="o-header__anon-item">
            <a class="o-header__anon-link" href="#">Subscribe</a>
          </li>
          <li class="o-header__anon-item">
            <a class="o-header__anon-link" href="#">Sign In</a>
          </li>
        </ul>
      </div>

      <div class="o-header__row o-header__top">
        <div class="o-header__container">
          <div class="o-header__top-wrapper">
            <div class="o-header__top-column o-header__top-column--left"></div>
            <div class="o-header__top-column o-header__top-column--center">
              <a class="o-header__top-logo" href="/" title="Go to Financial Times homepage">
                <span class="o-header__visually-hidden">Financial Times</span>
              </a>
            </div>
            <div class="o-header__top-column o-header__top-column--right"></div>
          </div>
        </div>
      </div>

      <nav id="o-header-nav-mobile" class="o-header__row o-header__nav o-header__nav--mobile" role="navigation" aria-label="Main navigation">
        <ul class="o-header__nav-list">
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href aria-label="xxxx, current page" aria-current="page">xxxx</a>
          </li>
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxxxx</a>
          </li>
          <li class="o-header__nav-item">
            <a class="o-header__nav-link o-header__nav-link--primary" href>xxxxxxx xxxx</a>
          </li>
        </ul>
      </nav>

      <nav id="o-header-nav-desktop" class="o-header__row o-header__nav o-header__nav--desktop" role="navigation" aria-label="Main navigation">
        <div class="o-header__container">
          <ul class="o-header__nav-list o-header__nav-list--left">
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href aria-label="xxxx, current page" aria-current="page" id="o-header-link-">xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx x xxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxx x xxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxxxxxxx</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--primary" href id="o-header-link-">xxx xx xxxxx xx</a>
            </li>
          </ul>
          <ul class="o-header__nav-list o-header__nav-list--right">
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--utility" href="https://markets.ft.com/data/portfolio/dashboard">Portfolio</a>
            </li>
            <li class="o-header__nav-item">
              <a class="o-header__nav-link o-header__nav-link--utility" href="https://myaccount.ft.com/details/core/view">My Account</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

Sticky header

Sticky variation of the simple header. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Subbranded header

For Subbrands of the FT, eg Alphaville or Life&Arts, a subheader can be added to mark out their subbrandness. Use the Origami Navigation Service to populate o-header with real navigation data. See the readme for more details.

Status
active
Switch component view

GitHub Repository

Install o-header

If using the Build Service, add o-header@^9.0.0 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-header@^9.0.0".

Help & Support

o-header is maintained directly by the Origami team. If you have any questions about o-header or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com