Your website navigation is determined by your website structure, and your menus and indexes can be generated automatically. This guide explains how navigation works, and how to configure it.
There are three types of navigation:
Website content is related to other website content through a parent-child relation. Every piece of content has a parent, which indicates which other content it lives "under".
The top-level content consists of the section (or home page) and all of the pages that are situated under the section. Together, these comprise the "top menu".
Under each page there can be other pages, which comprise a "sub-menu" under its respective top page. Under each of those pages can be another sub-menu, and so on, to whatever depth is necessary.
Secondary content is located under its container page, but is not included in regular menus. Instead, it is shown in the index to the content, which is usually part of the page body.
The index is simply a listing of all the secondary content items within the page. The format will vary depending on the type of page. For example, events in a calendar will be listed differently than articles in a blog, or products in a catalog.
Typically, items in an index will be displayed using the summary format for that content type. For example, articles will be listed using the article_summary format, wheres events will be listed using the event_summary format. From the summary, you can usually click through to the full content. Summary formats all have predefined defaults, but you can override these with your own formats using configuration settings like
content.format.article_summary = [HTML markup for article listings]
content.format.event_summary = [HTML markup for event listings]
...etc
Pages are included in menus and site maps by default. If you do not want them to be included, use the "Hide From" setting in the page configuration to hide them from menus or site maps, as needed.
Similarly, secondary content items can be hidden from indexes in the same way.
Note that only active/published content will be included in your automatically-generated navigation. Disabled and archived content will always be hidden.
The site map is a nested list showing all of the primary navigation points on your website in a single view.
Menus are lists of pages that you can embed in your templates to provide standardized navigation from everywhere in your website. They can be formatted in numerous ways, for example:
These listings can be formatted horizontally (eg. a menu bar), vertically (eg. a sidebar menu), or both (eg. a menu bar with drop-down submenus).
There is no preset mark-up for presenting menus. That part of menu building is handled by a menu plug-in, of which there are several to choose from (see below). The low-level CMS itself does not generate menu mark-up, it only generates the menu structure, which the menu plug-in then uses to generate its own mark-up to display the menu. This lets you change your menu presentation with a quick switch of your menu plugin, or mix-and-match your menu styles throughout your site, or even on a single page.
Sometimes you want to divide your site into submenus, but you don't want a top-level page to hold the submenu. To illustrate, a normal site map has a set of top pages, each with its own submenu:
The menu for this site map will show pages A and B in the top/main menu, and those pages exist in addition to and separate from their sub-menus.
But in some cases you might just want the A and B submenus, without the A and B top-level pages:
To organize your site this way, set up your site map the same as above, but configure A and B to have a content type of "category" rather than "page". A category is just a container for grouping your content, but doesn't actually contain any content of its own. It will still appear in menus, but only for the purpose of holding the sub-menu. You will not be able to navigate to the category URL.
To include something in your menu that is not a regular page, start by setting up a regular page object that will serve as the menu item. In the configuration for that page, you can manually specify the URL to use for its menu link. Enter the URL to your special content in that field. It can be a URL from your own site, a different site entirely, or a custom URL that you have configured your webserver to respond to (eg. a 302 redirect). Other than that URL, and the menu label, the page does not need to have any other content or settings.
This trick has numerous uses, for example:
Generating the actual HTML and Javascript to render your menus is the job of a menu plug-in. You have several choices included in the standard system, and can also write your own if none of these are suitable.
SimpleMenu generates HTML menus in a number of formats. It's menus are HTML-only; that is, there are no Javascript animations or other dynamic effects. It allows for simple but flexible markup, and can output five different types of navigation:
It can also display submenus in a variety of ways:
SimpleMenu will automatically append a logout link to the main menu if the current user is logged in.
To customize the mark-up used in these menus, you can use the following configuration settings in the SimpleMenu.conf file. The settings shown will give a simple but functional menu.
# hmenu_spacer goes between your horizontal menu items
hmenu_spacer = |
# pmenu_spacer goes between your path/breadcrumb links
pmenu_spacer = >
# vmenu_spacer goes between your vertical menu items
vmenu_spacer = <br>
# submenu_prefix goes before each submenu item, for example, to indent
submenu_prefix = ·
For more sophisticated control of your markup, add the following content objects to your website template:
Vertical menus:
Horizontal menus:
These content objects can contain whatever markup you want to wrap your menu links in.
The menu links themselves are simple anchor tags with a class of "menu", and possibly one of the following IDs:
<!--&SimpleMenu(keywords)-->
keywords are comma-separated
Keywords are:
BSmenu generates Bootstrap menus for your site. These include the following menu formats:
<!--&BSmenu(keywords)-->
keywords are comma-separated
In addition to the menu type, from the listing above, the following keywords are recognized:
SMenu generates SlickNav menus for your site. SlickNav automatically pops up submenus for deep navigation, and is fully responsive and mobile-friendly.
<!--&SMenu()-->
Behaviour is fine-tuned with configuration settings, not with keyword arguments.
VMenu is for generating expandable/collapsible vertically-formatted menus. A jquery plugin handles the animations.
<!--&VMenu()--> |
generates a full site menu (works best as a sidebar menu) |
<!--&VMenu(type=submenu-only)--> |
generates a submenu for the currently-viewed page |
<!--&VMenu(page_id=xxx)--> |
generates a submenu for a specific page |
<!--&VMenu(mode=sitemap)--> |
generates a site map |
CMenu is an alternate menu plug-in for generating cascading drop-down menus and sub-menus. A jquery plugin handles the animations.
<!--&CMenu()-->
generates a full site menu (works best as a menubar)