Simple

Barra de navegación clásica con logo a la izquierda, enlaces al centro y CTA a la derecha

_navbar.html.erb

███
  ██████ █ ██████ █████ █████████

  ██████
    ███ ██████ ███████████████████████████
      ██████████ ████████
      ██████████ ████
      ██████ █
        █ ██████ ███████████ █████ ███████████ ██
        █ ██████ ██████████ █████ ███████████ ███████ ████ ██

Get Access to View Code

navbar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ████████████
  ██████ ██████ █ █ ███████ █ █████ ████████ ████████ █████ █ █

  █████████ █
    █████████ █ █████
    ██ ██████████████████ █
      ██████████████████ █ ████████████████████████

Get Access to View Code

navbar_simple_component.html.erb

████ ████████████████████████
     █████████████████████████████ ██████ ███
     ██████████ ███████████ ████
  ████ ████████████████ ███████ ████ ███████ █████████
    ████ ███████████ ████████████ ███████████████ ██████

      ███ ████ ██
      ████ ██████████████████████
        ██ █████████ █████████ ███
           ██████████████ █████████ ██████████████ ███████████████ █████████████████ ████████████ ██████████████████████████ ████████████████████ ████████████████████████████ █████████████████████████████████ █████████

Get Access to View Code

navbar_simple_component.rb

█ ██████████████████████ ████

█████ █████████████████████ █ ███████████████████
  ███████████ ███████████ ███████████ ███████ ███████████ ██████████ ███████

  ███ ██████████████████████ ██████████ ████ ██████ ███ ██████████ ████ █████████ ████ ███████ ██████
    ██████████ █ █████████
    ██████████ █ █████████
    ██████ █ █████
    ██████████ █ █████████

Get Access to View Code

navbar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ████████████
  ██████ ██████ █ █ ███████ █ █████ ████████ ████████ █████ █ █

  █████████ █
    █████████ █ █████
    ██ ██████████████████ █
      ██████████████████ █ ████████████████████████

Get Access to View Code

Opciones

Nombre	Tipo	Predeterminado	Descripción
`logo_text` *	String	requerido	Brand/logo text displayed in the navbar
`logo_href`	String	`"/"`	URL the logo links to
`links`	Array		Array of hashes with :label (String), :href (String), :active (Boolean)
`cta_label`	String		Call-to-action button text
`cta_href`	String		Call-to-action button URL
`sticky`	Boolean	`false`	Whether the navbar sticks to the top on scroll with shadow

Nombre	Tipo	Predeterminado	Descripción
`logo_text` *	String	requerido	Brand/logo text displayed in the navbar
`logo_href`	String	`"/"`	URL the logo links to
`links`	Array		Array of hashes with :label, :href, :active keys
`cta_label`	String		Call-to-action button text
`cta_href`	String		Call-to-action button URL
`sticky`	Boolean	`false`	Whether the navbar sticks to the top on scroll

Con búsqueda

Barra de navegación con campo de búsqueda integrado entre los enlaces y el CTA

_navbar.html.erb

███
  ██████ █ ████ ██████ █████ █████████

  ██████
    ███ ██████ ████████████████████████████████
      ██████████ ████████
      ██████████ ████
      ██████ █
        █ ██████ ███████ █████ ████ ███████ ████ ██
        █ ██████ ███████████ █████ ███████████ █

Get Access to View Code

navbar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ████████████
  ██████ ██████ █ █ ███████ █ █████ ████████ ████████ █████ █ █

  █████████ █
    █████████ █ █████
    ██ ██████████████████ █
      ██████████████████ █ ████████████████████████

Get Access to View Code

navbar_with_search_component.rb

█ ██████████████████████ ████

█████ █████████████████████████ █ ███████████████████
  ███████████ ███████████ ███████████ ███████ ███████████ ██████████ ████████
              ████████████████████ ██████████████

  ███ ██████████████████████ ██████████ ████ ██████ ███ ██████████ ████ █████████ ████
                 ███████ ██████ ███████████████████ ████████████ ██████████████ ████
    ██████████ █ █████████
    ██████████ █ █████████

Get Access to View Code

navbar_with_search_component.html.erb

████ ████████████████████████
     █████████████████████████████ ██████ ███
     ██████████ ███████████ ████
  ████ ████████████████ ███████ ████ ███████ █████████
    ████ ███████████ ████████████ ███████████████ ████ ███████

      ███ ████ ██
      ████ ██████████████████████
        ██ █████████ █████████ ███
           ██████████████ █████████ ██████████████ ███████████████ █████████████████ ████████████ ██████████████████████████ ████████████████████ ████████████████████████████ █████████████████████████████████ █████████

