Successful Ways of Managing Navigational Menus in Kentico

Navigation is very important part of every website. It solves two purposes:

Easy movement between pages.
roviding an overview of website’s content.

Kentico stores pages in a website content tree. The fundamentals of dynamic navigation are loading the page which comprises of page names and URL information and use the data to generate links.

The Requirements

Navigation is an important part of information architecture for any project. There are three common ways navigation items are defined:

1. Directly pointing to a specific page for example clicking on the menu opens up a unique and new page.
2. Navigation item is a parent of other navigation items.
3. Part of the navigation is driven by taxonomy or custom content element.

You can use the following default components to build your site’s navigation:

Points To Not Forget! Or ‘!forget’

While you are working with navigation components, please remember:

The navigation components always load and display data according to the navigation properties of the pages.
If the Page types property is empty, navigation components load and display only CMS. MenuItem pages. Breadcrumbs / CMSBreadcrumbs display all page types by default and it could be an exception.
Navigation components load all pages on the website, if the Path property is empty.
While writing ORDER BY expressions for navigation components which display pages in a tree structure, the root of the page tree (or sub-tree) must be first in the resulting order. It is suggested to start your Order By clauses with the NodeLevelcolumn, such as: NodeLevel, NodeOrder.
Navigation data sources always loads a default set of page columns which is required to correctly display pages in menus. Add extra columns if your menu needs data from a field which is not included in defaults. This can be done using Columns property. Use SQL queries debugging tool for finding a full list of the default navigation columns. Inspect the query performed by your navigation component.

Creating A Flat Menu Using The Repeater Web Part

For creating flat website navigation it is suggested to use Repeater or Basic Repeater. Here you have full control on HTML code generated for the individual menu elements in the transformation which is not true in case of CSS List web part.

Also remember, this approach requires additional configuration as compared to CSS List menu web part.

1. Place the Repeater web part on the page where you want menu to be displayed.
2. Configure the web part’s properties:

HTML Envelope -> Content before:

<ul class="CMSListMenuUL">
HTML Envelope -> Content after:
</ul>

Create a Transformation.

Below example of Text/XML transformation replicates the CSS List menu web part. It has Display highlighted item as link, Render link title and Render CSS classes properties enabled:


<li class="{% if (IsCurrentDocument()) { return "CMSListMenuHighlightedLI" } else { return "CMSListMenuLI" } #%}">
<a href="{% GetDocumentUrl() %}" class="{% if (IsCurrentDocument()) { return "CMSListMenuLinkHighlighted" } else { return "CMSListMenuLink" } #%}" title="{% HTMLEncode(DocumentName) %}">{% HTMLEncode(DocumentName) %}</a>
</li>

3. Configure additional properties which are always optional.
4. Save & Close.

Creating Hierarchical Menu Using The Hierarchical Viewer Web Part

For creating a hierarchical view which is also known as multilevel website navigation, it is advised using the Hierarchical viewer web part. The hierarchical viewer web part uses hierarchical transformations. You have full control on the HTML code generated for the individual menu elements in transformation.

Just like flat menu here also, it requires additional configuration.

1. Create transformations, inside container page type. Below mentioned example uses Header, Foooter, and Itemtransformations of the Text/XML type. You can place code in the transformations later.
2. Wherever you want to display menu, place the hierarchical viewer web part on that page.
3. Now, configure the web part’s properties:

Select Header transformation under Hierarchical transformations.

<ul class="CMSListMenuUL">

Create a new Footer transformation.
</ul>

Create a new Item Transformation.

Below mentioned example Text/XML transformation replicates the CSS List menu web part with the Display highlighted item as link, Render CSS classes, Render link title properties enabled.

*The {^ SubLevelPlaceholder ^} is a placeholder control which defines an entry point for nested transformations.

<li class="{% if (IsCurrentDocument()) { return "CMSListMenuHighlightedLI" } else { return "CMSListMenuLI" } #%}">
  <a href="{% GetNavigationUrl() %}" class="{% if (IsCurrentDocument()) { return "CMSListMenuLinkHighlighted" } else { return "CMSListMenuLink" } #%}" title="{% HTMLEncode(DocumentName) %}">{% HTMLEncode(DocumentName) %}</a>
  {^SubLevelPlaceHolder^}
</li>

4. Configure additional properties which is of course optional.
5. Save & Close.

Creating A Menu Using The CSS List Menu Web Part

Now we will understand creating basic two-level menu using CSS List menu web part with an example.

