Navs: Base

Navs

A Nav is a basic component. It is designed to be a building block for larger, more complex navigational systems, but can also be used for smaller needs such as local navigation or in page navs.

The Nav provides a <nav> element. If you’re creating a semantic “nav” then you should consider just creating a list of links, using an unordered list, or simply a collection of anchor tags.

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

Twig

{# Import the Nav component #}
{% from "@miz/components/navs/navs.twig" import Nav as nav %}

{# Set options #}
{% set navOptions = {
  "list": {
    "items": [
      {
        "link": {
          "text":     "Navigation item 1",
          "href":     "/item-1"
        }
      },{
        "link": {
          "text":     "Navigation item 2",
          "href":     "/item-2"
        }
      },{
        "link": {
          "text":     "Navigation item 3",
          "href":     "/item-3"
        }
      }
    ]
  }
} %}

{# Call the nav #}
{{ nav( navOptions ) }}

HTML

<nav class="miz-nav">
  <ul class="miz-nav__list">
    <li class="miz-nav__list-item">
      <a class="miz-nav__link" href="/item-1">Navigation item 1</a>
    </li>

    <li class="miz-nav__list-item">
      <a class="miz-nav__link" href="/item-2">Navigation item 2</a>
    </li>

    <li class="miz-nav__list-item">
      <a class="miz-nav__link" href="/item-3">Navigation item 3</a>
    </li>
  </ul>
</nav>

Macro reference

Note: Hashes are defined by a list of keys and values separated by a comma (,) and wrapped with curly braces ({}). If you are passing a value down from PHP or another higher level you should pass it as an associative array and not as a true Object.

Options

Variable Default Values Description
class miz-nav String Additional classes appended to the nav
attributes null Hash Attributes to be applied to the nav
list null Array See structure in NavList below
Variable Default Values Description
class miz-nav__list String Additional classes appended to the nav
attributes null Hash Attributes to be applied to the nav
items null Array See structure in NavItem below
Variable Default Values Description
class miz-nav__list-item String Additional classes appended to the nav
attributes null Hash Attributes to be applied to the nav
link null Hash See NavLink below
list null Array A way to add a single level dropdown list. See structure in NavList above
list.type null String EXPERIMENTAL A way to detail how the list should be handled. Current options are ‘dropdown’ and ‘expand’ but still being worked on.
Variable Default Values Description
class miz-nav__link String Additional classes appended to the link
attributes null Hash Attributes to be applied to the link
text No Text String Text to appear inside the link
href # String href attribute for the link

Note: * A Hash is an associative array.

{% from "@miz/components/navs/navs.twig" import Nav as nav %}

{% set navOptions = {
  "list": {
    "items": [
      {
        "link": {
          "text":     "Navigation item 1",
          "href":     "#"
        }
      },{
        "link": {
          "text":     "Navigation item 2",
          "href":     "#"
        }
      },{
        "link": {
          "text":     "Navigation item 3",
          "href":     "#"
        }
      }
    ]
  }
} %}

{{ nav( navOptions ) }}
<nav class="miz-nav">

    <ul class="miz-nav__list">

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

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

        <li class="miz-nav__list-item">
            <a class="miz-nav__link" href="#">Navigation item 3</a>
        </li>
    </ul>

</nav>
/* No context defined for this component. */
  • Content:
    /**
     *
     * Nav
     *
     */
    .miz-nav {
      position: relative;
    }
    
    // Nav List element
    .miz-nav__list {
      padding-inline-start: 0;
      padding: 0; // Explicitly set to fix offset issue in IE11
      list-style: none;
      margin-bottom: 0;
    
      @include media-breakpoint-up(md) {
        display: flex; // No issues with IE11
        flex-direction: row;
        justify-content: flex-start;
      }
    
      &--end {
        justify-content: flex-end;
      }
    }
    
    // Nav List item element
    .miz-nav__list-item {
      flex: 0 1 auto;
    }
    
    // Nav link
    .miz-nav__link {
      display: block;
      padding: $miz-space-inset-default;
      text-decoration: none;
      border-bottom: 2px solid transparent;
    
      &:hover {
        border-bottom: 2px solid;
      }
    }
    
  • URL: /components/raw/miz-navs/_navs.scss
  • Filesystem Path: fractal/pattern-library/miz/components/navs/_navs.scss
  • Size: 679 Bytes