Navigation menu

Learn how to create and configure the Navigation Menu of your website

One of the most important parts of your site and one of the first you will have to modify is the Navigation Menu. Understand how it works and how to create it to make the visitor's browsing experience practical and fast.

To facilitate the work of creating a site for those who don't have much experience in HTML, HyperFluxCMS comes pre-configured with templates that, in principle, serve most of its target audience. But there is at least one template you will need to edit: the Navigation Menu.

The Navigation Menu offers visitors an easy way to go directly to a post or list of posts of interest to them.

For example, if your site is a city news portal, your navigation menu might have the options "General", "Politics", "Events", "Sports", and "Police". When the visitor clicks on one of the options, they will be shown a list of recent posts in that category.

HyperFluxCMS originally offers up to two levels of menus. In addition to the main menu, there can be submenus that are subcategories within a menu option.

For example, on a pizzeria site, there might be a menu with the "Menu" option and submenu "Sweet pizzas", "Savory pizzas", "Calzones", and "Beverages". Then there might be the "Prices" option, the "Address" option, and the "Reservations" option.

Understanding this, the first step is to decide whether you really want a menu on your site. Probably yes, because it is very useful and greatly speeds up visitor navigation. But for one reason or another, you might not want to have a menu.

Removing the Navigation Menu

To remove the Menu, you must be logged into an account of a user who has the permission to Change Site Settings and Appearance.

Then go to the "Templates" option, locate the "main-menu" template, and click "Edit".

In the "Template code" field content, delete everything. Save the template. Now your site no longer has a navigation menu. Open any page and test if it has really disappeared.

Creating the Navigation Menu

But if you want to keep the menu, first of all you will need to define your site's content.

Each menu item and subitem can be:

• a fixed page on your site (for example, the "About Us" page); or
• a listing of pages by category (for example, list all pages in the "Sports" category)

You can modify this later, but it's good to start your site already planning what content it will have and which deserves to appear in the main menu that will appear on most pages. Also think about which menu items will have submenus (remember the pizzeria example).

After having this in mind, it's time to edit your site's main navigation menu.

You must be logged into an account of a user who has the permission to Change site appearance and configuration. Then in the "Templates" option, locate the "main-menu" template and click "Edit".

The menu that comes originally when you install HyperFluxCMS is roughly like this:

[menu]
   [menuitem caption="Category1" url="/cat1"]
   [menuitem caption="Category2" url="/cat2"]
   [menuitem caption="Category3" url="/cat3"]
   [menu caption="Category4"]
      [menuitem caption="Category4.a" url="/cat4a"]
      [menuitem caption="Category4.b" url="/cat4b"]
      [menuitem caption="Category4.c" url="/cat4c"]
   [/menu]
   [menu caption="Category5"]
      [menuitem caption="Category5.a" url="/cat5a"]
      [menuitem caption="Category5.b" url="/cat5b"]
      [menuitem caption="Category5.c" url="/cat5c"]
   [/menu]
[/menu]

If the template code starts with a line [pragma....] do not change it. Leave it as is, unless you really know what you are doing.

The lines [menu] and [/menu] must also be kept. They tell HyperFluxCMS that what is between the two lines are instructions on how it should build the navigation menu.

Now analyze the rest and try to understand the structure.

Those that appear as [menuitem caption="xxxx" url="xxxx"] indicate a menu item.

What is marked as caption is the text that will appear. This is the text you should edit as you wish: "Politics", "Sports", "Plans and Prices", "Reservations", etc. Don't forget to leave it in quotes.

What is indicated as url is the destination page or category that will be opened when the visitor clicks on this item. It can be a page on the site itself, such as "/plans", or a category, such as "/sweet-pizzas".

Note that there is apparently no difference between a fixed site page and a category. This is a characteristic of HyperFluxCMS. If the visitor types, clicks, or opens a link, HyperFluxCMS first checks if there is a page that has that name as its permalink. If not, it displays a listing of pages that have that text as one of their categories.

For example, when trying to access the link "your-site-name.com/help", HyperFluxCMS first looks for a post whose permalink is "help". If it finds it, that post is displayed. If it doesn't find it, it creates a list of all posts in which "help" is one of the categories. If there are none, it will show an empty list or the "404 Not Found" error page or equivalent.

The url can also be a link to an external page. For example, to your store on a marketplace, or on iFood, or on a social network. You must provide the full url, including "http://" or "https://". For example: "https://amazon.com.br/xxxx...."

Going back to analyzing the navigation menu code, note that Category1, Category2, and Category3 items are simple items. If the visitor clicks on one of them, they will be directed to the page or post listing "/cat1", "/cat2", or "/cat3", respectively.

For the Category4 item, it is different. Instead of being a menuitem, it is another menu, meaning it has subitems. When the visitor clicks on it, instead of being directed to a page or listing, what will happen is that the submenu options will be displayed. The Caption property of the menu indicates the text that will appear to the visitor in the main menu bar. In this case, "Category4"

After this submenu markup, there are more lines indicating the submenu options. They use the same principle already explained. Caption indicates the text that appears to the visitor and url indicates the page or category that will be displayed.

After listing the submenu items, you need to tell HyperFluxCMS that the list for that submenu has ended. This is done with the line [menu].

[menu]
   [menu caption="Menu"]
      [menuitem caption="Savory pizzas" url="/savory-pizzas"]
      [menuitem caption="Sweet pizzas" url="/sweet-pizzas"]
      [menuitem caption="Calzones" url="/calzones"]
      [menuitem caption="Beverages" url="/beverages"]
   [/menu]
   [menu caption="Service"]
      [menuitem caption="Addresses" url="/addresses"]
      [menuitem caption="Business hours" url="/hours"]
      [menuitem caption="Reservations" url="/reservations"]
   [/menu]
   [menuitem caption="Order online" url="https://www.ifood.com.br/delivery/city-sp/pizzeria-eight-cheeses/26390598-5de9-46ad-bd96-aa6a24fdf31c"]
[/menu]

Then save the template, load a page, and test if the menu is correct, both the texts, the organization, and especially if all the links (urls) are working correctly. Test them all. You could end up losing sales and customers due to a small typo in a link that would lead to the most important part of your site, or to your online store.