Menus Entity

The Menus application is the central place for managing all the menu items. Menu items are generally organised into two main menu groups, heater-menu & footer-menu, however the system allows to create as many menus & menu items as required. 

The Menus application is located under the Content category:

Manage Menus

Menu options

• List - Lists all the menus. This is where you can create new menus, edit and delete existing menus. 

• Configuration - Currently, there are no settings that can be configured for this module.

List Menus

All the pages are presented within a table format. In the case where there is a large number of menus, use the search field to narrow the search results. 

To add a new Menu to the list click on the “Add Menu” button positioned at the top of the Menu admin page. Add a name of the menu and click save, the new menu will be added to the main menu listing page.

Step 1: 

Step 2:

Step 3:

Use the “pencil” icon at the right of the menu to edit the existing menu, or “three-dots” for more actions such as: “Add Child” or “Remove”. 

Manage Menu Items

Each menu holds a set of menu items which are then displayed on the frontend. This could be pages such as Home - About Us - Services - Contact Us etc. 

Within the menu it is also possible to create sub-menus, sub-sub-menus etc. depending on the website requirement. Additionally, if we take the Core dna Theme 3 sandbox example it is also possible to convert sub-menus into mega menus where items can be grouped into columns, more information around this can be found further below in this document. 

In order to view all the existing menu items within a specific menu click on the “numbers” link within the menu listing table:

Within the menu items admin area all the menu items will be listed, example of the header-menu listing below:

Note: the order and hierarchy of the menu items in the admin are also reflected in the frontend. For example in the admin the Home, About Us, Products are positioned first, the same happens in the frontend of the website:

Same applies to sub-menu items. Example of the simple dropdown structure in the Admin below:

Notice the Simple Menu has two child pages (FAQ & Contact), they are presented as per below on the website:

Similar applies to Mega Menu, however in this case the menu items are grouped into columns (depending on the requirement, it is possible to have one-two-three-four columns under each mega-menu item):

• Parent Page:

  • Column 1 (group)

    • Item One

    • Item Two

    • Item Three

  • Column 2

    • Item One

    • Item Two

  • Column 3

    • Item One

    • Item One

  • Column 4

    • Item One

    • Item Two

    • Item Three

To enable the mega menu feature on a menu item edit the parent page where all the columns will be setup and created. On the Core dna Theme 3 site, a parent item would be the “Mega Menu” page:

Edit the Mega Menu page by clicking on the “pencil” icon positioned on the right hand side of the item. Within the Edit Page area enable the Mega Menu toggle button within the custom fields area:

This will tell the system to apply another set of stylings to the website required to display the menu item as a mega menu, as per the example below on the Core dna Theme 3 sandbox:

Other options such as adding a short description or a Font Awesome icon to each menu item is supported in Core dna Theme 3 Sandbox website. This can be further customised by adding additional required checks within Content > Common > Layouts area. 

Create a Menu Item

A Menu Item can be added to the page using one of the two methods, by clicking on the top “Add Menu Element” button, or by clicking on the “three-dots” on the parent item where we would like to create this new child item:

The difference between the two methods is that “Add Menu Element” will create a new menu item and add it to the bottom of the menu items list, while creating a new item via “three-dots” will add the menu item under the defined parent item. 

To move the item into the desired location a drag and drop function can be used, simply click and hold the “double three-dots” positioned at the start of each menu item:

Both actions will redirect to the Edit menu item admin page where the menu item can be further configured.

Step 1: Add Menu Details

Populate and configure the following fields:

• Name: Define the name of the item that will also be presented on the frontend of the website

• Parent: Assign or update the parent page where this menu item belongs to, leave blank if the menu item is considered as a parent page itself, such as Home or About Us. 

• Type: Choose between the following menu item types that would work the best for the new menu item:

  • Text only: use this type if the menu item should just be a text placeholder in the menu, while not linking to any page. This is useful for the Columns pages in the mega menu, or even the parent page on the mega menu so the users are not redirected when the parent page is clicked. 

  •  URL: use this type if the menu item should be linked to a specific internal or external URL. It is recommended to use this for only external URLs, as internal ones could change and the menu item will have to be updated as well in that case, for internal links the next type is recommended

  • Content: use this type to link the menu item to the existing record on the website, that can be a Page-Blog-FAQ etc. This way if the url on any of the pages change, the menu item will still be valid as the menu item is tied to a record, no to the URL directly

  • Controller Function: Link to other systems, e.g. list blogs

How to use the "Content" Type:

1. Select a content type

2. An Entity field will show, select the entity type the menu item should be linked to, eg. Page

3. Once the page has been selected another field will appear, Record, where the existing Page from the pages module can be linked to this menu item. 

4. Select the Record to the Menu item, done. 
   
   

Include Children: If this is selected, sub-menu elements for children of the selected record will also be generated. In this case there won't be a need of creating all the sub-child menu items, they will automatically display under the created menu item. 

Custom Fields

Custom fields are addons that can be introduced to the menu items in order to extend the menu item functionality. In the case with the Core dna Theme 3 sandbox, additional functionality would include adding an icon & short description to the menu item. There is also a Mega Menu toggle to enable the mega menu style on the frontend, however this can only be used on the Parent Page, while internal pages will have it but will not make an effect on the styling of the menu items.

Step 2: Save & Publish

To save the menu item click the “Save” button positioned on the right hand site of the admin. Enable “Published” toggle to make the menu item publicly visible (the same can be achieved via List admin page):