Adminportal MLU

Subnavigation @sub-navigation

Abgenommen

Subnavigation Ebene 1 @sub-navigation

HTML
Kontext

<!-- Subnavigation Ebene 1 -->
<nav class="sub-navigation js-sub-navigation" aria-label="Unternavigation">
  <ul class="sub-navigation__list">
    <li class="sub-navigation__list-item sub-navigation__list-item--u-philfak3">
      <a class="sub-navigation__link" href="#">Studium</a>
    </li>
    <li class="sub-navigation__list-item sub-navigation__list-item--u-philfak3">
      <a class="sub-navigation__link" href="#">Forschung</a>
    </li>
    <li class="sub-navigation__list-item sub-navigation__list-item--u-philfak3">
      <a class="sub-navigation__link" href="#">Mitarbeiter*innen</a>
    </li>
    <li class="sub-navigation__list-item sub-navigation__list-item--u-philfak3">
      <a class="sub-navigation__link" href="#">Arbeitsbereiche</a>
    </li>
    <li class="sub-navigation__list-item sub-navigation__list-item--u-philfak3">
      <a class="sub-navigation__link" href="#">Wirtschaftswissenschaften</a>
    </li>
  </ul>
</nav>

{
  "goBackLink": null,
  "list": [
    {
      "label": "Studium",
      "link": "#",
      "unit": "philfak3"
    },
    {
      "label": "Forschung",
      "link": "#",
      "unit": "philfak3"
    },
    {
      "label": "Mitarbeiter*innen",
      "link": "#",
      "unit": "philfak3"
    },
    {
      "label": "Arbeitsbereiche",
      "link": "#",
      "unit": "philfak3"
    },
    {
      "label": "Wirtschaftswissenschaften",
      "link": "#",
      "unit": "philfak3"
    }
  ]
}

Subnavigation Ebene 2 @sub-navigation--level2

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Subnavigation Ebene 2 -->
<nav class="sub-navigation js-sub-navigation" aria-label="Unternavigation">
  <a class="sub-navigation__back-link" href="#"><span class="sub-navigation__back-icon"><svg class="icon icon--back" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-back"></use>
</svg></span><span class="sub-navigation__back-text">Institut</span></a>
  <ul class="sub-navigation__list">
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Studium</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Forschung</a>
    </li>
    <li class="sub-navigation__list-item sub-navigation__list-item--active sub-navigation__list-item--u-philfak3">
      <a class="sub-navigation__link sub-navigation__link--active" href="#">Arbeitsbereiche</a>
      <ul class="sub-navigation__list">
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Soziokulturelle Bedingungen</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link sub-navigation__link--active" href="#">Systematische Erziehungswissenschaft</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Historische Erziehungswissenschaft</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Weitere</a>
        </li>
      </ul>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Mitarbeiter*innen</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Wirtschaftswissenschaften</a>
    </li>
  </ul>
</nav>

{
  "goBackLink": {
    "label": "Institut",
    "link": "#"
  },
  "list": [
    {
      "label": "Studium",
      "link": "#"
    },
    {
      "label": "Forschung",
      "link": "#"
    },
    {
      "label": "Arbeitsbereiche",
      "link": "#",
      "active": true,
      "unit": "philfak3",
      "sublist": [
        {
          "label": "Soziokulturelle Bedingungen",
          "link": "#"
        },
        {
          "label": "Systematische Erziehungswissenschaft",
          "link": "#",
          "active": true
        },
        {
          "label": "Historische Erziehungswissenschaft",
          "link": "#"
        },
        {
          "label": "Weitere",
          "link": "#"
        }
      ]
    },
    {
      "label": "Mitarbeiter*innen",
      "link": "#"
    },
    {
      "label": "Wirtschaftswissenschaften",
      "link": "#"
    }
  ]
}

Subnavigation Ebene 2 mit scroll @sub-navigation--level2-scroll

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Subnavigation Ebene 2 mit scroll -->
<nav class="sub-navigation js-sub-navigation" aria-label="Unternavigation">
  <a class="sub-navigation__back-link" href="#"><span class="sub-navigation__back-icon"><svg class="icon icon--back" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-back"></use>
