Primary

Primary Navigation

The Primary Navigation component is an example usage of a Nav and Button component put together to construct a themed version of a site Navigation. More versions and variants of this type of component are possible and will be created in the future.

Note: This component is still in a “prototype” state until it can be tested further. Wherever possible, we will try to keep the core functionality the same going forward and will communicate any potential breaking changes before updating the System.

Usage

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


{% include "@miz/components/navigation/primary/primary.twig" with navigationOptions only %}

See the View and HTML tabs for more detailed examples of code.

Options reference

Options

Param Default Values Description
class miz-masthead String Additional classes appended to the masthead
attributes null Object Attributes to be applied to the masthead
list {} Object Contains an array of items (See List)

List

Structure for the list object. This structure matches the same list object found in the Navs component

To produce one navigation item, you would structure your list object like this:

{
  "list": {
    "items": [
      {
        "link": {
          "text": 'One nav item',
          "href": '#'
        }
      }
    ]
  }
}
{#
  Primary Navigation
  Base Primary Navigation

  @uses Nav, MenuButton

 #}
{%- spaceless %}
  {# Imports #}
    {% from '@miz/components/navs/navs.twig' import Nav as nav %}
    {% from '@miz/components/buttons/buttons.twig' import MenuButton as menuButton %}

  {# Parameters #}
    {% set navigationOptions = _context
      ? _context
      : {} %}

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

    {# Check to see if the _context object has the "items" key #}
    {% if navigationOptions.list is not defined %}
      {% set navigationOptions = navlistOptions %}
    {% endif %}

    {% set navMenuButtonOptions = {
      "class": "miz-button--primary miz-navigation--primary__menu-button",
      "attributes": {
        "data-target": "#primaryNavbarToggler",
        "aria-label": "Open navigation"
      }
    } %}

{% endspaceless -%}

{# Output #}
  <div class="miz-navigation--primary">
    {{- menuButton( navMenuButtonOptions ) -}}
    <div class="miz-navigation--primary__nav collapse" id="primaryNavbarToggler" aria-labelledby="menuButton">
      {{ nav( navigationOptions ) }}
    </div>
  </div>
<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>
{
  "Menu": {
    "Primary": {
      "items": [
        {
          "title": "Home",
          "url": "#"
        },
        {
          "title": "Item 1",
          "url": "#foo"
        },
        {
          "title": "Item 2",
          "url": "#bar"
        }
      ]
    }
  }
}
  • Handle: @miz-primary-navigation
  • Preview:
  • Filesystem Path: fractal/pattern-library/miz/components/navigations/primary/primary.twig
  • Content:
    /**
     *
     * Navigation
     * Primary
     *
     * @todo where should the padding be placed for the nav? In its container?
     * @todo default hover state
     */
    .miz-navigation--primary {
      position: relative;
      background-color: $miz-gold;
      font-weight: $miz-font-weight-bold;
    
      @include layer-spacing($miz-space-s, $miz-space-s);
    
      @include media-breakpoint-up(md) {
        flex-direction: row;
        align-items: center;
        padding: 0;
      }
    }
    
    /**
     *
     * Primary navigation menu button
     *
     */
    .miz-navigation--primary__menu-button {
      @include media-breakpoint-up(md) {
        display: none;
      }
    }
    
    /**
     *
     * Primary navigation
     *
     */
    .miz-navigation--primary__nav {
      @include media-breakpoint-up(md) {
        display: block !important; // Not ideal
      }
    }
    
  • URL: /components/raw/miz-primary-navigation/_primary.scss
  • Filesystem Path: fractal/pattern-library/miz/components/navigations/primary/_primary.scss
  • Size: 733 Bytes