CSS List Menu web part renders links and loads page data inside standard HTML lists. These links will automatically lead to suitable page URLs and display the page names in the link text.

Adding The Menu Web Part

1. Open your website in Pages application.
2. Now create a new page.
3. Then open the new page’s Properties -> Template tab.
4. In the Page nesting section select None and click on Save.
(For creating menus disabling page nesting is not a required step, but it allow users to have a completely blank page for the purpose of an example).
5. Now switch to the Design tab.
6. In page add the CSS List menu web part.

7. Configure the web part’s properties:

Content filter -> Maximum nesting level: This ensures that the menu only loads and displays the first two levels of content tree of website.
HTML Envelope -> Content before:
<div class="SimpleMenu">
HTML Envelope -> Content after: </div>

8. Click OK.

The unstyled list of page links are displayed under an unstyled list. Inside parent pages on the second level in the site’s content tree appear in sub-lists.

Defining CSS Styles

Implement the design of the menu using CSS stylesheets. You can either assign a separate stylesheet to the page (shown in the example) or use the website’s main stylesheet.

1. Open the page’s Properties -> General tab.
2. Next to the CSS stylesheet property, uncheck the Inherit box.
3. Click New.

4. Enter the below mentioned CSS code once you type a Display name for the stylesheet:

 .SimpleMenu UL {
  Border: #c2c2c2 1px solid;
  Float: left;
  Font-size: 12px;
  Font-family: Arial;
  Background: #e2e2e2;
  Padding: 0px;
  Margin: 0px;
  List-style-type: none;
}

/* Makes the first menu level horizontal */
.SimpleMenu LI {
  Float: left;
}

.SimpleMenu A {
  Padding: 3px;
  Margin: 0px;
  Display: block;
  Width: 120px;
  Color: black;
  Text-decoration: none;
}

/* Highlights menu items on mouse-over */
.SimpleMenu A:hover {
  Background: #808080;
  Color: white;
}

/* Hides the second menu level by default */
.SimpleMenu UL UL {
  Display: none;
}

/* Displays the second level when hovering over an item on the first level */
.SimpleMenu UL LI:hover UL {
  Display: block;
  Border-top: none;
  Width: 125px;
  Position: absolute;
}

5. Click Save.
6. After saving the document close the CSS stylesheet properties dialog.
7. Save the page in order to assign the new stylesheet.

You can easily view the menu on the live site. Menu displays the first level horizontally. The second level appears whenever you will hover over menu items with the child pages.

Setting Navigation Properties For Pages

Let us see configuration of how individual pages will behave and appear if displayed by menus or other navigation elements.

1. Open the Pages application.
2. Select the page in the content tree (in Edit mode).
3. Switch to the Properties -> Navigation tab.

The navigation settings are applied whenever Kentico navigation web parts and controls display the given page.

Note: The navigation settings are not supported by standard listing components.

General Properties

Menu Actions

Adding Macro Expressions

You can use macro expressions in redirecting URL and JavaScript command fields. These macros allow you to insert values of given page which may include alias path and node name.

For example, inserting this command:

~/products.aspx?show=brand&aliaspath={%NodeAliasPath%}
Into the URL redirection field of the /MobileStore/Products/Android page redirects users to:
 http://<domain>/products.aspx?show=brand&aliaspath=/MobileStore/Products/Android

Menu Design

Menu item design properties come in three alternatives:

Standard design
Mouse-over design: This style can be used whenever users hover their mouse over the menu item.
Highlighted design: This style is implemented if the page is represented by the menu item is selected by the user.

Note: Some of the properties may not apply to all navigation web parts and controls.

Wrap Up

So, we have by now learnt a way of creating menus and seen how we can manage navigation menus in Kentico. For having better understanding on application development in Kentico, hire proficient developers with niche in latest tools and technologies. Do feel free to write to us and share your queries.

Don’t miss to grab some more knowledge about Kentico here:
Is Kentico Cloud The Right Option For You?
Website Development Using Kentico – Cloud First Headless CMS
5 Things To Expect From Kentico 10.0 Release
Kentico Project For Us Based Billion Dollar Steel Manufacturer Boosts International Business

References: kenticocloud, devnet.kentico, kentico

Bio
Latest Posts

Rachit Agarwal

Director and Co-Founder at Algoworks Technologies

Rachit is leading the mobility business development function, mobility strategy and consulting practice at Algoworks. He is an expert of all mobile technologies and has experience in managing teams involved in the development of custom iPhone/iPad/Android apps.