Whistling Frogs

Adding a new Menu Item with Bootstrap and pug

Follow steps 1-5 of the Obyte Web Integration Tutorial to create basic Node js app with Pug and Bootstrap.

If you want to create Sub-Menu structure, please follow Sub Menus tutorial.

1. Creating a new Page

Copy one of the existing files in the views folder creating a new file, e.g. newPage.pug

Modify contain of this new file as required.

2. Routing

Copy one of the existing files in the routes folder, creating a new file, e.g. newPage.js. Modify res.render command as follows:

res.render('tutorials/newPage', { title: 'New Page' });

3. Adding to the Menu

Add the new menu option to the views/menu.pugfile. For top level menu, add:

li.nav-item
  a.nav-link.text-dark(href="newPage")= "New Page"

Or for the Sub Menu, add:

a.dropdown-item(href="newPage")="New Page"

4. Amending app.js file

Finally add the following commands to the app.js file:

const newPage = require('../routes/newPage');
...
app.use('/newPage', newPage);

And test.