Navigation

Overview

The Avonni Navigation Component is a customizable navigation bar for Salesforce Experience Cloud sites. It enhances site usability by organizing navigation links and providing quick access to sections and pages. With a range of settings, it can be tailored to fit almost any site's design and navigational structure.

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.

Properties

The Menu Variant setting within the Avonni Navigation Component for Salesforce Experience Cloud determines the overall style and behavior of the menu.

If your data source is set to manual and your menu includes sub-items, you can use the 'Menu Variant' feature.

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 The 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.

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.

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 the navigation experience on your site, so it’s important to choose one that aligns with your site’s design principles and enhances the user journey.

Last updated