@ussebastian/kitdigital/docs/components/layout/header.html

Kit Digital de la Universidad San Sebastián

<section class="w-100">
  <header class="w-100">
    <nav class="uss-topnav hide-on-mobile">
      <div class="container uss-topnav-wrapper">
        <ul class="uss-topnav-items uss-topnav-items--responsive">
          <li class="uss-topnav__menu-item uss-skip-to-content" tabindex="-2">
            <a href="#main" class="uss-topnav__menu-item-link"
              >Ir al contenido
              <i class="uss-icon ri-arrow-right-line uss-icon--xs"></i>
            </a>
          </li>
          <li class="uss-topnav__menu-item uss-skip-to-content" tabindex="-1">
            <a href="#mainmenu-home" class="uss-topnav__menu-item-link">
              Ir al menú principal
              <i class="uss-icon ri-arrow-right-line uss-icon--xs"></i>
            </a>
          </li>
          <li class="uss-topnav__menu-item">
            <a href="#" class="uss-topnav__menu-item-link">Item topbar</a>
          </li>
          <li class="uss-topnav__menu-item">
            <a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--external"
              >Item topbar</a
            >
          </li>
          <li class="uss-topnav__menu-item">
            <a href="#" class="uss-topnav__menu-item-link">Item topbar</a>
          </li>
          <li class="uss-topnav__menu-item">
            <a href="#" class="uss-topnav__menu-item-link">Item topbar</a>
          </li>
        </ul>
        <ul class="uss-topnav-items">
          <li class="uss-topnav__menu-item">
            <a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--icon">
              <i class="uss-icon ri-facebook-line"></i>
            </a>
          </li>
          <li class="uss-topnav__menu-item">
            <a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--icon">
              <i class="uss-icon ri-twitter-line"></i>
            </a>
          </li>
          <li class="uss-topnav__menu-item">
            <a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--icon">
              <i class="uss-icon ri-instagram-line"></i>
            </a>
          </li>
          <li class="uss-topnav__menu-item">
            <a href="#" class="uss-topnav__menu-item-link uss-topnav__menu-item-link--icon">
              <i class="uss-icon ri-youtube-line"></i>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <nav id="mainmenu" class="uss-mainnav hide-on-mobile">
      <div class="container uss-mainnav__wrap">
        <a id="mainmenu-home" href="#uss" class="uss-nav__logo-link">
          <picture>
            <source srcset="https://dummyimage.com/310x96/" media="(prefers-color-scheme:dark)" />
            <img class="uss-nav__logo" src="https://dummyimage.com/220x68/" height="68px" />
          </picture>
        </a>
        <div class="uss-mainnav__menu">
          <ul class="uss-mainnav__items">
            <li class="uss-mainnav__item">
              <a href="#" class="uss-mainnav__item-link"> Admisión </a>
            </li>
            <li class="uss-mainnav__item">
              <a href="#" class="uss-mainnav__item-link"> Postgrados </a>
            </li>
            <li class="uss-mainnav__item">
              <button class="uss-mainnav__item-link" data-subitem-ref="0">
                Menu 2
                <i class="uss-icon ri-arrow-drop-down-line"></i>
              </button>
              <div class="uss-mainnav__subitems-wrapper" data-subitem-target="0">
                <ul class="uss-mainnav__sub-items">
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Investigación1</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Doctorados</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#"
                      >Texto label externo
                      <i class="uss-icon ri-external-link-line ri-s"></i>
                    </a>
                  </li>
                </ul>
                <ul class="uss-mainnav__sub-items">
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Investigación1</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Doctorados</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="uss-mainnav__item">
              <a href="#" class="uss-mainnav__item-link"> Sedes </a>
            </li>
            <li class="uss-mainnav__item">
              <a href="#" class="uss-mainnav__item-link"> Investigracion </a>
            </li>
            <li class="uss-mainnav__item">
              <a href="#" class="uss-mainnav__item-link"> Facultades </a>
            </li>
            <li class="uss-mainnav__item">
              <button class="uss-mainnav__item-link" data-subitem-ref="1">
                Universidad
                <i class="uss-icon ri-arrow-drop-down-line"></i>
              </button>
              <div class="uss-mainnav__subitems-wrapper" data-subitem-target="1">
                <ul class="uss-mainnav__sub-items">
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Investigación1</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Doctorados</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#"
                      >Texto label externo
                      <i class="uss-icon ri-external-link-line ri-s"></i>
                    </a>
                  </li>
                </ul>
                <ul class="uss-mainnav__sub-items">
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Investigación1</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Doctorados</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
                  </li>
                </ul>
                <ul class="uss-mainnav__sub-items">
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Informativos VRID</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Fondos concursables I+D</a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#"
                      >Texto label externo
                      <i class="uss-icon ri-external-link-line ri-s"></i>
                    </a>
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#"
                      >Oficina de transferencia y licenciamiento lorem ipsum dolor sit</a
                    >
                  </li>
                  <li class="uss-mainnav__item">
                    <a class="uss-mainnav__subitem-link" href="#">Item 7</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <nav class="uss-mainnav--mobile show-on-mobile">
      <div class="container uss-mainnav__wrap">
        <div class="uss-mainnav__topnav">
          <a href="#uss" class="uss-nav__logo-link">
            <picture>
              <source srcset="https://dummyimage.com/310x96/" media="(prefers-color-scheme:dark)" />
              <img class="uss-nav__logo" src="https://dummyimage.com/155x48/" height="48px" />
            </picture>
          </a>
          <div class="uss-nav__icons">
            <button data-toggle-nav-mobile class="uss-btn uss-btn--icon">
              <i class="uss-icon ri-menu-line"></i>
            </button>
          </div>
        </div>
        <div class="container uss-mainnav__menu">
          <ul class="uss-menu-accordion">
            <li class="uss-menu-accordion__item">
              <a href="#" class="uss-menu-accordion__item-link"> Admisión </a>
            </li>
            <li class="uss-menu-accordion__item">
              <a href="#" class="uss-menu-accordion__item-link"> Postgrados </a>
            </li>
            <li class="uss-menu-accordion__item">
              <button class="uss-menu-accordion__item-link" data-subitem-ref="0">
                Menu 2
                <i class="uss-icon ri-arrow-drop-down-line"></i>
              </button>
              <ul class="uss-menu-accordion__sub-items" data-subitem-target="0">
                <li class="uss-menu-accordion__subitem">
                  <a class="uss-menu-accordion__subitem-link" href="#">Doctorados</a>
                </li>
                <li class="uss-menu-accordion__subitem">
                  <div class="uss-menu-accordion__subitem-link-subtitle">Title</div>
                </li>
                <li class="uss-menu-accordion__subitem">
                  <a class="uss-menu-accordion__subitem-link" href="#">Informativos VRID</a>
                </li>
                <li class="uss-menu-accordion__subitem">
                  <a class="uss-menu-accordion__subitem-link" href="#">Fondos concursables I+D</a>
                </li>
                <li class="uss-menu-accordion__subitem">
                  <a class="uss-menu-accordion__subitem-link" href="#">
                    Texto label externo
                    <i class="uss-icon ri-external-link-line ri-s"></i>
                  </a>
                </li>
              </ul>
            </li>
            <li class="uss-menu-accordion__item">
              <a href="#" class="uss-menu-accordion__item-link"> Sedes </a>
            </li>
            <li class="uss-menu-accordion__item">
              <a href="#" class="uss-menu-accordion__item-link"> Investigracion </a>
            </li>
            <li class="uss-menu-accordion__item">
              <a href="#" class="uss-menu-accordion__item-link"> Facultades y Carreras </a>
            </li>
            <li class="uss-menu-accordion__item">
              <button class="uss-menu-accordion__item-link" data-subitem-ref="1">
                Universidad
                <i class="uss-icon ri-arrow-drop-down-line"></i>
              </button>
              <ul class="uss-menu-accordion__sub-items" data-subitem-target="1">
                <li class="uss-menu-accordion__subitem">
                  <a class="uss-menu-accordion__subitem-link" href="#">Doctorados</a>
                </li>
                <li class="uss-menu-accordion__subitem">
                  <div class="uss-menu-accordion__subitem-link-subtitle">Title</div>
                </li>
                <li class="uss-menu-accordion__subitem">
                  <a class="uss-menu-accordion__subitem-link" href="#">Informativos VRID</a>
                </li>
                <li class="uss-menu-accordion__subitem">
                  <a class="uss-menu-accordion__subitem-link" href="#">Fondos concursables I+D</a>
                </li>
                <li class="uss-menu-accordion__subitem">
                  <a class="uss-menu-accordion__subitem-link" href="#">
                    Texto label externo
                    <i class="uss-icon ri-external-link-line ri-s"></i>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</section>