> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-navigation.md).
# AX - Navigation
Display a customizable navigation bar with links, menus and dropdowns on Experience Cloud site pages, beyond the standard site navigation.
## Overview
**AX - Navigation** is an Experience Cloud component that displays a customizable navigation bar with links and menus on Experience Sites pages.
Use it to create custom navigation structures beyond the standard Experience Cloud navigation—like secondary menus, contextual navigation, or action-specific link groups. Configure menu items, styling, dropdowns, and link destinations in Experience Builder without code.
Perfect for custom page navigation, contextual menus, quick action links, or anywhere your portal needs navigation beyond the default site header.
{% hint style="danger" %}
This component [leverages slots](/experience-cloud/getting-started/learning-the-basics.md#understanding-slots) for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.
{% endhint %}
{% hint style="info" %}
The Avonni Navigation component is designed with greater flexibility in mind. Unlike the standard Salesforce navigation, it allows for more complex menu structures. You can create multiple-level menus – think of these as layers or steps. For example, you can have main items (Level 1), sub-items under these (Level 2), and even sub-sub items (Level 3). This layered approach makes it easier to organize and present a large amount of information in a structured and accessible way.
Moreover, Avonni offers a broader range of styling options. This allows you to closely customize your navigation menu's appearance to your brand's style. You have more than just primary color and font options. Avonni allows for deeper customization, enabling you to create a navigation experience that's visually appealing and feels like a natural extension of your brand.
{% endhint %}
## Configuration
### General Configuration
**Orientation** chooses `Horizontal` (the default — a traditional top navigation bar) or `Vertical` (sidebar-style navigation).
**Show Site Logo** toggles display of the site logo within the navigation component.
**Fixed Top** keeps the navigation bar at the top of the viewport as users scroll down the page.
**Enable Mobile Menu** activates a mobile-optimized menu for better navigation on smaller screens.
**Display Actions In Mobile Menu** moves the content of the `actions` slot into the mobile menu, above the menu items, instead of leaving it in the navigation bar. It applies only while the mobile menu is showing, which is on small and medium screens, so on a large screen the actions stay in the bar. It has no effect when **Orientation** is `Vertical`. Off by default. Requires **Enable Mobile Menu**.
Display Actions In Mobile Menu: the actions sit above the items
**Open Menu on Hover** opens drop-down menus when the user hovers over a menu item, rather than requiring a click.
**Shaded (Deprecated)** adds a subtle shading effect to the navigation bar for visual depth. It is kept for existing pages; style the bar from the **Style** tab instead.
**Show Dropdown Nubbin** shows a small arrow-like graphic that points to the menu item when its drop-down is open.
**Indicator Attributes** add a visual indicator signalling that more content is available under a menu item: turn **Show** on, then set its **Position**, `Before` or `After` the item.
**API Name** is a unique identifier used to reference the component. **Mobile Menu Variant** chooses how the menu renders on small screens (`Drawer`, the default, or `Dropdown`), and **Link To - Site Logo** defines an interaction triggered when the site logo is clicked.
### Data Source
The navigation structure comes from one of three sources:
| Data Source Type | Description | Use Case |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **Manual** | Enter every item, sub-item and sub-sub-item directly in the builder. | Fixed navigation, and any menu that needs avatars or more than two levels. |
| **Query** | Build each item from a Salesforce object's records. | Navigation driven by data, such as a list of categories or products. |
| **Navigation Menu** | Reuse one of the site's own navigation menus. Pick it in **Navigation Menu**, and turn **Display Home Menu Item** on to keep the menu's Home entry. | Mirroring the site navigation already maintained in Experience Builder. |
With a **Manual** source, define each item and its properties:
**Label** is the text displayed for the item, and **Description** is optional secondary text shown with it. The description shows in the vertical orientation; in the horizontal orientation a sub-item's description only shows in the `Drawer` menu variant.
**Tag** adds a small badge to the item, **Tag Variant** sets its colour (`Base`, `Brand`, `Inverse`, `Alt-Inverse`, `Success`, `Info`, `Warning`, `Error` or `Offline`), **Tag Outline** draws an outline around it, and **Tooltip** sets the text shown when hovering over the item.
**Avatar** configures an optional avatar on the item: its **Variant** (`Circle` or `Square`), the fallback **Icon Name**, the **Icon Size** (`Xx Small`, `X Small`, `Small`, `Medium` or `Large`) and the **Image Source**.
**Hide Chevron** drops the item's chevron, so a click anywhere on the item reveals its sub items.
**Sub Items and Sub-sub-Items Label** is the text displayed for a sub-item, and **Sub Items and Sub-sub-Items Link To** is the URL or site page it links to. Items can be nested a further level into "sub-sub items" with the same settings.
With a **Query** source, each item is mapped from a field of the queried object: **Label**, the item's unique **Value**, **Description**, **Tag**, **Tag Variant**, **Tag Outline**, **Tooltip**, **Icon Name**, **Icon Size** (`Xxs`, `Xs`, `Small`, `Medium` or `Large`) and **Link To**, the interaction that runs when the item is selected.
### Menu Appearance
The **Menu Variant** setting within the Avonni Navigation Component for Salesforce Experience Cloud determines the overall style and behavior of the menu.
{% hint style="info" %}
If your data source is set to manual and your menu includes sub-items, you can use the '**Menu Variant**' feature.
{% endhint %}
Here are the typical significations of the menu variants:
#### Base
The **Base** variant represents the standard style for a navigation menu. It is straightforward, with menu items listed typically in a row for a horizontal orientation or a column for a vertical orientation. This variant is clean and minimalist, making it a good choice for most sites where a classic look is desired.
#### Drawer
The **Drawer** variant implies a menu that slides in from the side, akin to an opened drawer. This style is often used for vertical menus, especially in mobile views or when screen real estate is premium. It keeps the navigation tucked away and accessible via a menu icon (often a "hamburger" icon) until needed.
Drawer variant example
#### Columns
With the **Columns** variant, dropdown menus are displayed in columns, allowing for a multi-level, structured layout within the dropdown itself. This is particularly useful for organizing complex navigation with many items or categories, making it easier for users to browse the options.
Column Variant example
#### Tabs
The **Tabs** variant converts the top-level menu items into tabbed navigation. This style is often used when different sections of a site need to be demarcated and accessible directly from the navigation bar. It provides a familiar interface for users, similar to tabs in a binder or a web browser.
Each of these variants can help define your site's navigation experience, so it’s important to choose one that aligns with your site’s design principles and enhances the user journey.
Tabs variant example
## Styling
{% tabs %}
{% tab title="General Navigation Settings" %}
| Name | Description |
| ---------------------------- | ---------------------------------------------------------------------- |
| **Size** | Customize the overall dimensions of the navigation menu. |
| **Background Color** | Set the background color to match your site's theme. |
| **Site Logo Max Width** | Define the maximum width for the site logo for consistent branding. |
| **Border Bottom Size/Color** | Customize the size and color of the bottom border for a distinct look. |
| {% endtab %} | |
{% tab title="Navigation Item Settings" %}
| Name | Description |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Item Width, Min/Max Width** | Specify the width dimensions for each navigation item. |
| **Item Background Color** | Set different background colors for active and hover states. |
| **Item Label** | Extensive customization options for label text, including color, font size, family, weight, and shadow, with separate settings for active and hover states. |
| **Item Description** | Customize the text color, font size, family, weight, and shadow for item descriptions. |
| **Item Border** | Adjust border size and color with additional settings for active state. |
| {% endtab %} | |
{% tab title="Sub-item and Menu Styling" %}
| Name | Description |
| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Sub Item Background Color (Selected)** | Choose a background color for selected sub-items. |
| **Sub Item Spacing (Block/Inline)** | Adjust the spacing around sub-items. |
| **Sub Item Label** | Options for customizing the text color, font size, family, weight, and shadow, including hover state settings. |
| **Menu Dimensions** | Set the menu size, with min and max width/height settings. |
| **Menu Column Width** | Define the width for columns in the menu. |
| **Menu Spacing (Block/Inline)** | Adjust spacing within the menu. |
| **Menu Border** | Customize color, size, style, and radius of the menu border. |
| **Menu Icon** | Set colors for normal, active, and hover states. |
| **Menu Group / Column Label** | Extensive text customization options for group and column labels. |
| {% endtab %} | |
{% tab title="Drawer Menu Styling" %}
| Name | Description |
| -------------------------------- | ---------------------------------------------------------------------------------------------- |
| **Drawer Background Color** | Different settings for the item opened and secondary background colors. |
| **Drawer Main/Secondary Title** | Customize the text color, font size, family, weight, and shadow for main and secondary titles. |
| **Drawer Secondary Description** | Options for text color, font size, family, weight, and shadow. |
| {% endtab %} | |
{% tab title="Mobile Drawer Styling" %}
| Name | Description |
| --------------------------------------- | ----------------------------------------------------------------------------------------------- |
| **Mobile Drawer Main/Secondary Title** | Customization options similar to the desktop drawer, tailored for mobile viewing. |
| **Mobile Drawer Secondary Description** | Adjust text color, font size, family, weight, and shadow for descriptions in the mobile drawer. |
| {% endtab %} | |
| {% endtabs %} | |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-navigation.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
