Header examples

default

El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos.

with custom navigation

Tras nuestro menú de navegación tenemos customNavigationHtml: una zona anidable para poder añadir una navegación personalizada

Ir a la página de inicio

with custom navigation right

En el customNavigationHtml podemos añadir elementos posicionados a la derecha

Ir a la página de inicio

with custom skipLink

Pasando parámetros customizados al componente Skip Link. Útil para hacer plantillas de página con barra lateral o con un contenido principal localizado en otro sitio diferente al habitual.

Expanded logo

expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.

con offcanvas

Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller

Ir a la página de inicio

con offcanvas y mobileTitle

Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile

Ir a la página de inicio

Carpeta del gestor

con subnav text

Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.

Ir a la página de inicio

con subnav items

Un dropdown junto al logo que ha de usarse para mostrar el nombre de la app en la que estamos y para navegar a otra app diferente. Usamos los items proporcionados para la navegación.

con dropdown

Un dropdown a la derecha que puede usarse para mostrar información adicional: login, acerca de... Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.

con dropdown personalizado

Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con html en el dropdown.

con contenido personalizado en dropdown

El dropdown puede contener cualquier tipo de información.

con todo

Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.

email template example

Ejemplo de uso en platilla de email por defecto. Sólo con logo expandido.