<div class="modal fade" id="nav-mobile" tabindex="-1" role="dialog" aria-labelledby="nav-mobile-label" aria-hidden="true">
    <div class="modal-dialog my-0 mx-auto" role="document">
        <div class="modal-content border-0 rounded-0">
            <div class="modal-header justify-content-end">
                <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="nav-mobile" aria-expanded="false" aria-label="Dölj meny">
                    <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                </button>
            </div>
            <ul class="mobile-nav mobile-nav-root border-0 nav-collapse font-size-sm nav-undecorated">
                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Om</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Undervisning</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Forskning</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Kontakt</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Bibliotek</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Fakulteter</a>
                        <a href="#sm-lu-fakulteter" class="mobile-nav-toggle collapsed" data-bs-target="#sm-lu-fakultetercollapsed" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sm-lu-fakulteter" role="button">

                            <span class="collapse-show">
                                <i class="fal fa-plus-circle"></i>
                            </span>
                            <span class="collapse-hide">
                                <i class="fal fa-minus-circle"></i>
                            </span>

                        </a>
                    </div>
                    <ul class="mobile-nav collapse" id="sm-lu-fakultetercollapsed">
                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Campus Helsingborg</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Ekonomihögskolan</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Humaniora och teologi</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Juridiska fakulteten</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Konstnärliga fakulteten i Malmö</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">LTH | Lunds tekniska högskola</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Medicinska fakulteten</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Naturvetenskapliga fakulteten</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Samhällsvetenskapliga fakulteten</a>
                            </div>
                        </li>

                    </ul>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Info för</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Lyssna</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">English</a>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</div>

