Headers

Headers

A Header component is a complex combination of many, site-level components. Often it includes site navigation, a masthead and our Mizzou Ribbon.

In the future, many more versions and variants will be produced. These will cater to different theming and departmental needs.

Usage

{% extends "@miz/components/headers/headers.twig" %}

{% set masthead = {
  "title": "Custom site masthead",
  "subtitle": "Example subtitle goes here"
} %}

{% set navigation = {
  "list": {
    "items": [
      {
        "link": {
          "text": "Home",
          "href": "#"
        }
      }, {
        "link": {
          "text": "About",
          "href": "#"
        }
      }, 
      ...
    ]
  }
} %}

See HTML tab for output.

Options reference

Options

There are a few contextual variables available in the head.twig file.

Variable Default Values Description
headerOptions {} Object A simple option that allows you to pass the options objects associated with the three blocks below to set options for those components.

Note: If you extend headers.twig instead of including it, you can do as the example above shows. Simply set the values you need to set, naming each one according to their name: ribbon, masthead or navigation.

Blocks

Each of these blocks can be used to extend and add more content _or_ override it completely. But be careful, that could cause unintended consquences.

Block name Description
header Initial block for placing all content within the header container.
ribbon Containing block for the Ribbon.
masthead Containing block for the site Masthead.
navigation Containing block for the site Navigation.
{# {% extends "components/headers/headers.twig" %} #}

{% set masthead = {
  "title": "Custom site masthead",
  "subtitle": "Example subtitle goes here"
} %}

{% set navigation = {
  "list": {
    "items": [
      {
        "link": {
          "text": "Home",
          "href": "#"
        }
      }, {
        "link": {
          "text": "About",
          "href": "#"
        }
      }, {
        "link": {
          "text": "Dropdown link",
          "href": "#"
        },
        "list": {
          "type": "dropdown",
          "items": [
            {
              "link": {
                "text": "Sub item 1",
                "href": "www.example1.com"
              }
            }, {
              "link": {
                "text": "Sub item 2",
                "href": "www.example2.com"
              }
            }
          ]
        }
      }
    ]
  }
} %}

{% include "components/headers/headers.twig" %}
<header class="miz-header">

    <div class="miz-flex-row miz-fill--black">
        <div class="miz-container">

            <div class="miz-ribbon">

                <div class="miz-ribbon__signature">
                    <div class="mu-sig-24 reverse">
                        <p class="logo"><a href="http://missouri.edu">MU Logo</a></p>
                        <h1 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h1>
                    </div>
                </div>

                <div class="miz-ribbon__search">

                    <form class="miz-input-group" action="/search/" method="get">
                        <label for="search-input" class="sr-only">Search</label>
                        <input type="text" class="miz-input" id="search-input" placeholder="Search this site" name="q" />

                        <button class="miz-button miz-button--icon miz-button--primary miz-button--small miz-button--square-sm miz-input-group__button" type="submit">
    
  <i class="miz-icon material-icons miz-icon--button miz-icon--md">search</i>


  </button>

                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="miz-flex-row miz-fill--white">
        <div class="miz-container">

            <div class="miz-masthead" role="banner">
                <h1 class="miz-masthead__title">
                    <a title="Custom site masthead" href="/">Custom site masthead</a>
                </h1>
                <p class="miz-masthead__subtitle">Example subtitle goes here</p>
            </div>
        </div>
    </div>

    <div class="miz-flex-row miz-fill--gold">
        <div class="miz-container">
            <div class="miz-navigation--primary">

                <button class="miz-button miz-button--icon navbar-toggler miz-button--primary miz-navigation--primary__menu-button" type="button" id="menuButton" data-target="#primaryNavbarToggler" data-toggle="collapse" aria-label="Open navigation" aria-expanded="false"
                    aria-haspopup="true" aria-controls="primaryNavbarToggler">
    
  <i class="miz-icon material-icons miz-icon--button miz-icon miz-icon--md miz-svg--black">menu</i>


  </button>

                <div class="miz-navigation--primary__nav collapse" id="primaryNavbarToggler" aria-labelledby="menuButton">
                    <nav class="miz-nav">

                        <ul class="miz-nav__list">

                            <li class="miz-nav__list-item">
                                <a class="miz-nav__link" href="#">Home</a>
                            </li>

                            <li class="miz-nav__list-item">
                                <a class="miz-nav__link" href="#">About</a>
                            </li>

                            <li class="miz-nav__list-item dropdown">
                                <a class="miz-nav__link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>

                                <ul class="miz-dropdown__menu dropdown-menu">

                                    <li class="miz-nav__list-item">
                                        <a class="miz-nav__link" href="www.example1.com">Sub item 1</a>
                                    </li>

                                    <li class="miz-nav__list-item">
                                        <a class="miz-nav__link" href="www.example2.com">Sub item 2</a>
                                    </li>
                                </ul>

                            </li>
                        </ul>

                    </nav>

                </div>
            </div>
        </div>
    </div>

</header>
/* No context defined for this component. */