Tokens are small bits of code that let you integrate LightCMS's dynamic content management functionality with your website designs.  This section provides detailed information about our tokens and how to utilize them.

Global Menu

Token
<$globalmenu/$> 
Purpose

The global menu is the most versatile menu token, and can be manipulated by many attributes to create any number of menu configurations.

By default, this token outputs a set of nested unordered lists of hyperlinked menu items displaying the site's rootmenu and expanding down through the page structure to the current page plus the current page's children, if any.  This allows you to create a single, nested menu structure for the entire site.  As the user clicks a page in the menu, the menu expands to display that page's child pages, while keeping the rest of the site's root menu in view and available for navigation.

By utilizing the "showLevels" attribute (see below), you can restrict the output of the globalmenu to a specified set of menu levels. This allows you to create menus that only show pages from certain sections ... etc.

Attributes
  • cssClass=  used to specify your own custom CSS class for use in styling the menu list.  This class is attached to the top-level <ul> tag.
  • showHome=  determines whether or not "Home" is output as the first item in the menu item list.  This can be set as "true" or "false."  Default is "true."
  • alwaysShowChildren=  if set to "true," the token always outputs a complete set of nested, unordered lists showing every page in the site's structure at all times.  This is mainly used to create CSS-styled drop-down or fly-out menus.  Default is "false".
  • showLevels= a comma-separated set of integers specifying the menu levels that should be output by the token. For example, showLevels="1" would display only the root of the site, causing the globalmenu to function exactly like the rootmenu token. Or, showLevels="2,3,4,5" would eliminate the root of the site and display all other menu levels through level 5.
CSS
  • The CSS class, "selectedPage" is output in both the list item <li> and link <a> tags surrounding the menu item that represents the current page. 
  • The CSS class, "selectedPageRoot" is output in both the list item <li> and link <a> tags surrounding the menu item that represents the current page's root page (the page on the root menu under which the current page is found).
  • The CSS class, "selectedPageParent" is output in both the list item <li> and link <a> tags surrounding the menu item that represents any parent page of the current page IF the parent page is not the same page as the root page.
  • The CSS class, "hasChildren" is output on the list item <li> surrounding any menu item representing a page that has one or more child pages.
  • The CSS class, "level2" [replace integer with the current menu level] is output on the unordered list <ul> element surrounding each menu level, excluding the top level. (Note: the level designation is output relative to the current instance of the globalmenu token. Meaning that if you specify showLevels="3,4,5" then level 3 will be treated as the top level (with no class), level 4 will be classed as level2 and level 5 will be classed as level3. This allows for your level-specific styling to be consistent across all menu instances no matter the context.)
Example Usage
Use this token to create a single navigation menu on your site that expands and contracts in a nested manner as the user navigates through the pages.

<$globalmenu cssClass="globalNav" showHome="false"/$>

Or, use this token to create a expanding and contracting menu for a specific section of your site by eliminating the root level as follows:

<$globalmenu cssClass="sectionNav" showLevels="2,3,4,5,6,7,8" /$>

You may also use the Global Menu token to generate a complete list of all pages in the site for use in creating a CSS-styled drop down or fly-out menu system, by employing the alwaysShowChildren attribute. This can also be section specific by employing showLevels as well:

<$globalmenu cssClass="globalFlyOut" showHome="true" alwaysShowChildren="true"/$>

or

<$globalmenu cssClass="sectionFlyOut" showLevels="2,3,4,5" alwaysShowChildren="true"/$>