4.46.4

Waffle Menu

A dropdown menu displaying application links with icon or image tiles

Demo

const waffleMenu = document.querySelector('aui-waffle-menu'); waffleMenu.menuItems = [ { "url": "https://avaapp.gamma.qa.us-west-2.aws.avalara.io/home", "type": "image-link", "label": "Avalara Portal", "dataRef": "avalara-portal", "i18nKey": "dataservice.waffle-menu.avalara-portal", "imagePath": "waffle-menu/avalara-portal", "sandboxUrl": "https://app.sbx.avalara.com/home", "sandboxLabel": "Sandbox", "sandboxI18nKey": "dataservice.waffle-menu.avalara-portal-sandbox", "isExternalLink": true }, { "url": "https://community.avalara.com/support/services/auth/sso/AvalaraIdentity", "type": "image-link", "label": "Support Portal", "dataRef": "gsp-image-link", "i18nKey": "dataservice.waffle-menu.support-portal", "imagePath": "waffle-menu/gsp", "isExternalLink": true }, { "url": "https://community.avalara.com/support/services/auth/sso/AvalaraIdentity", "type": "icon-link", "label": "View my support cases", "dataRef": "gsp-icon-link", "i18nKey": "dataservice.waffle-menu.view-my-support-cases", "imagePath": "support-cases", "isExternalLink": true }, { "url": "https://avaapp.gamma.qa.us-west-2.aws.avalara.io/reports/favorites", "type": "icon-link", "label": "Favorite reports", "dataRef": "favorite-reports", "i18nKey": "dataservice.waffle-menu.favorite-reports", "imagePath": "favorite-reports" }, { "url": "https://www.avalara.com/us/en/products/vat-returns-and-reporting.html", "type": "image-link", "label": "VAT Reporting", "i18nKey": "dataservice.waffle-menu.vat-reporting", "dataRef": "vat-reporting-upsell", "imagePath": "waffle-menu/vat-reporting", "isExternalLink": true }, { "url": "https://avaapp.gamma.qa.us-west-2.aws.avalara.io/user-management/v2/users/adduser", "type": "icon-link", "label": "Add a user", "dataRef": "add-a-user", "i18nKey": "dataservice.waffle-menu.add-a-user", "imagePath": "add-a-user" } ];

API

Tag

Name Description
<aui-waffle-menu>

Custom Element that displays a waffle menu button that opens a dropdown menu containing application links as image tiles or icon links.

Attributes

Name Value Required Description
activeitem dataRef of a menu item

Sets the active item in the waffle menu. When set to a menu item's dataRef, the menu item will be highlighted automatically. See Active Item below for complete list of valid values.

Properties

Name Value Required Description
activeItem dataRef of a menu item

Sets the active item in the waffle menu. When set to a menu item's dataRef, the menu item will be highlighted automatically. See Active Item below for complete list of valid values.

Demo

API

Tag

Name Description
<AuiWaffleMenu>

Custom Element that displays a waffle menu button that opens a dropdown menu containing application links as image tiles or icon links.

Props

Name Value Required Description
activeItem dataRef of a menu item

Sets the active item in the waffle menu. When set to a menu item's dataRef, the menu item will be highlighted automatically. See Active Item below for complete list of valid values.
menuItems WaffleMenuItem[] | string

Array of menu item objects or stringified JSON array. See Guidelines below for the structure of menu item objects.

Skylab React links

General information about using our React package

Guidelines

Displaying in aui-header

To display the waffle menu in aui-header, add the integratewafflemenu attribute to the header element.

Active item

The activeItem attribute (passed through the header element's wafflemenuactiveitem attribute) is used to set the active item in the waffle menu. Complete list of valid values:

  • avalara-portal
  • avalara-portal-sandbox
  • vat-reporting
  • vat-reporting-sandbox

The menuItems property accepts an array of menu item objects. Each object should follow this structure:

const menuItems = [ { url: string, // Required: URL to navigate to type: 'icon-link' | 'image-link', // Required: Type of menu item label: string, // Required: Display label dataRef: string, // Required: Data reference for the menu item i18nKey: string, // Required: Internationalization key imagePath: string, // Optional: Path to icon or image sandboxUrl: string, // Optional: URL for sandbox environment sandboxLabel: string, // Optional: Label for sandbox link sandboxI18nKey: string, // Optional: i18n key for sandbox label isExternalLink: true // Optional: Opens link in new tab if true } ]; document.querySelector('aui-waffle-menu').menuItems = menuItems;

The waffle menu supports two types of menu items:

Image Links

Image links display larger tiles with an image/logo and label. These are typically used for primary applications.

{ url: 'https://app.example.com', type: 'image-link', label: 'My Application', dataRef: 'my-application', i18nKey: 'myapp.title', imagePath: 'my-app-logo', isExternalLink: true }

Icon Links

Icon links display smaller items with just an icon and label. These are typically used for secondary actions or utility links.

{ url: '/settings', type: 'icon-link', label: 'Settings', i18nKey: 'menu.settings', imagePath: 'settings' }

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com