Simple

Classic navbar with logo left, links center, and CTA right

_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

Options

Name	Type	Default	Description
`logo_text` *	String	required	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

Name	Type	Default	Description
`logo_text` *	String	required	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

With Search

Navbar with an integrated search input between links and 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

Options

Name	Type	Default	Description
`logo_text` *	String	required	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

Name	Type	Default	Description
`logo_text` *	String	required	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

Centered

Centered layout with logo top-center and links below

_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

Options

Name	Type	Default	Description
`logo_text` *	String	required	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

Name	Type	Default	Description
`logo_text` *	String	required	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

Changelog v1.0.0

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

Simple

Options

With Search

Options

Centered

Options

Changelog v1.0.0

Get Full Access