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.

This component leverages slots for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.

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

Name

Description

Orientatation

Choose between 'horizontal' for a traditional top navigation bar or 'vertical' for a sidebar-style navigation.

Show Site Logo

Toggle to display the site logo within the navigation component.

Fixed Top

Enable to keep the navigation bar at the top of the viewport as users scroll down the page.

Enable Mobile Menu

Activate a mobile-optimized menu for better navigation on smaller screens.

Open Menu on Hover

Configure drop-down menus to open when the user hovers over a menu item, rather than requiring a click.

Shaded

Add a subtle shading effect to the navigation bar for visual depth.

Show Dropdown Nubbin

Show a small arrow-like graphic that points to the menu item when its drop-down is open.

Show Item Indicator

Toggle on to display visual indicators that signal more content is available under a menu item.

Manual Data Source: Use this to create your navigation structure, defining each item and its properties.

Name

Description

Label

Choose between 'horizontal' for a traditional top navigation bar or 'vertical' for a sidebar-style navigation.

Description

Toggle to display the site logo within the navigation component.

Tag

Enable to keep the navigation bar at the top of the viewport as users scroll down the page.

Tooltip

Activate a mobile-optimized menu for better navigation on smaller screens.

Avatar Variant

Configure drop-down menus to open when the user hovers over a menu item, rather than requiring a click.

Avatar Icon Name

Add a subtle shading effect to the navigation bar for visual depth.

Avatar Icon Size

Show a small arrow-like graphic that points to the menu item when its drop-down is open.

Avatar Image Source

Toggle on to display visual indicators that signal more content is available under a menu item.

Sub Items and Sub-sub-Items Label

The text displayed for the sub-item.

Sub Items and Sub-sub-Items Link To

The URL or site page that the sub-item links to.

This can be nested further into "Sub-sub items" with the same settings for another level of depth

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.

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.

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.

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.

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.

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

Last updated 1 year ago

Was this helpful?

Navigation

Overview

Properties

General Navigation Settings

Navigation Item Settings

Sub-item and Menu Styling

Drawer Menu Styling

Mobile Drawer Styling

Menu Appearance

Base

Drawer

Columns

Tabs