<nav role="navigation" class="vgr-secondary-navigation" aria-labelledby="secondary-navigation-title">
    <div class="vgr-secondary-navigation__header">
        <a href="/" id="secondary-navigation-title" class="vgr-secondary-navigation__header-title">Praktisk information</a>
    </div>
    <div class="vgr-secondary-navigation__content">
        <ul>

            <li>
                <a href="" data-selected data-isexpanded>Allmänna kurser</a>

                <ul>

                    <li>
                        <a href="#">Plus</a>
                    </li>

                    <li>
                        <a href="#">Grafisk</a>
                    </li>

                    <li>
                        <a href="#">Friluftsliv</a>
                    </li>

                    <li>
                        <a href="#">Silver och smycke</a>
                    </li>

                    <li>
                        <a href="#">Test</a>
                    </li>

                    <li>
                        <a href="#">Spa och hälsa</a>
                    </li>

                </ul>

            </li>

            <li>
                <a href="#" data-haschildren>Särskilda kurser</a>

            </li>

            <li>
                <a href="#" data-haschildren>Sommarkurser</a>

            </li>

            <li>
                <a href="#" data-haschildren>Distanskurser</a>

            </li>

        </ul>
    </div>
</nav>
<nav role="navigation" class="vgr-secondary-navigation" aria-labelledby="secondary-navigation-title">
  <div class="vgr-secondary-navigation__header">
    <a href="{{ url }}" id="secondary-navigation-title" class="vgr-secondary-navigation__header-title">{{ title }}</a>
  </div>
  <div class="vgr-secondary-navigation__content">
    <ul>
      {% for item in items %}
        <li>
          <a href="{{ item.url }}"{% if item.selected %} data-selected{% if item.items %} data-isexpanded{% endif %}{% else %}{% if item.items %} data-haschildren{% endif %}{% endif %}>{{ item.title }}</a>
          {% if item.selected and item.items %}
            <ul>
            {% for item2 in item.items %}
              <li>
                <a href="{{ item2.url }}">{{ item2.title }}</a>
              </li>
            {% endfor %}
            </ul>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>
{
  "title": "Praktisk information",
  "url": "/",
  "items": [
    {
      "title": "Allmänna kurser",
      "selected": true,
      "items": [
        {
          "title": "Plus",
          "url": "#"
        },
        {
          "title": "Grafisk",
          "url": "#"
        },
        {
          "title": "Friluftsliv",
          "url": "#"
        },
        {
          "title": "Silver och smycke",
          "url": "#"
        },
        {
          "title": "Test",
          "url": "#"
        },
        {
          "title": "Spa och hälsa",
          "url": "#"
        }
      ]
    },
    {
      "title": "Särskilda kurser",
      "url": "#",
      "items": [
        {
          "title": "Plus",
          "url": "#"
        }
      ]
    },
    {
      "title": "Sommarkurser",
      "url": "#",
      "items": [
        {
          "title": "Plus",
          "url": "#"
        }
      ]
    },
    {
      "title": "Distanskurser",
      "url": "#",
      "items": [
        {
          "title": "Plus",
          "url": "#"
        }
      ]
    }
  ]
}
  • Content:
    .vgr-secondary-navigation {
        display:none;
        @media screen and (min-width: $medium) {
            display:block;
        }
    
      &__header {
        background: #005c95;
        color: #fff;
      }
    }
    
    .vgr-secondary-navigation__content a {
        position:relative;
        &:focus {
            text-decoration:underline;
        }
        &[data-selected]:focus {
            color:#000;
        }
    }
    
    .vgr-secondary-navigation__content [data-hasChildren]:after,
    .vgr-secondary-navigation__content [data-isExpanded]:after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform:translateY(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: .35rem 0 .35rem .35rem;
        border-color: transparent transparent transparent #222;
    }
    
  • URL: /components/raw/secondary-navigation/_secondary-navigation.scss
  • Filesystem Path: components/navigation/secondary-navigation/_secondary-navigation.scss
  • Size: 744 Bytes
  • Handle: @secondary-navigation
  • Preview:
  • Filesystem Path: components/navigation/secondary-navigation/secondary-navigation.html
  • Referenced by (1): @page

Sidebar Navigation