---
title: Building website navigation
related:
- https://docs.kentico.com/k9/developing-websites/designing-websites-using-css.md
- https://docs.kentico.com/k9/developing-websites/loading-and-displaying-data-on-websites/writing-transformations/using-hierarchical-transformations.md
- https://docs.kentico.com/k9/configuring-kentico/setting-up-search-on-your-website.md
- https://docs.kentico.com/k9/developing-websites/loading-and-displaying-data-on-websites/loading-page-data/writing-page-path-expressions.md
- https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation.md
- https://docs.kentico.com/k9/configuring-kentico/search-engine-optimization/google-sitemaps.md
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
Navigation is a necessary part of every website. The purpose of navigation is to:
- Allow users to easily move between pages
- Provide an overview of the website's content
Kentico stores pages in the website content tree. The basic principle of dynamic navigation is to load page data, such as page names and URL information, and use the data to generate links. The appearance of the links primarily depends on the website's CSS.
You can use the following default components to build your site's navigation:
| Navigation web parts | Navigation controls |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| On [portal engine](https://docs.kentico.com/k9/developing-websites/developing-websites-using-the-portal-engine.md) pages, build your navigation using the following web parts:
**Repeater/Basic repeater** (recommended for flat navigation)
**Hierarchical viewer** (recommended for hierarchical navigation)
**CSS list menu** (simple, but limited markup customizations)
**Breadcrumbs**
**Tab menu**
**Tree view**
**Site map** | Use controls to create navigation on [ASPX page templates](https://docs.kentico.com/k9/developing-websites/developing-websites-using-aspx-templates.md) or inside custom components:
[CMSBreadCrumbs](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation/cmsbreadcrumbs.md)
[CMSListMenu](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation/cmslistmenu.md)
[BasicTabControl](https://docs.kentico.com/k9/references/kentico-controls/basic-controls/basictabcontrol.md)
[CMSTabControl](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation/cmstabcontrol.md)
[CMSTreeView](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation/cmstreeview.md)
[CMSSiteMap](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation/cmssitemap.md)
[CMSUniView](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers/cmsuniview.md) |
All navigation components contain a built-in data source for loading pages (except for the _Basic repeater_ web part, and the _BasicTabControl_ control).
You can choose which pages to load by configuring standard [page filtering](https://docs.kentico.com/k9/developing-websites/loading-and-displaying-data-on-websites/loading-page-data.md) properties, such as the **[Path](https://docs.kentico.com/k9/developing-websites/loading-and-displaying-data-on-websites/loading-page-data/writing-page-path-expressions.md), Page types** or **WHERE condition**. Use the **Select only published** and **Check permissions** properties to ensure that the navigation is accurate on the live site.
Please be aware of the following behavior when working with navigation components:
- Navigation components load and display data according to the [navigation properties of pages](#setting-navigation-properties-for-pages).
- If the **Path** property is empty, navigation components load all pages on the website (equivalent to /%).
- If the **Page types** property is empty, navigation components load and display only _CMS.MenuItem_ pages.The _Breadcrumbs / CMSBreadcrumbs_ component is an exception, and displays all page types by default.
- When writing **ORDER BY** expressions for navigation components that display pages in a tree structure, the root of the page tree (or sub-tree) must be first in the resulting order. Always start your Order By clauses with the **NodeLevel** column, for example: _NodeLevel, NodeOrder_
- Navigation data sources _always_ load a default set of page columns (required to correctly display pages in menus). The **Columns** property allows you to add extra columns if your menu needs data from a field that is not included in the defaults. To find a full list of the default navigation columns, use the [SQL queries debuggingtool](https://docs.kentico.com/k9/developing-websites/troubleshooting-websites/debugging.md) and inspect the query performed by your navigation component.
## Creating a flat menu using the Repeater web part
We recommend using the **Repeater** or **Basic repeater** web part for creating a flat website navigation. Unlike the **CSS List menu** web part, you can fully control the HTML code generated for the individual menu elements in the transformation.
Note that compared to the **CSS List menu** web part, this approach requires additional configuration.
1. [Place](https://docs.kentico.com/k9/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Repeater** web part on the page where you want the menu displayed.
2. Configure the web part's properties:
- **HTML Envelope -> Content before**:
```xml
```
- Create a **Transformation**. The following 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:
```xml
{% HTMLEncode(DocumentName) %}
```
3. (Optional) Configure [additional properties](#configuring-additional-properties-when-using-listing-web-parts-for-navigation).
4. **Save & Close**.
## Creating a hierarchical menu using the Hierarchical viewer web part
We recommend using the **Hierarchical viewer** web part for creating a hierarchical (multi-level) website navigation. Unlike the **CSS List menu** web part, you can fully control the HTML code generated for the individual menu elements in the transformation.
The **Hierarchical viewer** web part makes use of [hierarchical transformations](https://docs.kentico.com/k9/developing-websites/loading-and-displaying-data-on-websites/writing-transformations/using-hierarchical-transformations.md).
Note that compared to the **CSS List menu** web part, this approach requires additional configuration.
1. In a container page type, create the transformations that you will need. This example will use a **Header**, **Foooter**, and **Item** transformations of the Text/XML type. We will place code in the transformations later.
2. [Place](https://docs.kentico.com/k9/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Hierarchical viewer** web part on the page where you want the menu displayed.
3. Configure the web part's properties:
- In **Hierarchical transformations**, select the **Header** **t\*\*\*\*ransformation**.
```xml
```
- Create a new **Item** **Transformation**. The following 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 that defines an entry point for nested transformations.
```xml
{% HTMLEncode(DocumentName) %}
{^SubLevelPlaceHolder^}
```
4. (Optional) Configure [additional properties](#configuring-additional-properties-when-using-listing-web-parts-for-navigation).
5. **Save & Close**.
## Example - Creating a menu using the CSS List menu web part
The following example demonstrates how you can create a basic two-level menu using the **CSS List menu** web part.
> **Info:** The CSS List Menu web part loads page data and renders links inside standard HTML lists (composed of **** and **** elements). The links automatically lead to the appropriate page URLs and display the page names in the link text.
### Adding the menu web part
1. Open your website in the **Pages** application.
2. [Create a new page](https://docs.kentico.com/k9/managing-website-content/working-with-pages/creating-new-pages.md).
3. Open the new page's **Properties -> Template** tab.
4. Select **None** in the **Page nesting** section and click **Save**.
- Disabling [page nesting](https://docs.kentico.com/k9/developing-websites/developing-websites-using-the-portal-engine/inheriting-portal-engine-page-content.md) is not a required step for creating menus, but allows you to have a completely blank page for the purposes of the example.
5. Switch to the **Design** tab.
6. [Add theCSS List menuweb part](https://docs.kentico.com/k9/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) to the page.
7. Configure the web part's properties:
- **Content filter -> Maximum nesting level**: 2 (ensures that the menu only loads and displays the first two levels of the website's content tree)
- **HTML Envelope -> Content before**:
- **HTML Envelope -> Content after**:
8. Click **OK**.
The web part displays an unstyled list of page links. Pages on the second level in the site's content tree appear in sub-lists under the parent pages.
### Defining CSS styles
Implement the design of the menu using [CSS stylesheets](https://docs.kentico.com/k9/developing-websites/designing-websites-using-css.md). 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. Uncheck the **Inherit** box next to the **CSS stylesheet** property.
3. Click **New**.
4. Type a **Display name** for the stylesheet and enter the following **CSS code**:
```css
.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. Close the **CSS stylesheet properties** dialog.
7. **Save** the page to assign the new stylesheet.
You can now view the menu on the live site. The menu displays the first level horizontally, and the second level appears when hovering over menu items with child pages.
## Setting navigation properties for pages
You can configure how individual pages behave and appear when 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 apply when Kentico navigation web parts and controls display the given page.
> **Note:** **Note**: The navigation settings are not supported by standard listing components (for example if you display your navigation using a **Repeater** web part and transformations).
### Basic properties
| Property | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Menu caption | The name that navigation elements display for the page. If empty, the system uses the page name. |
| Show in navigation | Indicates if navigation controls and web parts display the page.
**Note**: Navigation components display pages if all of the following conditions are met:
The **Show in navigation** box is checked.
The page is [published](https://docs.kentico.com/k9/managing-website-content/working-with-pages/using-workflows.md).
The type of the page matches the page types configured in the given navigation web part or control. By default, navigation components only display **CMS.MenuItem** pages.
If you enable the **Check permissions** property of the menu web part or control, users can only see pages that they are allowed to read. |
| Show in site map | Indicates if the page is included n the website's [Google sitemap](https://docs.kentico.com/k9/configuring-kentico/search-engine-optimization/google-sitemaps.md).
Additionally, **Site map** web parts and [CMSSiteMap](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation/cmssitemap.md) controls only display pages that have this property enabled. |
### Menu actions
| Property | Description |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Standard behavior | Clicking the menu item opens the page as expected. |
| Inactive menu item | Clicking the menu item doesn't cause any action — the item is disabled.
You can also fill in the **Redirect to URL** field, which allows you to automatically redirect users who access the page to a different location (for example when users access the given page through an external link). |
| Javascript command | The page runs the entered JavaScript command when users click the menu item.
**Example**: _alert('hello')_;_return false_; |
| Redirect to first child | Redirects users to the page's first published child page (shown in parentheses).
Redirected pages are marked with the  icon in the content tree. |
| URL redirection | Redirects users to the target location when they access the given page. Applies in all situations, not only when users click on navigation elements.
Redirected pages are marked with the  icon in the content tree.
**Example**: _http://www.domain.com_ or _\~/products.aspx_ |
> **Info:** **Adding macro expressions**
>
> You can use [macro expressions](https://docs.kentico.com/k9/macro-expressions.md) in the **URL redirection** / **Redirect to URL** and **JavaScript command** fields. Macros allow you to insert values of the given page, such as the alias path, node name. Use expressions in format _{% ColumnName %}_.
>
> For example, entering:
>
> - _\~/products.aspx?show=brand\&aliaspath={%NodeAliasPath%}_
>
> Into the **URL redirection** field of the _/MobileStore/Products/Android_ page redirects users to:
>
> - _http:///products.aspx?show=brand\&aliaspath=/MobileStore/Products/Android_
>
> **Note**: The system escapes all apostrophes in the source data to to avoid breaking JavaScript ( ' -> \\' ).
### Menu design
The menu item design properties are available in three alternatives:
- **Standard design**
- **Mouse-over design** - style used when users hover their mouse over the menu item
- **Highlighted design** - style applied if the page represented by the menu item is selected by the user
These values override:
- The settings of individual navigation web parts (controls) unless their **Apply menu design** (**ApplyMenuDesign**) property is _disabled._
- The CSS styles defined in the page's [CSS stylesheet](https://docs.kentico.com/k9/developing-websites/designing-websites-using-css.md).
> **Note:** **N\*\*\*\*ote**: Some of the properties may not apply to all navigation web parts and controls.
| Property | Description |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| Menu item style | Style definition of the menu item. Enter values like when writing CSS classes in stylesheets.
Sample value: _color: orange; font-size: 140%_ |
| Menu item CSS class | Assigns a CSS class from the page's CSS stylesheet.
Sample value: _h1_ |
| Menu item left image | Image displayed on the left of the menu item's caption.
Sample values:
_http://www.domain.com/image.gif_
_\~/Images-(1)/icon.aspx_ |
| Menu item image | Image displayed in menus instead of the item's caption. You can enter absolute URLs or relative paths. |
| Menu item right image | Image displayed on the right of the menu item's caption. |
### Configuring additional properties when using listing web parts for navigation
When using the general web parts (Repeater, Basic repeater, Hierarchical viewer) to create a menu, you may want to use certain advanced properties. The following is a list of the specific properties and instructions on how to replicate them:
| Property | Description | Where to replicate | How to replicate |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Preserve the show in navigation flag** | Makes sure only pages that have the _Show in navigation_ property set to true are displayed. | In the web part's **WHERE condition**
Configure the **Show in navigation** property for each page in:
**Pages -> Properties -> Navigation -> Show in navigation** | DocumentMenuItemHideInNavigation = 0 |
| **Select the current page** | Adds a special CSS class to a page if it's the current page. | In the web part's transformation | {% if (IsCurrentDocument()) { return "item-current" } else { return "item" } #%} |
| **Highlight the selected path** | Allows the menu to show the path to the page you are currently viewing. | In the web part's transformation | {% IsDocumentOnSelectedPath() %} |
| **Custom menu caption** | Allows you to use custom menu captions for specific pages. By default, the system uses the Page name. | In the web part's transformation
Define the caption for each page in:
**Pages -> Properties -> Navigation -> Menu caption** | {% HTMLEncode(String.IsNullOrEmpty(DocumentMenuCaption) ? DocumentName : DocumentMenuCaption) %} |
| **Custom menu CSS class** | Allows you to use custom CSS classes for specific pages. | In the web part's transformation
Define the custom CSS class for each page in:
**Pages -> Properties -> Navigation -> Menu item CSS class** | {% HTMLEncode(DocumentMenuClass) #%} |
| **Subitems check** | Allows you to return a custom indicator if a page contains children. | In the web part's transformation | {% if (NodeHasChildren) { return "has-children" } %}
**Workflow:** Use _Node.Count_ instead of _NodeHasChildren_ if your pages use workflow. |
| **Item order the same as in Content tree** | Displays the pages in the menu in the same order in which they appear in the Content tree. | In the web part's **ORDER BY** condition | NodeLevel, NodeOrder, NodeName |
## Using CSS prefixes
CSS prefixes allow you to:
- Specify different styles for any level of hierarchical menus
- Place multiple menu web parts or controls of the same type on the same page and differentiate their CSS classes
You can work with CSS prefixes when using the CSS list menu web part (property name: _CSS prefix_) or [CMSListMenu](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation/cmslistmenu.md) control (property name: _CSSPrefix_).
> **Note:** **Note**: To use CSS prefixes with the **CSS list menu**, you need to enable the **Render CSS classes** property.
### Example
The following example shows how to specify different styles for individual levels of a [CMSListMenu](https://docs.kentico.com/k9/references/kentico-controls/cms-controls/cms-controls-navigation/cmslistmenu.md) control (or the CSS list menu web part):
1. Fill in the **CSSPrefix** property of the control or the web part with the following value: _MainMenu;SubMenu;OtherLevels_
- Semicolons separate individual levels of prefixes.
- Every prefix represents a lower level of the menu, starting from the main level (0).
- The last defined prefix also represents all remaining sub-levels.
- If you only wish to differentiate between CSS classes used by multiple menus on the same page, setting one prefix level is sufficient.
2. Define the following CSS classes in the page's stylesheet:
```css
/* Classes applied to the first level of the menu (level 0) */
.MainMenuCMSListMenuUL
.MainMenuCMSListMenuLI
.MainMenuCMSListMenuLink
/* Classes applied to the second level of the menu (level 1) */
.SubMenuCMSListMenuUL
.SubMenuCMSListMenuLI
.SubMenuCMSListMenuLink
/* Classes applied to all underlying levels of the menu (level 2 and lower sub-levels) */
.OtherLevelsCMSListMenuUL
.OtherLevelsCMSListMenuLI
.OtherLevelsCMSListMenuLink
```
> **Info:** Set the names of the CSS classes according to the following format: _** + **_
The web part/control applies the appropriate CSS classes when rendering the corresponding levels of the menu.