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 keystonevar keystone = ;var KeystoneMenus = ; // etc... keystone;KeystoneMenus; // etc... keystone; keystonestart;
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 = ; exports { var locals = reslocals; var builder = KeystoneMenus; builder ; builder ; // 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.