PyroCMS Navigation

What is Navigation?

"The science of finding a way from one place to another"

For a web site, that is usually the Menu that appears somewhere on the web page, allowing navigation to other pages on the site.

PyroCMS Menus

For any web site, the entries on a Menu must somehow be linked to the page content that is to be displayed. PyroCMS does this in the Admin Navigation, which can be found in the Admin Structure menu drop-down.

A web site can have menus displayed in many different ways on pages, for example, the standard menu across the top of a page, or as a list in a panel at the side of a page. Different menus may also be needed if different languages are to be accommodated. PyroCMS therefore can define Menu Groups. A group can then be referenced and displayed on pages where it is appropriate. For PsM we only use a horizontal menu at the top of pages, but it can be in different languages. Therefore we have a Menu Group for each language that is being used.

Here you see we have three Menu Groups, each one is called "Header" and suffixed with the language 2 letter abbreviation. When the Group was created it was given a Title. For example, the English Group was "Header-en", which automatically generated a Slug for the group of "header-en". The slug was then amended manually before saving to simply be "en". This slug then corresponds directly to the system abbreviation for each language and forms part of the ability of the system to switch between language versions of the "same" page.

The structure of entries in a menu group is used to determine top-level menu entries and sub-level fly-out menu entries. The structure of entries in the Pages area should match the Navigation Menu entries for two reasons. The first is so that the URLs for the pages match the menu structure making the relationship between them logical. The second is your own sanity!! Without a matching structure trying to remember what Page relates to which Navigation Menu entry would be very hard.

Here you see the Info. top-level Navigation Menu entry expanded (by clicking the + to the left) to show sub-level entries. Those form a drop-down list in the page Menu, the entry Local Services (also opened by clicking the + to the left) shows a lower level of entries that form a fly-out in the page Menu.

*TIP Any Navigation Menu entry that has the action in a page Menu of either dropping a list of sub-entries or showing a fly-out menu list, CAN'T be a page that has content! Consider a user on a touch screen device. If the Navigation Menu entry Info. in the above structure was a page, then as soon as the user clicked the menu entry it would load that page. The sub-menu would never be displayed, preventing access to all the pages in the lower levels of that menu structure.

Structure

If you create a new Navigation Menu entry in a Group it will always appear at the bottom of the Group listing. You must then click and drag the entry to the position in the menu where you want it to appear. The position in the listing relates to where it appears in the Page Menu.

So for example, the Header-en menu appears across the page with the entries Home, About Us, Messages, Events, Activities, etc. In the listing they are the top-level, aligned to the left, but with "+" against them to show they have lower levels. As you open the lower level for these by clicking the "+" you see indentation that indicates sub-levels of the menu structure.

So when you drag and drop an entry sliding it to the left or right will determine the level at which it appears. Just keep dragging and sliding an entry until you position it where it is required.

*TIP Remember, every time you move a Navigation Menu entry, any web user who loads a page will see the menu as you have just arranged it. If you are inserting a new Page, keeping the Page status as "Draft" will prevent the page from being displayed and also prevent the Navigation Menu entry from being shown. Position the Navigation Menu entry correctly, then make the Page status "Live" to enable it in the web pages menu and avoid confusion to web visitors.

Menu entry information

When creating an entry you must give the text for what will appear in the Page Menu on the web pages, then link that to a Page that is in the Pages area of the site. Therefore you should always have created the Page before trying to create the Navigation menu entry here.

*TIP If you create a new Page entry, part of that process allows you add an entry into the Navigation for the page automatically. This simplifies adding a new Navigation entry! The Navigation entry will NOT, however, appear in the structure where you want it, it will ALWAYS be the last item in the menu. You must come to this Navigation area and relocate the entry to the correct place in the structure immediately after completing the Page.

When you click the Add Link button you will see in the right side a series of fields used for the Navigation Menu entry.

Title is the text that will appear in the Menu on the web pages. Usually, this is the same as the Title of the Page that is to be used. Sometimes you need to abbreviate that name, consider what is sensible to appear in the menu!

Link Type is the type of link for the item. You can link to other web sites and special usages with PsM site. Those are very seldom used, the only type that is normally used is the Page, so select that value.

Having selected a Link Type of Page you will then see:

Now you have a new field, Page.

"Page" allows you to select the Page that you want to be shown from this Navigation Menu item. The drop-down shows the Page Titles in the sequence that they are structured in the Pages area. Therefore you should look for the language group you want before finding the Page itself. You can also type the Title of the Page after clicking the drop-down and it will search for the Page, showing you a selection based on what you type. As the number of Pages is now quite large, finding the correct Page can be difficult, which is why I recommend using the option to add the Page into the Navigation when creating the Page itself.

Target determines how the item opens the linked page. Normally you leave the value as Current window (default).

Restricted to will make the page only available to certain users. In other words, only available to someone who is logged in to the Admin part of the site. Almost every Page is intended for the public to see, so setting this to any other value would prevent the public view of the page.

Class is for very special use, and should always be left blank.

REMEMBER that as soon as you save the entry it will appear at the bottom of the Group entries. You must drag and drop it to the correct position in the Navigation menu.

*TIP Entries that appear in the TOP LEVEL of the displayed menu should have short Titles. The number of TOP LEVEL menu items should be limited as well. If the overall effect of displaying those entries across the web page makes the last item wrap round to a second line, your Menu is BROKEN! Users will be totally unable to get to lower levels of any menu item because the top-level item and its drop-down display become separated, the space between causing any mouse movement to close the drop-down effect before you can choose an entry.