Documentation Download as PDF

Menu Manager

Caribou 2.0+ includes a menu creation and management tool right in the control panel. These tool is available at Layout > Site Menus in the control panel. You can maintain multiple menus within Caribou. The majority of sites will have one menu that runs throughout the entire site (default name: “main”).

Using the Menu Management Interface

When the interface loads, you will be presented with two boxes. On the right is a box that lists all content (articles, forms, downloads, topic/blog pages, etc.). On the left are the current elements in their current order for the menu. Dragging content from the right box to the left box will add that content to the current section of the menu. Dragging an element from the left to the right box will remove that element (and all of its children) from the menu. They will be available to re-insert immediately. Elements can be ordered by dragging up and down in the left box. The standard setup is for 2 potential tiers of navigation. This would like something like:

  • Home
  • Store
    • Golf Clubs
    • Polo Shirts
  • Corporate Info
    • About Us
    • Contact Us

The starting view of your menu in the menu management interface is the first tier. To add or edit children of any link element, click the site map icon in the element’s row in the left box. Only standard content items can have children. Special elements (marked with a star) generate their own second tier navigation items. Also, external links aren’t allowed children because when someone clicks them, they are taken away from the site.

Link Options

Both special elements and regular content items have link options that can be edited by clicking the Gear icon beside the content item in the left box:

  • Display Text is the text that is seen in the link. You may want to change this if the current text is too short or inaccurate.
  • Link is the address the link points to. This is only editable for external links.
  • Viewable to User Groups will only show the link to members of the selected usergroup(s) if not set to public.
  • Hide children unless this node is active? will, when checked, not display the links in this element’s sub-tier unless the user is viewing this element (or one of its children).
  • Hidden unless parent node is active is related to the above. However, with this option, you can hide certain sub-links despite the parent link being set to show all children. So, you may want to show 3 main pages under your Documentation link but hide the 7 others. Only when someone is viewing the Documentation page or one of its subpages will all 10 sub-links be displayed.

Using Menus in Templates

By default, one menu (the “main” menu) is loaded in the templates. However, you can modify this inclusion or add more menus in any template you would like.

To include a user-generated menu in a template, use the following template code:

{menu load="[menu_name]"}

That code will load a menu like:

<ul>
	<li class=”active”><a class=”active” href=”index.php”>Home</a></li>
	<li class=”parent”><a href=”store/”>Store</a>
	<ul class=”child”>
		<li><a href=”store/cat/clubs”>Golf Clubs</a></li>
		<li><a href=”store/cat/shirts”>Shirts</a></li>
</ul>
</li>
</ul>

There are other options for the menu template function that can add a class and/or an id to the menu’s main ul tag. You can use neither, either, or both in the menu call. For example:

{menu load="navlinks" id="nav" class="mainnav"}

The above template code will generate menu HTML with a surrounding ul element like:

<ul class=”mainnav” id=”nav”>
	<!--  links would be here -->
</ul>

CSS Styling of Menus

As is exemplified above, the HTML that Caribou generates for menus is clean XHTML that is easy to style. To help with CSS styling of menus, a list of element class rules and markup rules are below. It may be easiest to simply use the menu manager and look at the final HTML yourself, though.

  • All sub-links (children) are included in a ul element within the parent li tags.
  • You can specify the class and ID of the main menu ul element through the menu plugin call (see above).
  • All 2nd tier child ul elements have the class "children".
  • All 3rd tier child ul elements have the class "babies".
  • All 2nd tier child li and a elements have the class "child".
  • All 3rd tier child li and a elements have the class "baby".
  • All active elements have the class "active".
  • All elements with children have the class "parent".

New to CSS? Or unfamiliar with how to turn unordered lists (ul's) into menus? Start by setting the "list-style" attribute of the ul tag to "none". This will turn your bulleted list into a row of text boxes with links.