Components for Flows Get It on the AppExchange

Button Menu

Overview

The Avonni Button Menu component enriches your Experience Cloud site navigation with a flexible dropdown menu triggered by a button. It combines customizable styling, intuitive behavior, and dynamic data sourcing to create user-friendly menus tailored to your site's needs.

Button Menu Settings

The Button Menu component allows you to create a dropdown menu triggered by a button click. Here's how you can customize it to fit your site's needs:

Label

  • What it does: Sets the text that appears on the button.

  • Example: "Navigation," "Actions," "Learn more."

Icon

  • What it does: Adds a visual icon to the button.

  • How to use: Choose from the available icons in the Lightning Design System.

  • Optional: You can leave this blank if you don't want an icon.

Button Style

  • What it does: Changes the button's appearance to match your site's look and feel.

  • Options:

    • Neutral

    • Brand

    • Destructive (for actions like deleting)

    • Success (for positive actions)

    • More...

Adjusting the appearance settings allows you to personalize your button's look even more. For instance, you can choose the "Container" variant to change the button's background color to your liking or select the color token predefined for your site.

Menu Alignment

  • What it does: Determines where the dropdown menu appears relative to the button.

  • Options:

    • Left

    • Right

    • Center

    • Bottom-Left

    • More...

Menu Trigger

  • What it does: Controls how the menu opens.

  • Options:

    • Click

    • Hover (open on mouse hover)

    • Focus (open on keyboard focus)

Tooltip

  • What it does: Displays helpful information when users hover over the button.

  • Optional: Leave blank if no additional explanation is needed.

Hide Down Arrow

  • What it does: Removes the downward-pointing arrow typically shown on menu buttons.

  • Optional: Check this box if you prefer a cleaner look.

Stretch to Full Width

  • What it does: Makes the button expand to take up the entire available width.

  • Optional: Check this box if you want a larger button.

Disable Button

  • What it does: Temporarily makes the button and menu unusable.

  • Optional: Check this box to prevent users from interacting with it.,

Menu Nubbin

  • The menu nubbin is a small, subtle triangle next to menu items within a button menu.

  • It visually connects the menu item to the button that opens the menu, guiding the user's eye.

  • This helps users quickly identify which menu item is associated with a particular button, enhancing the overall user experience.

Menu Items

  • What it does: Defines the links or actions in the dropdown menu.

  • How to use: Add items with labels (the text displayed) and an icon if needed.

Set Item navigation

To make your button menu interactive, you'll need to tell each menu item where to go when someone clicks it. This is done in the "Link To" section. You can learn more about the different types of actions you can trigger from the button menu here.

Appearance Settings

These settings let you visually customize your button menu to match your site's design and branding.

Spacing

  • What it does: Control the space around the button.

  • How to use: Use sliders or number inputs to adjust the top, bottom, left, and correct spacing values.

Label & Icon

  • Color: Choose the default color for when the button is active (clicked or hovered over), and a hover color.

  • Font Family: Select the font for the label text (e.g., Arial, Times New Roman, Verdana).

  • Font Size: Adjust the label text size using a slider or number input.

  • Font Style: Choose normal, italic, or oblique text.

  • Font Weight: Make the text light, regular, medium, bold, or extra bold.

  • Horizontal Alignment: Decide whether the icon should be to the left or right of the label text.

Background

  • Color: Choose the default color for the button's background when it is active and the hover color when it is inactive.

Border

Choose the default color for when the button is active and hover color for the border around the button.

  • Size: Adjust the border's thickness using a slider or number input.

  • Style: Choose between a solid, dashed, dotted, or double border.

  • Radius: You can adjust the roundness of the corners using a slider or number input (a higher value makes the corners more rounded).

Image (For Menu Items)

  • Color Border: Choose the border color around menu item images (if they have one).

  • Size: Adjust the size of menu item images using a slider or number input.

  • Styling: Choose normal, italic, or oblique styling for image captions (if any).

  • Radius: Adjust the roundness of the corners of menu item images using a slider or number input.

  • Object Fit: Decide how the image should fit within its container (e.g., fill, contain, cover).

Important Considerations

  • Styling: Customize the button menu's look and feel to match your site's branding.

  • Link To: Consider adding "Link To" interaction to handle user interactions with the menu items.

Last updated