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.

Gestor de expedientes

with custom navigation

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

Gestor de expedientes

with custom navigation right

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

Gestor de expedientes

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.

Gestor de expedientes

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

Gestor de expedientes

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

Gestor de expedientes

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.

Gestor de expedientes

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.

Gestor de expedientes

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.

Gestor de expedientes

con dropdown personalizado

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

Gestor de expedientes

con contenido personalizado en dropdown

El dropdown puede contener cualquier tipo de información.

Gestor de expedientes

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.