<ul class="secondary-navigation-children secondary-navigation-children--">
</ul>
<ul class="secondary-navigation-children secondary-navigation-children--{{ siteUnit }}">
    {% for item in items %}
        <li class="secondary-navigation-children__item">
            <a
                class="
                    secondary-navigation-children__item-link
                    {{ item.isActive ? 'secondary-navigation-children__item-link--active' }}
                    {{ item.isDescendantActive ? 'secondary-navigation-children__item-link--active-trail' }}
                "
                href="{{ item.url }}">{{ item.title }}
            </a>
            {% if item.isDescendantActive or item.isActive %}
                {% include 'partials/navigation/secondary-navigation-children/secondary-navigation-children.twig' with { items: item.children } %}
            {% endif %}
        </li>
    {% endfor %}
</ul>
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  }
}
  • Content:
    .secondary-navigation-children {
        --linkColor: var(--navy);
        --linkHoverColor: var(--purple);
        --borderColor: var(--blue);
    
        &__item-link {
            @include bodySmall;
            border-top: 1px solid var(--borderColor);
            color: var(--linkColor);
            display: block;
            padding: 1rem 2.5rem;
            position: relative;
            text-decoration: none;
    
            &--active {
                font-weight: bold;
            }
    
            &:focus,
            &:hover,
            &:active {
                color: var(--linkHoverColor);
                text-decoration: underline;
            }
        }
    
        &__item &__item {
            .secondary-navigation-children__item-link {
                padding-left: 5rem;
            }
        }
    
        &__item &__item &__item {
            .secondary-navigation-children__item-link {
                padding-left: 7.5rem;
            }
        }
    
        &__item &__item &__item &__item {
            .secondary-navigation-children__item-link {
                padding-left: 10rem;
            }
        }
    }
    
  • URL: /components/raw/secondary-navigation-children/secondary-navigation-children.scss
  • Filesystem Path: patterns/partials/navigation/secondary-navigation-children/secondary-navigation-children.scss
  • Size: 988 Bytes
  • Handle: @secondary-navigation-children
  • Preview:
  • Filesystem Path: patterns/partials/navigation/secondary-navigation-children/secondary-navigation-children.twig

No notes defined.