DESY

Sistema de Diseño del Gobierno de Aragón.

Volver

Índice de páginas

Navegación en portales

Patrones de componente

Los patrones de navegación se usan en portales web con una arquitectura de contenido compleja que requieren más flexibilidad para encontrar la información necesaria.

Índice de apartados de esta página

Megamenú

Bloque desplegable que permite mostrar un listado o contenido personalizado. Normalmente lo utilizamos en el menú de navegación de la cabecera avanzada.

Mostrar código del ejemplo: includes/_pattern.megamenu.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.megamenu.njk

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
{% from "components/nav/_macro.nav.njk" import componentNav %}
{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}


{% set megamenu %}
  <div id="megamenu-mini" class="hidden -mx-base">
    <div class="py-base text-xs px-base lg:text-sm text-neutral-dark border-t border-neutral-base">
      <div class="container mx-auto">
        <div class="absolute top-0 right-0 p-sm">
          <button id="close-button" data-toggle="collapse" data-target="#megamenu-mini" aria-expanded="false" aria-controls="megamenu-mini" onClick="getElementById('megamenu-mini-button').click(); getElementById('megamenu-mini-button').focus();" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="Cerrar menú" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"></path></svg>
          </button>
        </div>
        <nav class="flex flex-col lg:flex-row flex-wrap gap-base " aria-label="Menú principal">
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Temas</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Administración pública y transparencia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Agricultura, ganadería y medio rural
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Ciencia y tecnología
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Comercio y consumo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Cultura, turismo, deportes y ocio
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Educación y formación
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Empleo, empresa y otras entidades
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Impuestos y tasas
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Industria, energía y minería
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Medio ambiente
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Salud
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Seguridad y justicia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Servicios sociales
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Transporte, territorio e infraestructuras
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Vivienda y urbanismo
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Momentos vitales</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Independizarse o mudarse por primera vez
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Buscar o mejorar el empleo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Ser mayor de edad
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Emprender un negocio y trabajo autónomo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Formalizar una relación
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Tener un bebé
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Acompañar en la primera infancia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Jubilarse
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Cuidar de una persona en situación de dependencia y/o discapacidad
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Final de la vida
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Sede electrónica - Trámites</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Inicio Sede electrónica - Trámites
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Trámites por tema
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Trámites por tipo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Servicios de la Sede electrónica
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Información y ayuda
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Accede a MiA, tu espacio digital<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#7">
                    Sistema Interno de Información
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Institución</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Gobierno de Aragón
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Estatuto de Aragón
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Organismos
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Municipios
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Identidad comunicación corporativa
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Presupuestos
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Cooperación transfronteriza. Acción exterior
                  </a>
                </li>
              </ul>
          </div>
        </nav>
      </div>
    </div>
  </div>

{% endset %}

{% set customNavigation %}
  <div class="flex flex-1 justify-start items-stretch">
    <div class="flex justify-center items-center">

      {{ componentToggle({
        "id": "megamenu-mini-button",
        "classes": "c-menu-navigation__button c-menu-navigation__button--header -mx-sm collapsed ",
        "offState": {
          "classes": "",
          "html": '<span class="inline-flex">Menú<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
        },
        "onState": {
          "classes": "",
          "html": '<span class="inline-flex">Menú<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
        },
        "attributes": {
          "aria-controls": "megamenu-mini",
          "aria-expanded": "false",
          "role": "button",
          "onClick": "getElementById('megamenu-mini').classList.toggle('hidden');getElementById('close-button').focus();"
        }
      }) }}
    </div>
  </div>
{% endset %}


{{ componentHeaderAdvanced({
  "title": {
    "homepageUrl": "/",
    "text": "Titulo del portal"
  },
  "customNavigationHtml": customNavigation | safe,
  "sub": {
    "customNavigationHtml": megamenu | safe,
    "classes": "h-full bg-neutral-lighter border-b border-neutral-base -mt-px"
  }
}) }}

Es posible configurar tu propio Programmable Search Engine de Google como barra de búsqueda de tu sitio web. Normalmente se encuentra en la cabecera avanzada y en el menú desplegable de navegación lateral disponible en anchuras pequeñas.

Más información en el patrón de página de resultados de la búsqueda.

Mostrar código del ejemplo: includes/_pattern.google-searchbar.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.google-searchbar.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
{% from "components/nav/_macro.nav.njk" import componentNav %}
{% from "components/details/_macro.details.njk" import componentDetails %}

{% set buscador %}
  <div class="-mb-xs lg:mb-0">
    <script async src="https://cse.google.com/cse.js?cx=5513ad10548fa470b"></script>
    <div class="gcse-searchbox-only"></div>
  </div>
{% endset %}

{% call componentHeaderAdvanced({
"skipLink": {
  "href": skipLinkHref if skipLinkHref else "#content"
},
"sub": {
  "customNavigationHtml": '<div class="hidden lg:grid grid-cols-2 lg:grid-cols-6 gap-xl h-full"><div class="col-start-1 col-end-2 lg:col-span-2 lg:col-end-7 place-self-end flex items-center justify-end w-full"><div class="flex-1">'+ buscador | safe +'</div></div></div>',
  "classes": "hidden lg:block relative -top-32 h-0"
},
"title": {
    "homepageUrl": "index.html",
    "text": "Título del portal"
  },
  "navigation": {
    "items": [
      {
        "href": "#1",
        "text": "Inicio"
      },
      {
        "href": "#2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      },
      {
        "href": "#4",
        "text": "Navigation item 4"
      }
    ]
  },
  "offcanvas": {
    "text": "Menú",
    "textClose": "Cerrar menú"
  },
  "classes": "relative z-40"
}) %}
  <nav class="w-full p-2" aria-labelledby="menu-patron-movil-title">
    <h2 id="menu-patron-movil-title" class="sr-only">Menú principal</h2>
    <div class="-mx-sm p-base bg-primary-light">
      <h3 class="mb-sm text-base font-bold">Buscar</h3>
      <script async src="https://cse.google.com/cse.js?cx=5513ad10548fa470b"></script>
      <div class="gcse-searchbox-only"></div>
    </div>
    <h3 class="p-base text-base font-bold">Título del portal</h3>
    {{ componentNav({
      "idPrefix": "nav-patron-mobile-pages",
      "hasNav": false,
      "items": [
        {
        "href": "#1",
        "text": "Inicio"
      },
      {
        "href": "#2",
        "text": "Navigation item 2",
        "active": true
      },
      {
        "href": "#3",
        "text": "Navigation item 3"
      },
      {
        "href": "#4",
        "text": "Navigation item 4"
      }
    ]
    })  }}
  </nav>
{% endcall %}