How to Use Images as Menu Items

You can easily use images as menu labels in WordPress by inserting HTML into the Navigation Label field for a menu item. Use the <img> tag to insert your custom image like such:

<img src="IMAGE_URL" alt="Image Alt">

Be sure to replace:

  • IMAGE_URL: With the full URL of your image.
  • Image Alt: With a descriptive alternative text for accessibility.

Sample Screenshot:

Total theme add image to menu item

Tips when Using Images as Menu Items

Here are some best practices to keep in mind when using images as menu items in the Total theme:

  • Use a mega menu layout: When working with multiple image-based items, enable the mega menu and place your images inside columns for better structure and visual appeal.
  • Create a mobile-friendly version: Set up an alternative menu for mobile devices that uses text labels instead of images to improve readability and accessibility on smaller screens.
  • Optimize image size and format: Use lightweight, properly sized images in optimized formats like WebP to ensure fast load times.
  • Include descriptive alt text: Always add meaningful alt text to your images for better accessibility, SEO, and fallback behavior if the image fails to load.
  • Last updated on
Back To Top