</svg></span><span class="sub-navigation__back-text">Institut für Pädagogik</span></a>
  <ul class="sub-navigation__list">
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Studium</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Forschung</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Mitarbeiter*innen</a>
    </li>
    <li class="sub-navigation__list-item sub-navigation__list-item--active sub-navigation__list-item--u-philfak3">
      <a class="sub-navigation__link sub-navigation__link--active" href="#">Arbeitsbereiche</a>
      <ul class="sub-navigation__list">
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Erziehungswissenschaft mit dem Schwerpunkt soziokulturelle Bedingungen von Erziehung und Bildung</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link sub-navigation__link--active" href="#">Systematische Erziehungswissenschaft</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Historische Erziehungswissenschaft</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Weitere</a>
        </li>
      </ul>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Wirtschaftswissenschaften</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Studium</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Forschung</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Mitarbeiter*innen</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Wirtschaftswissenschaften</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Studium</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Forschung</a>
    </li>
  </ul>
</nav>

{
  "goBackLink": {
    "label": "Institut für Pädagogik",
    "link": "#"
  },
  "list": [
    {
      "label": "Studium",
      "link": "#"
    },
    {
      "label": "Forschung",
      "link": "#"
    },
    {
      "label": "Mitarbeiter*innen",
      "link": "#"
    },
    {
      "label": "Arbeitsbereiche",
      "link": "#",
      "active": true,
      "unit": "philfak3",
      "sublist": [
        {
          "label": "Erziehungswissenschaft mit dem Schwerpunkt soziokulturelle Bedingungen von Erziehung und Bildung",
          "link": "#"
        },
        {
          "label": "Systematische Erziehungswissenschaft",
          "link": "#",
          "active": true
        },
        {
          "label": "Historische Erziehungswissenschaft",
          "link": "#"
        },
        {
          "label": "Weitere",
          "link": "#"
        }
      ]
    },
    {
      "label": "Wirtschaftswissenschaften",
      "link": "#"
    },
    {
      "label": "Studium",
      "link": "#"
    },
    {
      "label": "Forschung",
      "link": "#"
    },
    {
      "label": "Mitarbeiter*innen",
      "link": "#"
    },
    {
      "label": "Wirtschaftswissenschaften",
      "link": "#"
    },
    {
      "label": "Studium",
      "link": "#"
    },
    {
      "label": "Forschung",
      "link": "#"
    }
  ]
}

Subnavigation Intranet @sub-navigation--intranet

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Subnavigation Intranet -->
<nav class="sub-navigation js-sub-navigation" aria-label="Unternavigation">
  <a class="sub-navigation__back-link" href="#"><span class="sub-navigation__back-icon"><svg class="icon icon--back" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-back"></use>
</svg></span><span class="sub-navigation__back-text">Aktuelles</span></a>
  <ul class="sub-navigation__list">
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">ZUV Informationen</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Meldungen</a>
    </li>
    <li class="sub-navigation__list-item sub-navigation__list-item--active sub-navigation__list-item--u-intern">
      <a class="sub-navigation__link sub-navigation__link--active" href="#">IT-Info</a>
      <ul class="sub-navigation__list">
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Störungsmelder</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link sub-navigation__link--active" href="#">IT-Support</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Dokumentation und Hilfe</a>
        </li>
        <li class="sub-navigation__list-item">
          <a class="sub-navigation__link" href="#">Netzwerke</a>
        </li>
      </ul>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Veranstaltungen</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Weiterbildungen</a>
    </li>
    <li class="sub-navigation__list-item">
      <a class="sub-navigation__link" href="#">Stellenangebote</a>
    </li>
  </ul>
</nav>

{
  "goBackLink": {
    "label": "Aktuelles",
    "link": "#"
  },
  "list": [
    {
      "label": "ZUV Informationen",
      "link": "#"
    },
    {
      "label": "Meldungen",
      "link": "#"
    },
    {
      "label": "IT-Info",
      "link": "#",
      "active": true,
      "unit": "intern",
      "sublist": [
        {
          "label": "Störungsmelder",
          "link": "#"
        },
        {
          "label": "IT-Support",
          "link": "#",
          "active": true
        },
        {
          "label": "Dokumentation und Hilfe",
          "link": "#"
        },
        {
          "label": "Netzwerke",
          "link": "#"
        }
      ]
    },
    {
      "label": "Veranstaltungen",
      "link": "#"
    },
    {
      "label": "Weiterbildungen",
      "link": "#"
    },
    {
      "label": "Stellenangebote",
      "link": "#"
    }
  ]
}

Subnavigation @sub-navigation

# Subnavigation Ebene 1 @sub-navigation

# Subnavigation Ebene 2 @sub-navigation--level2

# Subnavigation Ebene 2 mit scroll @sub-navigation--level2-scroll

# Subnavigation Intranet @sub-navigation--intranet

Subnavigation Ebene 1 @sub-navigation

Subnavigation Ebene 2 @sub-navigation--level2

Subnavigation Ebene 2 mit scroll @sub-navigation--level2-scroll

Subnavigation Intranet @sub-navigation--intranet