Toggle menu

Page Header and Top Level Menu

The header area is displayed at the top of every page. It contains site-wide components like the logo, top utility menu, top level menu and search bar.

The Chill Theme Header
 

Site Logo

The site logo is displayed in the top left of the header. It acts as a link to the homepage. Pick the image you would like to use in the "Site Logo" picker in the subsite configuration.

Top Utility Menu

The top utility menu is used to hold links to important pages on the site. These could include links to accessibility information or the site's login article.

The items displayed in this menu are links to the child articles of the article selected in the "Top utilities article" picker in the subsite configuration. The top utility article is normally turned off so that it doesn't appear in the site navigation and breadcrumb.

Care should be taken over the number of articles that appear here. The menu will wrap onto further rows to accommodate a large number of items.

Top Search Box

The top search box allows users to search for content on the site. The box contains the default placeholder text "Find...".

If search suggestions are enabled, up to four content suggestions are shown once three characters have been typed into the box. This list of suggestions is updated as further characters are entered. Selecting a suggestion will take the user directly to that content.

A search will be performed using the content of the box if a user presses the enter key or clicks on the search icon.

When a user performs a search, the results are displayed on an article using the search template. Pick your site's main search article using the article picker in the subsite configuration.

For full details of the search functionality, see the Search Template article.

Site Alert

Chill Site Alert
 

Beneath the main header content an optional site alert can be displayed. If enabled this alert will appear on every page of the site.

To turn the panel on, select an article in the "Site Alert article" asset picker in the subsite configuration. The alert displays the heading of the article, which acts as a link to the full article, along with the summary or introductory text. To turn the alert off, remove the article from the asset picker in the subsite configuration.

Top Level Menu

Beneath the main header an optional top level menu can be displayed. If enabled it will appear on every page of the site. The items in this menu can be either the direct child articles of the home page, or selected in the site's configuration.

All menu items use article headings, which can be overridden with alternate link text as normal.

Top Level Menu - Standard

Each item in the standard menu acts as a direct link to that article. Any number of items can appear in this mode, with the menu wrapping onto further rows as needed.

The image at the top of this page shows a standard menu with five items.

Top Level Menu - Extended

In extended mode only the first six articles in the top level menu appear as menu items.

If a menu item has child articles, an arrow appears to the right. Clicking the item opens a sub-menu which displays the first six child articles in a single row. If these child articles have child articles of their own, an arrow will appear next to them. On click the item expands, revealing the first four of those child articles. The items in these final lists always act as links to the relevant article.

If a top level menu item has more than six child articles a link to "View all..." items in the menu is displayed. If child articles in the sub-menu lists have more than four child articles, a link to "View all..." is displayed at the bottom of the list.

Where menu items don't have child articles they act as direct links to the relevant article.

For example:

Extended Menu
 

In the screenshot above, the top row of menu items are the child articles of the homepage. They all have child articles of their own so have an arrow next to them.

"System Administration" has been clicked, expanding the menu and revealing its first six child articles.

"iCM Management" has been clicked, revealing its first four child articles.

Because "System Administration" has more than six child articles, there's a link to "View all System Administration" at the very bottom of the menu.

Because "iCM Management" has more than four child articles, there's a link to "View all iCM Management".

The "Data Management" article has child articles, so an arrow appears next to it. Clicking that menu item would reveal a list of child articles.

The "Autoconfig", "Emails Sent by iCM" "External Content Search" and "iCM Single-Sign-On" menu items don't have any child articles, so don't have arrows and instead act as links to those articles.

We recommend that menu items like "System Administration" and "iCM Management" use the List template. This is so that when the "View all" links are followed, they will display all of their child articles in a list.

Configuring the Menu

There are three settings and two styles for the top level menu, all found in the subsite configuration.

Chill Top Menu Settings
 

Setting

The setting drop-down lets you turn the top menu off, create a menu using the direct child articles of the site's homepage, or create a custom menu from articles you choose. If you pick "On (Selected Articles)" a new field will appear which lets you pick articles from anywhere in the site and control the order they appear in.

Style

The top menu has two styles. The Standard style displays a simple list of articles, the Extended style generates an expanding menu from the chosen articles, as described above. The standard style can display any number of articles in it, the extended style will only display the first six articles.

Extended Style Colours

The colours of the items in the extended menu can be changed using iCM metadata. The subsite configuration's "Menu style modifier property" lets you pick a metadata property. The values held in this property can be related to articles and will be output in as BEM modifiers in the menu source that can be targeted by the site's skin.

Last modified on June 27, 2023

Share this page

Facebook icon Twitter icon email icon

Print

print icon