Compatible with all themes and frameworks, NavGrid has a very light HTML + CSS codebase, to promote faster page loads and excellent accessibility. Subtle animation effects and gradients add to the overall professionalism of the finished grid. Links can either be sourced from the ones RapidWeaver generates via the theme, or you have an option to manually add links yourself using 'sub stacks'.

Like many other stacks featured on this website, NavGrid was originally developed for a client website. The premiss was to create a landing page, which could list a large number of links that pointed to various articles. There were too many links to fit inside a normal menu. Therefore a plan was devised to create a grid of all the links instead. After several weeks, it was noted that the articles were gaining more traffic and feedback from website users was also positive.

On mobile devices (screens below the breakpoint width setting) links are stacked vertically to conserve space. Whereas on wider screens, some Flexbox wizardry is used to tile the navigation links left to right, and down the page. Adjusting the desktop width setting lets you precisely control how many columns of links to display.

Alongside the ability to style these navigation links as buttons, it's also feasible to apply custom background images to each link. This could be a good solution for generating basic image thumbnail galleries, with links to sub-pages. The free trial version of NavGrid provides a great insight of what this stack can do.

Example

This is the NavGrid stack with the default style and colour settings applied. Links were added manually in this example. The second link (may) has a class of 'current' applied, so you can see how the current page link would normally get styled.



Setup

NavGrid promotes fast and easy setup. A good stack for both novice and more experienced RapidWeaver users to work with.
  1. Install NavGrid in the normal way.
  2. From your Stacks Library, search for 'navgrid'.
  3. Drag and drop a copy of NavGrid into the page.
  4. From the configuration settings, choose where to source your navigation links from.
  5. Preview the page to see your navigation layout start to take shape.
  6. Within the Stacks side panel, you can customise many other aspects of NavGrid.
  7. Keep previewing the page, to see your applied changes that effect.
  8. Save and publish or export your website as normal, when done.

Manually adding links

If you don't like the navigation links that RapidWeaver generates (for example, you are trying to link to pages you have hidden in the main navigation), then NavGrid gives you the option to manually construct a grid of links. To achieve this, simply switch the Nav Source setting to Sub Stacks. In RapidWeaver edit mode, press the blue button to add each of your links. Within the Stacks side panel (with a sub stack selected in edit mode) you'll see the options to change the link address and link text. It's very easy to do. An unlimited number of links can be added. You can drag-and-drop links into any order. Custom attributes (like lightbox triggers and Javascript event listeners) are supported. Potentially this could be a good way of linking to blog articles or product pages.

Current or current ancestor pages not marked?

Traditionally the RapidWeaver theme API required current page links to have a class of current and ancestor pages to have a class of currentAncestor. This is what stacks like NavGrid rely on, to denote what page is currently being viewed. Over the years, some theme developers have deviated from the official API recommendations, and devised other names for current and current ancestor pages. So if these pages are not marked as such in NavGrid, there is a good chance you'll need to go into the NavGrid Advanced Settings and update your class names accordingly. If you are unsure what to enter, please speak with the theme developer or ask on the forums.