Vertical Icon Box Navigation in Elementor (JS)

This guide will show you how to use Icon Box widgets as a vertical navigation menu in the left column to control different content sections in the right column.

Final Result Preview

Here is an example of what you can build with this technique: a clean, icon-based navigation system.

Step 1: Create the Two-Column Structure

  1. Add a new Section to your page and select the two-column layout.
  2. Set the width of the left column to around 30% and the right column to 70%. Adjust as needed for your design.

Step 2: Add and Style Your Icon Boxes (Left Column)

  1. Drag an Icon Box widget into the left column.
  2. Style it:
    • Icon: Choose an icon and set its color and size.
    • Content: Add your Title and Description.
    • Style Tab: Customize everything. Pay close attention to the Hover state to provide feedback to the user. Set a different background or icon color for when the mouse is over the box.
  3. Once the first Icon Box looks perfect, Duplicate it for each content panel you need.
  4. Update the icon and text for each duplicated box.

Step 3: Configure Each Icon Box

This is the key step to link the “buttons” to the content.

  1. Select the first Icon Box. Go to the Advanced tab.
  2. In the CSS Classes field, add a class that we can target with our code: icon-box-switcher
  3. Now go to the Content tab. In the Link field, type #content-1
  4. Repeat this for all other Icon Boxes:
    • CSS Classes: Add icon-box-switcher to every box.
    • Link: Change the link for each one to be unique: #content-2, #content-3, and so on.

Step 4: Create the Content Sections (Right Column)

  1. In the right column, add an Inner Section. This will be your first content panel.
  2. Add your content (headings, images, text editors, etc.) inside this Inner Section.
  3. Select the Inner Section itself and go to its Advanced tab.
  4. In the CSS ID field, enter the ID you linked from your first Icon Box: content-1
  5. In the CSS Classes field, add a general class for all panels: content-panel
  6. Now, Duplicate this Inner Section for each of your Icon Boxes.
  7. For each duplicated section, change its CSS ID to match the corresponding Icon Box link (content-2, content-3, etc.). Make sure they all keep the content-panel class.

Step 5: Add the Custom Code

This code brings the functionality to life. It listens for clicks on your Icon Boxes and shows the correct content panel.

  1. From your WordPress dashboard, navigate to Elementor > Custom Code. Click “Add New”.
  2. Give your code a title (e.g., “Icon Box Content Switcher”).
  3. Set the Location to </body> - End.
  4. Paste the following code into the code box.
<style>
/* By default, hide all the content panels */
.content-panel {
  display: none;
}

/* Show the very first content panel by default */
#content-1 {
  display: block;
}

/* Add a style for the "active" icon box */
.icon-box-switcher.active-box {
  background-color: #f0f4ff; /* A light blue background */
  border-left: 3px solid #6a63e4; /* A solid left border */
  border-radius: 5px;
}

/* Make the whole icon box clickable */
.icon-box-switcher {
    cursor: pointer;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get all our icon boxes
    const switcherBoxes = document.querySelectorAll('.icon-box-switcher');
    
    // Get all our content panels
    const contentPanels = document.querySelectorAll('.content-panel');

    // Function to handle the content switching
    function switchContent(targetId) {
        // Hide all content panels
        contentPanels.forEach(panel => {
            panel.style.display = 'none';
        });

        // Show the target panel
        const targetPanel = document.querySelector(targetId);
        if (targetPanel) {
            targetPanel.style.display = 'block';
        }

        // Update the 'active' class on the icon boxes
        switcherBoxes.forEach(box => {
            const boxLink = box.querySelector('a');
            if (boxLink && boxLink.getAttribute('href') === targetId) {
                box.classList.add('active-box');
            } else {
                box.classList.remove('active-box');
            }
        });
    }

    // Set the first box as active by default when the page loads
    if (switcherBoxes.length > 0) {
        switcherBoxes[0].classList.add('active-box');
    }

    // Add a click listener to each icon box
    switcherBoxes.forEach(box => {
        box.addEventListener('click', function(e) {
            e.preventDefault(); // Stop the link from jumping the page
            
            const link = this.querySelector('a');
            if (link) {
                const targetId = link.getAttribute('href');
                switchContent(targetId);
            }
        });
    });
});
</script>
  1. Click Publish. Set the condition to “Entire Site” or just the page where you’ve built this.

Now, when you preview your page, clicking on each Icon Box will display its corresponding content panel, creating a seamless and interactive experience for your users.