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.
{% spaceless %}
{# Parameters #}
  {% set headerOptions = _context
    ? _context
    : {} %}

{# Variables #}
  {% set ribbonOptions = headerOptions.ribbon %}
  {% set mastheadOptions = headerOptions.masthead %}
  {% set navigationOptions = headerOptions.navigation %}

{% endspaceless -%}

{# Output #}
  <header class="miz-header">

    {# Ribbon #}
    {% block ribbon %}
      <div class="miz-flex-row miz-fill--black">
        <div class="miz-container">
          {% include "components/ribbons/ribbons.twig" with ribbonOptions only %}
        </div>
      </div>
    {% endblock ribbon %}

    {# Masthead #}
    {% block masthead %}
      <div class="miz-flex-row miz-fill--white">
        <div class="miz-container">
          {% include "components/masthead/masthead.twig" with mastheadOptions only %}
        </div>
      </div>
    {% endblock masthead %}

    {# Primary navigation #}
    {% block navigation %}
      <div class="miz-flex-row miz-fill--gold">
        <div class="miz-container">
          {% include "components/navigations/primary/primary.twig" with navigationOptions only %}
        </div>
      </div>
    {% endblock navigation %}

  </header>
<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="" href="/">Default site name</a>
                </h1>
            </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" id="navigation">

                        <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="#">Item 1</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 Item</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. */