keystone-menus

Keystone Menus

Installation

To install, simply add keystone-menus to the list of dependencies in your Keystone application's package.json and run npm install.

Usage

1. In your application's keystone.js file, include the module, import its models, and add the models to your Keystone admin UI:

// Simulate config options from your production environment by
// customising the .env file in your project's root folder.
require('dotenv').load();

// Require keystone
var keystone = require('keystone');
var KeystoneMenus = require('keystone-menus');

// etc...

keystone.import('models');
KeystoneMenus.import(keystone);

// etc...

keystone.set('nav', {
	// Your application's models that are loaded into the admin UI would be here.
	'menus': ['menus', 'menu-items']
});

keystone.start();

2. Start up your application and add the menus and menu items that you will be using in the admin UI. Reference the Objects section for details on the Menu and MenuItem objects and their fields.

3. In your routes (most likely in middleware.js, unless the menus only need to load on certain pages) initialize the MenuBuilder object, then use it to build a menu. Once the menu is built, render it.

var KeystoneMenus = require('keystone-menus');

exports.initLocals = function(req, res, next) {

	var locals = res.locals;
	var builder = KeystoneMenus.builder();

	builder.build('navLinks')
		.then(function(menu){
			locals.navLinks = menu.render(req.path, {'class': 'nav navbar-left visible-md-block visible-lg-block'}, {}, {});
		});

	builder.build('subNavLinks')
		.then(function(menu){
			locals.subNavLinks = menu.render(req.path, {'class': ' nav navbar-right visible-md-block visible-lg-block'}, {}, {});
		});
	// etc.
};

The render function has 4 parameters:

• path The current request path. Used for setting the active li
• ulAttributes HTML attributes to apply to the menu's ul, example: {'class': 'nav navbar-left'}
• liAttributes HTML attributes to apply to the menu's lis, example: {'class': 'nav-item'}
• aAttributes HTML attributes to apply to the menu's as, example: {'class': 'nav-link'}

4. Reference your rendered menu templates in your views.

.navbar-links
  != navLinks

Objects

Menu

• Name: The name you will use in your application
• Slug: Auto-generated by Name
• Items: The menu items that should be displayed in this menu

MenuItem

• Name: The name of the menu item. This is what will be displayed in the menu.
• Href: The path that the menu item will link to.
• Active: Whether this menu item will be shown in the menu.