Skip to main content

Page Navigation Links

Hooks and options for the Page Navigation component of the frontend.

General

Unlike other layout hooks, you should not provide your own HTML to the page_navigation_links option with content_for. Instead, the gem provides a simple interface that you can use to specify your page's navigation: an array of hashes. Here is an example:

set_page_navigation_links(
  [
    { title: 'Characters',
      href: '#characters',
      children: [
        { title: 'Lana Lang',
          href: '#lana-lang' },
        { title: 'Lex Luthor',
          href: '#lex-luthor' }
      ]
    },
    { title: 'Locations',
      hover_text: 'Locations for this more detailed description that will show when mouse is over item',
      children: [
        { title: 'The Talon',
          href: '#locations-1' },
        { title: 'Crater Lake',
          href: '#locations-2' }
      ]
    },
    { title: 'Text Only' }
  ]
)

A page navigation link may have:

  • title
  • href
    • Because this is intended for in-page navigation, this should use anchor navigation, rather than a link that forces a page load.
  • active_when
    • adds active class to li
  • hover_text
  • children
    • the children key must be an array of navigation link hashes

Because this particular hook is page-specific, it does not make sense to set it in the Frontend configuration or inside of the controller. The simplest way to set this hook is to use set_page_navigation_links in the view or in a separate view partial.