Menús de navegación

Componente especial para colocar la navegación del sitio, siempre debe de ser el primer componente que se ponga en el sitio.

Importante

Los menús de navegación son completamente editables. En el ejemplo del código tenemos la variable links, esta variable sirve para poner en nuestro menú las secciones a las que queremos que nos dirijan nuestros links, mediante el id de cada sección. Por ejemplo, en nuestro código tenemos:

links:
  - text: Servicios
    link: 'servicios'

Esto quiere decir que el texto mostrado en el menú será Servicios y este nos dirijirá a la sección Servicios de nuestra one page.

Si queremos poner más secciones en nuestro menu, es posible hacerlo, sólo hay que tener especial atención en poner el id correcto en nuestro menú.

Menú 01

Código

---

siteName: Mi Sitio
siteLogo: /img/logo_redplanet_white.png

links:
  - text: Inicio
    link: 'inicio'
  - text: Conócenos
    link: 'conocenos'
  - text: Servicios
    link: 'servicios'
  - text: Paquetes
    link: 'paquetes'
  - text: Testimonios
    link: 'testimonios'
  - text: Contacto
    link: 'contacto'

socialLinks:
  - link: 'https://twitter.com'
    type: 'twitter'
  - link: 'https://facebook.com'
    type: 'fb'
  - link: 'https://instagram.com'
    type: 'ig'

phone: '55 5555 5555'

---

<navigation-01 :site-name="siteName" :site-logo="siteLogo" :links="links" :social-links="socialLinks" :phone="phone" body-classes="border-opacity-50 border-gray-500 fixed top-0 left-0 w-full"></navigation-01>

Parámetros

Nombre	Descripción	Tipo
site-name	Nombre de tu sitio	String
site-logo	Logo de tu sitio	String
links	Entradas del menú	Array
social-links	Links a redes sociales, se puede usar twitter, fb e ig	Array
phone	Teléfono	String

Ejemplo

Link (opens new window)

Menú 04

Imagen

Código

---
siteName: Tu sitio
links:
  - text: Misión
    link: 'mision'
  - text: Acerca de tu empresa
    link: 'acerca'

socialLinks:
  - link: 'https://twitter.com'
    type: 'twitter'
  - link: 'https://facebook.com'
    type: 'fb'

phone: '55 5555 5555'
---

<navigation-04 :site-name="siteName" :links="links" :social-links="socialLinks" :phone="phone"></navigation-04>

Parámetros

Nombre	Descripción	Tipo
site-name	Nombre de tu sitio	String
links	Entradas del menú	Array
social-links	Links a redes sociales, se puede usar twitter, fb e ig	Array
phone	Teléfono	String

Ejemplo

Link (opens new window)

Comentarios:

• Número máximo de links: 6 links.
• Número máximo de caracteres en link: 20 caracteres incluyendo espacios.
• Número máximo de caracteres en siteName: 23 caracteres incluyendo espacios.
• Número máximo de socialLinks: 3 íconos.
• Número máximo de caracteres en phone: 1 número de contacto de X caracteres incluyendo espacios.