Lunds universitet - Style Guide

Sticky Navbar 

<div class="sticky-xl-top bg-white">
    <div class="container">
        <div class="py-xl-3 container-fill mx-xl-0">
            <nav class="navbar navbar-expand-xl px-0">
                <div class="collapse navbar-collapse" id="sticky-navbar">
                    <ul class="navbar-nav me-auto text-center text-xl-start align-items-center">
                        <li class="nav-item d-none d-xl-block">
                            <span class="navbar-text">Navbar label:</span>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link nav-undecorated px-3 text-primary text-dark-hover" href="#">Nav Item</a>
                        </li>
                    </ul>
                </div>
                <a class="navbar-toggler text-center text-primary text-dark-hover w-100 collapsed rounded-0 my-0 py-3" type="button" data-bs-toggle="collapse" href="#sticky-navbar" aria-controls="sticky-navbar" aria-expanded="false" aria-label="Visa navigation">
                    <span class="collapse-show-inline small">Visa: Navbar label &nbsp;<i class="fal fa-lg fa-chevron-circle-down"></i></span>
                    <span class="collapse-hide-inline small">Dölj: Navbar label &nbsp;<i class="fal fa-lg fa-chevron-circle-up"></i></span>
                </a>
            </nav>
        </div>
    </div>
</div>
 
<div class="sticky-xl-top bg-white">
  <div class="container">
    <div class="py-xl-3 container-fill mx-xl-0">
      <nav class="navbar navbar-expand-xl px-0">
        <div class="collapse navbar-collapse" id="{{id}}">
          <ul class="navbar-nav me-auto text-center text-xl-start align-items-center">
            <li class="nav-item d-none d-xl-block">
              <span class="navbar-text">{{label}}:</span>
            </li>
            {{#each items}}
              <li class="nav-item">
                <a class="nav-link nav-undecorated px-3 text-primary text-dark-hover" href="{{link}}">{{label}}</a>
              </li>
            {{/each}}
          </ul>
          {{#if extra}}
            <ul class="navbar-nav d-none d-xl-flex {{modifiers extra.modifiers}}">
              {{#each extra.items}}
                <li class="nav-item{{modifiers modifiers}}">
                  {{{content}}}
                </li>
              {{/each}}
            </ul>
          {{/if}}
        </div>
        <a class="navbar-toggler text-center text-primary text-dark-hover w-100 collapsed rounded-0 my-0 py-3" type="button" data-bs-toggle="collapse"
           href="#{{id}}" aria-controls="{{id}}" aria-expanded="false" aria-label="Visa navigation">
          <span class="collapse-show-inline small">Visa: {{label}} &nbsp;<i
            class="fal fa-lg fa-chevron-circle-down"></i></span>
          <span class="collapse-hide-inline small">Dölj: {{label}} &nbsp;<i
            class="fal fa-lg fa-chevron-circle-up"></i></span>
        </a>
      </nav>
    </div>
  </div>
</div>
 
{
  "id": "sticky-navbar",
  "label": "Navbar label",
  "items": [
    {
      "link": "#",
      "label": "Nav Item"
    }
  ]
}

No notes defined.