Badges & Notification Dots

Draw attention to individual menu items with a small text badge (e.g. "New", "Hot") or a simple notification dot.

Text badges

A badge is a small coloured label that sits next to a menu item's text — perfect for highlighting new sections or promotions.

  1. Go to Menu Builder → Menu Structure.
  2. Click a menu item to expand its options.
  3. Type the badge text in the Badge field (e.g. New, Hot, Sale).
  4. Optionally pick a badge background colour.
  5. Click Save Menu.
ℹ️

Badges are decorative and marked aria-hidden so they don't clutter the experience for screen-reader users. Keep the label short — one or two words works best.

Notification dot

A notification dot is a small coloured circle attached to a menu item — useful for signalling unread activity or a new feature without any text.

  1. In Menu Builder → Menu Structure, expand a menu item.
  2. Enable the 🔴 Dot checkbox.
  3. Click Save Menu.
💡

The dot includes hidden screen-reader text so assistive technology still announces that the item has a notification.

Item icons

Each menu item can also display a Font Awesome 6 icon before its label. When adding or editing an item, enter the icon class in the icon field — for example fas fa-home or fas fa-cart-shopping.