Customizing Menus
The navigation menus throughout your site are managed using the menu.en.json file located in the src/config folder. By modifying this file, you can customize the main navigation, dropdowns, mega menus, and footer links. Here’s how you can structure and customize the menus.
Main Menu
The main array defines the primary navigation menu items.
{ "main": [ { "enable": true, "name": "Home", "weight": 1, "url": "" }, { "name": "Pages", "enable": true, "weight": 3, "hasChildren": true, "children": [ { "enable": true, "name": "Nested Menu", "hasChildren": true, "weight": 2, "children": [ { "enable": true, "name": "Menu 01", "weight": 1 }, { "enable": true, "name": "Nested Menu", "hasChildren": true, "weight": 4, "children": [ { "enable": true, "name": "Nested Menu Item", "weight": 1 } ] }, { "enable": true, "name": "Menu 02", "weight": 2 }, { "enable": true, "name": "Menu 03", "weight": 3 } ] }, { "enable": true, "name": "Features", "url": "/features/", "weight": 1 }, { "enable": true, "name": "Pricing", "url": "/pricing/", "weight": 2 }, { "enable": true, "name": "Faq", "url": "/faq/", "weight": 3 }, { "enable": true, "name": "Changelog", "url": "/changelog/", "weight": 4 }, { "enable": true, "name": "Integration", "url": "/integration/", "weight": 5 }, { "enable": true, "name": "Integration Single", "url": "/integration/discord/", "weight": 6 }, { "enable": true, "name": "Blog", "url": "/blog/", "weight": 7 }, { "enable": true, "name": "Blog Single", "url": "/blog/post-1/", "weight": 8 } ] }, { "enable": true, "name": "Features", "weight": 2, "hasMegaMenu": true, "cta": { "enable": true, "image": "/images/menu-cta.png", "title": "Gain Actionable Insights", "description": "Upstart is self-hosted, meaning your website data stays on your server.", "cta_btn": { "enable": true, "label": "Get Free Trial", "url": "/contact/", "rel": "", "target": "" } }, "menus": [ { "enable": true, "children": [ { "enable": true, "icon": "/images/icons/svg/focus.svg", "name": "Focus on What Matters", "description": "Upstart tracks the essential website metrics you care about.", "url": "/features/" }, { "enable": true, "icon": "/images/icons/svg/privacy.svg", "name": "Put Privacy First", "description": "Upstart doesn't track users across websites or collect data.", "url": "/features/" }, { "enable": true, "icon": "/images/icons/svg/data.svg", "name": "Own Your Data", "description": "Upstart is self-hosted, meaning your website data stays on your server.", "url": "/features/" }, { "enable": true, "icon": "/images/icons/svg/time.svg", "name": "Instant Data Available", "description": "Upstart collected data is immediately available on your dashboard", "url": "/features/" } ] } ] }, { "enable": true, "name": "Elements", "url": "/elements/", "weight": 4, "badge": { "enable": true, "label": "NEW", "color": "primary", "_color_comment": "color expected value - primary, info, success, danger", "type": "text", "_type_comment": "type expected value - text, dot" } }, { "enable": true, "name": "Contact", "url": "/contact/", "weight": 5, "badge": { "enable": true, "label": "NEW", "color": "danger", "_color_comment": "color expected value - primary, info, success, danger", "type": "dot", "_type_comment": "type expected value - text, dot" } } ]}Footer Menus
The footer menus are defined under footer_menu, footer_menu_quick_link, footer_menu_resources, and footer_menu_legal arrays. Each array represents a section in the footer.
Example of Footer Menu:
{ "footer_menu": [ { "enable": true, "name": "Terms & Conditions", "url": "/terms-conditions/" }, { "enable": true, "name": "Privacy & Policy", "url": "/privacy-policy/" } ]}Configuration Options
name: The display name of the menu item.weight: The position of the menu item in the menu.url: The URL the menu item links to.enable: Indicates if the menu item is enabled.hasChildren: Indicates if the menu has sub-items (For dropdown menu only).hasMegaMenu: Enables mega menu for the item.badgeDisplays a badge next to the menu itemlabelThe text inside the badgecolorThe color of the badge -primary,secondary,success,danger,warning,infotypeThe type of badge -text,dot
Features Mega Menu
In Upstart theme, you will see the feature list is displayed in the mega menu. You can modify the Features object in main array in the menu.en.json file.
{ "enable": true, "name": "Features", "weight": 2, "hasMegaMenu": true, "cta": { "enable": true, "image": "/images/menu-cta.png", "title": "Gain Actionable Insights", "description": "Upstart is self-hosted, meaning your website data stays on your server.", "cta_btn": { "enable": true, "label": "Get Free Trial", "url": "/contact/", "rel": "", "target": "" } }, "menus": [ { "enable": true, "children": [ { "enable": true, "icon": "/images/icons/svg/focus.svg", "name": "Focus on What Matters", "description": "Upstart tracks the essential website metrics you care about.", "url": "/features/" }, { "enable": true, "icon": "/images/icons/svg/privacy.svg", "name": "Put Privacy First", "description": "Upstart doesn't track users across websites or collect data.", "url": "/features/" }, { "enable": true, "icon": "/images/icons/svg/data.svg", "name": "Own Your Data", "description": "Upstart is self-hosted, meaning your website data stays on your server.", "url": "/features/" }, { "enable": true, "icon": "/images/icons/svg/time.svg", "name": "Instant Data Available", "description": "Upstart collected data is immediately available on your dashboard", "url": "/features/" } ] } ]},Adding New Menu Items
To add a new menu item:
- Locate the appropriate section in the
menu.en.jsonfile (e.g.,mainfor primary navigation). - Add a new object with the required fields (
name,url, etc.). - Save the file, and the new item will appear in the corresponding menu on your site.
Disabling Menu Items
To disable any menu item, set the enable property to false.
{ "enable": false, "name": "Old Page", "url": "/old-page/"}This will hide “Old Page” from the navigation.
By following the above structure, you can easily manage and customize your site’s menus through the menu.en.json file.