<header class="header nav-undecorated">
    <div class="bg-dark d-none d-lg-block">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark font-size-sm p-0 text-white" aria-label="Genvägar">
            <div class="container-fluid mw-xxl py-0">
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <div><a class="nav-link ps-0" href="#">Till naturvetenskapliga fakulteten</a></div>
                    <ul class="navbar-nav flex-row ms-auto">
                        <li class="nav-item">
                            <a class="nav-link px-3" href="../../#.html">
                                Bibliotek
                            </a>
                        </li>
                        <li class="nav-item dropdown dropdown-hover">
                            <a class="nav-link dropdown-toggle px-3" href="#" id="sm-lu-fakulteter" role="button" aria-haspopup="true">
                                Fakulteter <i class="fal fa-chevron-down"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="sm-lu-fakulteter">
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">Campus Helsingborg</a></li>
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">Ekonomihögskolan</a></li>
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">Humaniora och teologi</a></li>
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">Juridiska fakulteten</a></li>
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">Konstnärliga fakulteten i Malmö</a></li>
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">LTH | Lunds tekniska högskola</a></li>
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">Medicinska fakulteten</a></li>
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">Naturvetenskapliga fakulteten</a></li>
                                <li class="text-primary"><a class="dropdown-item" href="../../#.html">Samhällsvetenskapliga fakulteten</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3" href="../../#.html">
                                Info för
                            </a>
                        </li>
                    </ul>
                    <ul class="navbar-nav flex-row ms-5">
                        <li class="nav-item">
                            <a class="nav-link px-3" href="../../#.html">
                                <i class="fal fa-volume"></i>
                                Lyssna
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3" href="../../#.html">
                                <i class="fal fa-globe"></i>
                                English
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="container-fluid mw-xxl">
        <div class="row m-0 py-3 py-lg-5">
            <div class="col p-0">
                <div class="d-flex justify-content-between align-items-center h-100 text-primary">
                    <div class="title-with-sub">
                        <h1 class="">Biologiska institutionen</h1>

                        <div>NATURVETENSKAPLIGA FAKULTETEN</div>
                    </div>
                    <div class="header-logo header-logo-institution  header-logo-lu flex-grow-1 flex-lg-grow-0 d-none d-xl-block">
                        <a href="#" title="Lunds Tekniska Högskola | Lunds universitet" class="d-block">
                            <img src="../../images/logo/logo_lu_small@1x.png" srcset="../../images/logo/logo_lu_small@1x.png 1x, ../../images/logo/logo_lu_small@2x.png 2x" alt="Lunds Tekniska Högskola | Lunds universitet" class=" mw-100">

                        </a>
                    </div>
                    <div class="flex-shrink-1 flex-lg-shrink-0 flex-grow-0 d-flex d-xl-none flex-column justify-content-between h-100 mh-120">
                        <div class="h-lg-auto flex-column justify-content-between align-items-end font-size-sm font-size-sm-base flex-grow-0">
                            <div class="d-flex text-center h-100 h-lg-auto align-items-center d-lg-none flex-nowrap">
                                <nav class="nav" aria-label="Sök">
                                    <div class="nav-item">
                                        <a class="ms-2 p-1 d-block nav-undecorated" href="#header-search-form" data-bs-toggle="collapse" aria-controls="header-search-form" aria-expanded="false" aria-label="Visa och dölj sökfölt">
                                            <i class="fal fa-search"></i><br>Sök </a>
                                    </div>
                                </nav>
                                <div>
                                    <a class="ms-2 p-1 d-block nav-undecorated" href="#english">
                                        <i class="fal fa-globe"></i><br>English </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <nav aria-label="Meny och sök">
        <div class="d-none d-xl-block font-size-xl-lg font-weight-light bg-plaster-50">
            <div class="mw-xxl d-flex container-fluid justify-content-between align-items-center ">
                <ul class="nav nav-header-main">
                    <li class="nav-item  active">
                        <a href="om.html" class="nav-link text-nowrap  active" id="dropdown-om" aria-haspopup="true">Om</a>
                    </li>
                    <li class="nav-item  ">
                        <a href="undervisning.html" class="nav-link text-nowrap  " id="dropdown-undervisning" aria-haspopup="true">Undervisning</a>
                    </li>
                    <li class="nav-item  ">
                        <a href="forskning.html" class="nav-link text-nowrap  " id="dropdown-forskning" aria-haspopup="true">Forskning</a>
                    </li>
                    <li class="nav-item  ">
                        <a href="kontakt.html" class="nav-link text-nowrap  " id="dropdown-kontakt" aria-haspopup="true">Kontakt</a>
                    </li>
                </ul>
                <form class="flex-xl-grow-1 header-search-container--institution">
                    <div class="input-group input-group-round input-group-sm w-100 flex" role="search">
                        <input type="search" class="form-control form-control-sm border-right-0" aria-label="Sök" id="header-search-field">
                        <button class="btn btn-primary px-2 lh-sm" type="submit">
                            <span class="me-2">Sök</span>
                            <i class="fal fa-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </nav>

    <div class="modal fade" id="nav-mobile--om" tabindex="-1" role="dialog" aria-labelledby="nav-mobile--om-label" aria-hidden="true">
        <div class="modal-dialog my-0 mx-auto" role="document">
            <div class="modal-content border-0 rounded-0">
                <div class="modal-header justify-content-end">
                    <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="nav-mobile--om" aria-expanded="false" aria-label="Dölj meny">
                        <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                    </button>
                </div>
                <ul class="mobile-nav mobile-nav-root border-0 nav-collapse font-size-sm nav-undecorated">
                    <li class="mobile-nav-item">
                        <div class="mobile-nav-container">
                            <a href="#" class="nav-link">Om <span class="ms-1"><i class="fal fa-chevron-circle-right  fa-sm"></i>
                                </span></a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <div class="modal fade" id="nav-mobile--undervisning" tabindex="-1" role="dialog" aria-labelledby="nav-mobile--undervisning-label" aria-hidden="true">
        <div class="modal-dialog my-0 mx-auto" role="document">
            <div class="modal-content border-0 rounded-0">
                <div class="modal-header justify-content-end">
                    <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="nav-mobile--undervisning" aria-expanded="false" aria-label="Dölj meny">
                        <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                    </button>
                </div>
                <ul class="mobile-nav mobile-nav-root border-0 nav-collapse font-size-sm nav-undecorated">
                    <li class="mobile-nav-item">
                        <div class="mobile-nav-container">
                            <a href="#" class="nav-link">Undervisning <span class="ms-1"><i class="fal fa-chevron-circle-right  fa-sm"></i>
                                </span></a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <div class="modal fade" id="nav-mobile--forskning" tabindex="-1" role="dialog" aria-labelledby="nav-mobile--forskning-label" aria-hidden="true">
        <div class="modal-dialog my-0 mx-auto" role="document">
            <div class="modal-content border-0 rounded-0">
                <div class="modal-header justify-content-end">
                    <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="nav-mobile--forskning" aria-expanded="false" aria-label="Dölj meny">
                        <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                    </button>
                </div>
                <ul class="mobile-nav mobile-nav-root border-0 nav-collapse font-size-sm nav-undecorated">
                    <li class="mobile-nav-item">
                        <div class="mobile-nav-container">
                            <a href="#" class="nav-link">Forskning <span class="ms-1"><i class="fal fa-chevron-circle-right  fa-sm"></i>
                                </span></a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <div class="modal fade" id="nav-mobile--kontakt" tabindex="-1" role="dialog" aria-labelledby="nav-mobile--kontakt-label" aria-hidden="true">
        <div class="modal-dialog my-0 mx-auto" role="document">
            <div class="modal-content border-0 rounded-0">
                <div class="modal-header justify-content-end">
                    <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="nav-mobile--kontakt" aria-expanded="false" aria-label="Dölj meny">
                        <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                    </button>
                </div>
                <ul class="mobile-nav mobile-nav-root border-0 nav-collapse font-size-sm nav-undecorated">
                    <li class="mobile-nav-item">
                        <div class="mobile-nav-container">
                            <a href="#" class="nav-link">Kontakt <span class="ms-1"><i class="fal fa-chevron-circle-right  fa-sm"></i>
                                </span></a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <div class="mobile-nav-bar font-size-sm font-size-sm-base d-xl-none">
        <nav class="nav ms-2 flex-grow-1" aria-label="Meny">
            <div class="nav-item active"><button data-bs-target="#nav-mobile--om" class="btn nav-link px-2 rounded-0 border-0" data-bs-toggle="modal" aria-controls="nav-mobile--om" aria-expanded="false" aria-label="Visa meny">Om</button></div>
            <div class="nav-item"><button data-bs-target="#nav-mobile--undervisning" class="btn nav-link px-2 rounded-0 border-0" data-bs-toggle="modal" aria-controls="nav-mobile--undervisning" aria-expanded="false" aria-label="Visa meny">Undervisning</button></div>
            <div class="nav-item"><button data-bs-target="#nav-mobile--forskning" class="btn nav-link px-2 rounded-0 border-0" data-bs-toggle="modal" aria-controls="nav-mobile--forskning" aria-expanded="false" aria-label="Visa meny">Forskning</button></div>
            <div class="nav-item"><button data-bs-target="#nav-mobile--kontakt" class="btn nav-link px-2 rounded-0 border-0" data-bs-toggle="modal" aria-controls="nav-mobile--kontakt" aria-expanded="false" aria-label="Visa meny">Kontakt</button></div>
        </nav>
        <nav class="nav" aria-label="Huvud meny">
            <div class="nav-item">
                <button class="btn nav-link rounded-0 border-0" data-bs-target="#nav-mobile" data-bs-toggle="modal" aria-controls="nav-mobile" aria-expanded="false" aria-label="Visa meny"><i class="fal fa-bars"></i> Mer</button>
            </div>
        </nav>
    </div>

    <div class="header-search-form collapse collapse-lg pb-2 px-2" id="header-search-form">
        <form class="form-inline px-lg-3">
            <div class="input-group input-group-round input-group-sm w-100 flex" role="search">
                <input type="search" aria-label="Sök på webbplatsen" class="form-control form-control-sm border-right-0" id="header-search-field-mobile">
                <button class="btn btn-primary px-2 lh-sm" type="submit">
                    <span class="me-2">Sök</span>
                    <i class="fal fa-search"></i>
                </button>
            </div>
        </form>
    </div>

