ClearFractal

Primary Navigation: Crayola Red 

<nav class="PrimaryNavigation PrimaryNavigation--crayola-red" aria-label="Primary Navigation" data-component="PrimaryNavigation">
    <a href="#offcanvas" class="PrimaryNavigation-menu" aria-hidden="true">Menu</a>
    <ul class="PrimaryNavigation-list">
        <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link is-active ">Case Studies</a></li>
        <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Team</a></li>
        <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Posts</a></li>
        <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Events</a></li>
        <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Contact</a></li>
    </ul>
</nav>
 
<nav class="PrimaryNavigation{% if primaryNavModifiers %} PrimaryNavigation{{ primaryNavModifiers|join(' PrimaryNavigation') }}{% endif %}" aria-label="Primary Navigation" data-component="PrimaryNavigation">
    <a href="#offcanvas" class="PrimaryNavigation-menu" aria-hidden="true">Menu</a>
    <ul class="PrimaryNavigation-list">
        {% for primaryNavlink in primaryNavlinks %}
        <li class="PrimaryNavigation-listItem"><a href="{{primaryNavlink.url}}" class="PrimaryNavigation-link{% if primaryNavlink.primaryActive %} is-active {% endif %}">{{ primaryNavlink.title }}</a></li>
        {% endfor %}
    </ul>
</nav>
 
{
  "primaryNavlinks": [
    {
      "title": "Case Studies",
      "url": "#",
      "primaryActive": true
    },
    {
      "title": "Team",
      "url": "#"
    },
    {
      "title": "Posts",
      "url": "#"
    },
    {
      "title": "Events",
      "url": "#"
    },
    {
      "title": "Contact",
      "url": "#"
    }
  ],
  "primaryNavModifiers": [
    "--crayola-red"
  ]
}

There are no notes for this item.