Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.
Menu JSON Configurations
| Options |
Description |
tag |
Add the tag or Badge any text or icon you want to display. |
tag custom |
Configure your tag classes as per your requirements, you can use any classes combination from above CSS Classes table. i.e "badge badge-glow badge-pill badge-default badge-danger" |
PUG Code
You need to add tags and pills options to menu JSON object, please read the documentation to customize the menu using PUG.
- Line no 18 & 24: Contain menu tags and pills JSON configurations options.
Modern Admin use the common menu JSON object to generate same menu on each pages of your template that will save your time by reducing the repetitive menu customization task on each page. This template has menu example pug file for every layouts, Here in below example, it shows horizontal menu layout menu PUG file horizontal-menu.pug, you can use it on template level only it will generate whole template with the same menu options.
+horizontalMenu([
//- Main Navigation Header
{navheader:"Main",icon:"la la-ellipsis-h"},
//- Dashboard
{url:"index.html",name:"Dashboard",slug:"dashboard",icon:"la la-home", tag:"New" , tagcustom: "badge badge-default badge-danger"},
//- Layouts Start
{url:"#",name:"Layouts",slug:"",icon:"la la-bookmark",
//- Layouts Submenu
submenu:[
{url:"#",name:"Layout 1",slug:"", tag:"2", tagcustom: "badge badge-glow badge-pill bg-teal border-teal border-darken-4"},
{url:"#",name:"Layout 2",slug:""},
{url:"#",name:"Layout 3",slug:""},
{url:"#",name:"Layout 4",slug:""},
{url:"#",name:"Layout 5",slug:"",classlist:"disabled",menuSubtitle:"Coming soon"},
]
},
//- Layouts End
]);