Get Access to View Code

navbar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ████████████
  ██████ ██████ █ █ ███████ █ █████ ████████ ████████ █████ █ █

  █████████ █
    █████████ █ █████
    ██ ██████████████████ █
      ██████████████████ █ ████████████████████████

Get Access to View Code

Opciones

Nombre	Tipo	Predeterminado	Descripción
`logo_text` *	String	requerido	Brand/logo text displayed in the navbar
`logo_href`	String	`"/"`	URL the logo links to
`links`	Array		Array of hashes with :label, :href, :active keys
`cta_label`	String		Call-to-action button text
`cta_href`	String		Call-to-action button URL
`sticky`	Boolean	`false`	Whether the navbar sticks to the top on scroll
`search_placeholder`	String	`"Search..."`	Placeholder text for the search input
`search_action`	String		Form action URL for search submissions

Nombre	Tipo	Predeterminado	Descripción
`logo_text` *	String	requerido	Brand/logo text displayed in the navbar
`logo_href`	String	`"/"`	URL the logo links to
`links`	Array		Array of hashes with :label, :href, :active keys
`cta_label`	String		Call-to-action button text
`cta_href`	String		Call-to-action button URL
`sticky`	Boolean	`false`	Whether the navbar sticks to the top on scroll
`search_placeholder`	String	`"Search..."`	Placeholder text for the search input
`search_action`	String		Form action URL for search submissions

Centrado

Diseño centrado con logo arriba al centro y enlaces debajo

_navbar.html.erb

███
  ██████ █ ████████ █████ █████████

  ██████
    ███ ██████ █████████████████████████████
      ██████████ ████████
      ██████████ ████
      ██████ █
        █ ██████ ████████ █████ ████████ ██
        █ ██████ ███████████ █████ ████████████ ███████ ████ ██

Get Access to View Code

navbar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ████████████
  ██████ ██████ █ █ ███████ █ █████ ████████ ████████ █████ █ █

  █████████ █
    █████████ █ █████
    ██ ██████████████████ █
      ██████████████████ █ ████████████████████████

Get Access to View Code

navbar_centered_component.rb

█ ██████████████████████ ████

█████ ███████████████████████ █ ███████████████████
  ███████████ ███████████ ███████████ ███████ ███████████ ██████████ ███████

  ███ ██████████████████████ ██████████ ████ ██████ ███ ██████████ ████ █████████ ████ ███████ ██████
    ██████████ █ █████████
    ██████████ █ █████████
    ██████ █ █████
    ██████████ █ █████████

Get Access to View Code

navbar_centered_component.html.erb

████ ████████████████████████
     █████████████████████████████ ██████ ███
     ██████████ ███████████ ████
  ████ ████████████████ ███████ ████ ███████ █████████

    ███ ███ ████ ████ ████████ ██
    ████ ███████████ ████████████ ██████████████ ████ ████████ ████████████████ ███████████████████████
      ██ █████████ █████████ ███
         ██████████████ █████████ ██████████████ ███████████████ █████████████████ ████████████ ██████████████████████████ ████████████████████ ████████████████████████████ █████████████████████████████████ █████████
        ███ █████████ ██

Get Access to View Code

navbar_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████ ████████████
  ██████ ██████ █ █ ███████ █ █████ ████████ ████████ █████ █ █

  █████████ █
    █████████ █ █████
    ██ ██████████████████ █
      ██████████████████ █ ████████████████████████

Get Access to View Code

Opciones

Nombre	Tipo	Predeterminado	Descripción
`logo_text` *	String	requerido	Brand/logo text displayed in the navbar
`logo_href`	String	`"/"`	URL the logo links to
`links`	Array		Array of hashes with :label, :href, :active keys
`cta_label`	String		Call-to-action button text
`cta_href`	String		Call-to-action button URL
`sticky`	Boolean	`false`	Whether the navbar sticks to the top on scroll

Nombre	Tipo	Predeterminado	Descripción
`logo_text` *	String	requerido	Brand/logo text displayed in the navbar
`logo_href`	String	`"/"`	URL the logo links to
`links`	Array		Array of hashes with :label, :href, :active keys
`cta_label`	String		Call-to-action button text
`cta_href`	String		Call-to-action button URL
`sticky`	Boolean	`false`	Whether the navbar sticks to the top on scroll

Registro de Cambios v1.0.0

- v1.0.0: Initial release with simple, with-search, and centered styles

Simple

Opciones

Con búsqueda

Opciones

Centrado

Opciones

Registro de Cambios v1.0.0

Obtener Acceso Completo