</header>
{{render (concat "@" mobile-nav) }}
<header class="header nav-undecorated">
  {{render "@header-navbar" header-navbar}}
  <div class="container-fluid mw-xxl">
    <div class="row m-0 py-3 py-lg-5">
      <div class="col p-0">
        <div class="d-flex justify-content-between align-items-center h-100 text-primary">
          <div{{#if subheading}} class="title-with-sub"{{/if}}>
            {{render '@heading' title}}
            {{#if subheading}}
            <div>{{subheading}}</div>
            {{/if}}
          </div>
          <div class="header-logo header-logo-institution {{ modifiers logo-modifiers }} flex-grow-1 flex-lg-grow-0 d-none d-xl-block">
            <a href="{{ logo.link }}" title="{{ logo.title }}" class="d-block">
              {{render "@image" logo}}
            </a>
          </div>
          <div class="flex-shrink-1 flex-lg-shrink-0 flex-grow-0 d-flex d-xl-none flex-column justify-content-between h-100 mh-120">
            <div class="h-lg-auto flex-column justify-content-between align-items-end font-size-sm font-size-sm-base flex-grow-0">
              <div class="d-flex text-center h-100 h-lg-auto align-items-center d-lg-none flex-nowrap">
                <nav class="nav" aria-label="Sök">
                  <div class="nav-item">
                    <a class="ms-2 p-1 d-block nav-undecorated" href="#header-search-form" data-bs-toggle="collapse" aria-controls="header-search-form" aria-expanded="false" aria-label="Visa och dölj sökfölt">
                      <i class="fal fa-search"></i><br>Sök </a>
                  </div>
                </nav>
                <div>
                  <a class="ms-2 p-1 d-block nav-undecorated" href="#english">
                    <i class="fal fa-globe"></i><br>English </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{render '@header-dropdowns--institution' nav}}
  {{render '@mobile-navbar' mobile-navbar}}
  {{render '@header-search-form'}}
</header>
{
  "_full-screen": true,
  "mobile-nav-id": "nav-mobile",
  "_site": "institution",
  "title": {
    "content": "Biologiska institutionen",
    "level": 1
  },
  "subheading": "NATURVETENSKAPLIGA FAKULTETEN",
  "logo": {
    "src": "/images/logo/logo_lu_small@1x.png",
    "src-2x": "/images/logo/logo_lu_small@2x.png",
    "alt": "Lunds Tekniska Högskola | Lunds universitet",
    "link": "#",
    "title": "Lunds Tekniska Högskola | Lunds universitet",
    "modifiers": [
      "mw-100"
    ]
  },
  "logo-modifiers": [
    "header-logo-lu"
  ],
  "header-navbar": {
    "items": [
      {
        "sm-lu-bibliotek": {
          "key": "sm-lu-bibliotek",
          "title": "Bibliotek",
          "link": "#"
        },
        "sm-lu-fakulteter": {
          "key": "sm-lu-fakulteter",
          "title": "Fakulteter",
          "link": "#",
          "children": {
            "lu-fakultet-campus-helsingborg": {
              "key": "lu-fakultet-campus-helsingborg",
              "title": "Campus Helsingborg",
              "link": "#"
            },
            "lu-fakultet-ekonomihogskolan": {
              "key": "lu-fakultet-ekonomihogskolan",
              "title": "Ekonomihögskolan",
              "link": "#"
            },
            "lu-fakultet-humaniora-och-teologi": {
              "key": "lu-fakultet-humaniora-och-teologi",
              "title": "Humaniora och teologi",
              "link": "#"
            },
            "lu-fakultet-juridiska-fakulteten": {
              "key": "lu-fakultet-juridiska-fakulteten",
              "title": "Juridiska fakulteten",
              "link": "#"
            },
            "lu-fakultet-konstnarliga-fakulteten-i-malmo": {
              "key": "lu-fakultet-konstnarliga-fakulteten-i-malmo",
              "title": "Konstnärliga fakulteten i Malmö",
              "link": "#"
            },
            "lu-fakultet-lth-lunds-tekniska-hogskola": {
              "key": "lu-fakultet-lth-lunds-tekniska-hogskola",
              "title": "LTH | Lunds tekniska högskola",
              "link": "#"
            },
            "lu-fakultet-medicinska-fakulteten": {
              "key": "lu-fakultet-medicinska-fakulteten",
              "title": "Medicinska fakulteten",
              "link": "#"
            },
            "lu-fakultet-naturvetenskapliga-fakulteten": {
              "key": "lu-fakultet-naturvetenskapliga-fakulteten",
              "title": "Naturvetenskapliga fakulteten",
              "link": "#"
            },
            "lu-fakultet-samhallsvetenskapliga-fakulteten": {
              "key": "lu-fakultet-samhallsvetenskapliga-fakulteten",
              "title": "Samhällsvetenskapliga fakulteten",
              "link": "#"
            }
          }
        },
        "info-for": {
          "key": "info-for",
          "title": "Info för",
          "link": "#"
        }
      },
      {
        "lyssna": {
          "key": "lyssna",
          "title": "Lyssna",
          "link": "#",
          "icon": "volume"
        },
        "english": {
          "key": "english",
          "title": "English",
          "link": "#",
          "icon": "globe"
        }
      }
    ],
    "institution": "Till naturvetenskapliga fakulteten"
  },
  "mobile-nav": "mobile-navigation--institution",
  "mobile-navbar": {
    "mobile-nav-id": "nav-mobile",
    "items": [
      {
        "id": "nav-mobile--om",
        "label": "Om",
        "nav": {
          "items": {
            "key": "om",
            "title": "Om"
          }
        }
      },
      {
        "id": "nav-mobile--undervisning",
        "label": "Undervisning",
        "nav": {
          "items": {
            "key": "undervisning",
            "title": "Undervisning"
          }
        }
      },
      {
        "id": "nav-mobile--forskning",
        "label": "Forskning",
        "nav": {
          "items": {
            "key": "forskning",
            "title": "Forskning"
          }
        }
      },
      {
        "id": "nav-mobile--kontakt",
        "label": "Kontakt",
        "nav": {
          "items": {
            "key": "kontakt",
            "title": "Kontakt"
          }
        }
      }
    ]
  },
  "nav": {
    "items": {
      "om": {
        "key": "om",
        "active": true,
        "title": "Om"
      },
      "undervisning": {
        "key": "undervisning",
        "title": "Undervisning"
      },
      "forskning": {
        "key": "forskning",
        "title": "Forskning"
      },
      "kontakt": {
        "key": "kontakt",
        "title": "Kontakt"
      }
    }
  }
}

Data from this component is used to populate mobile menus, as well as the page preview template.