Global navigation

All of the layouts (except for the stripped layout) come with a global navigation component. This manages your main navigation links, along wit optional sub navigation links.

The navigation designed to be a "global" element in the structure of your application's layouts. For that reason, it's stored in the app/views/layouts/global folder and it's called from various layouts.

It's also designed in a DRY way to ensure that you only need to manage your navigation links in one place.

Useage

After installing any layout, find the app/views/layouts/global/_nav.html.erb file and add your navigation links.

Each top-level navigation link is implmeneted like this:

<%= render nav_link_partial,
            url: guitars_path,
            active: active_nav_link?(guitars_path),
            label: "Guitars",
            icon: "guitar",
            **nav_attrs %>

The active_nav_link? helper method checks to see if the current path—or any of it's nested paths—match the link's path. If so, it applies the "active" styling that's passed into the _nav.html.erb partial.

Sub navigations

Sometimes you want to display smaller, sub-navigational links underneath a top-level navigation link. You can see an example of this in action here in the docs: When you click on any of the Docs sections, it reveals their sub-navigation links.

To make this work you'll need to do 2 things:

• Build the list of sub-navigation links using an array of hashes.
• Pass that array into the top-level navigation link as it's sub_links attribute.

Like this:

<% install_sub_links = [
  {
    url: acoustic_guitars_path,
    active: active_nav_link?(guitars_path(category: "acoustic")),
    label: "Acoustics",
    icon: "guitar"
  },
  {
    url: electric_guitars_path,
    active: active_nav_link?(electric_guitars_path),
    label: "Electric",
    icon: "guitar"
  }
] %>
<%= render nav_link_partial,
           url: guitars_path,
           active: active_nav_link?(guitars_path),
           label: "Guitars",
           icon: "guitar",
           sub_links: install_sub_links,
           **nav_attrs %>

Mobile navigation

Your main navigation is also built into your mobile navigation. No extra maintenence or configuration is needed.

The links in your navigation styled to adapt to being viewed inside of the mobile navigation on smaller screens.