A common layout for administrative dashboards involves a fixed sidebar menu that updates the main content area without reloading the entire window. This architecture relies on the <iframe> element to embed external pages dynamically. Two primary methods exist to implement this interaction: JavaScript event handling and native HTML anchor targeting.

Method 1: JavaScript Event Handling

This approach offers greater control over the navigation logic. By using custom data attributes, the script retrieves the target URL and updates the iframe source programmatically.

HTML Structure

Construct the sidebar with list items containing data-url attributes. The iframe element is placed in the content container with a unique ID.

<div class="app-container">
    <!-- Sidebar Navigation -->
    <nav class="sidebar">
        <ul>
            <li>
                <span class="menu-header">System Management</span>
                <ul>
                    <li data-url="/admin/users">User Administration</li>
                    <li data-url="/admin/roles">Role Management</li>
                </ul>
            </li>
            <li>
                <span class="menu-header">Content</span>
                <ul>
                    <li data-url="/content/list">View Content</li>
                    <li data-url="/content/upload">Upload Files</li>
                </ul>
            </li>
        </ul>
    </nav>

    <!-- Main Content Area -->
    <div class="main-content">
        <iframe id="content-frame" frameborder="0" style="width:100%; height:100%;"></iframe>
    </div>
</div>

JavaScript Implementation

Attach click event listeners to the menu items. When clicked, the script reads the data-url value and assigns it to the iframe's src property.

document.addEventListener('DOMContentLoaded', function() {
    // Select all navigation items with the data-url attribute
    const navItems = document.querySelectorAll('.sidebar li[data-url]');
    const contentFrame = document.getElementById('content-frame');

    navItems.forEach(function(item) {
        item.addEventListener('click', function() {
            const targetPath = this.getAttribute('data-url');
            if (targetPath) {
                contentFrame.src = targetPath;
            }
        });
    });
});

Method 2: Native HTML Anchor Targeting

This solution relies solely on HTML attributes, eliminating the need for JavaScript. The <iframe> is given a name attribute, and the navigation links use the target attribute to reference that name.

<!-- Navigation Menu -->
<nav class="menu-panel">
    <a href="/dashboard/overview" target="display-window">Overview</a>
    <a href="/dashboard/analytics" target="display-window">Analytics</a>
    <a href="/dashboard/settings" target="display-window">Settings</a>
</nav>

<!-- Content Display -->
<div class="viewport">
    <!-- The 'name' attribute value matches the 'target' value of the links -->
    <iframe name="display-window" src="/dashboard/default" style="width:100%; height:100%;"></iframe>
</div>

In this configuration, clicking any link within the navigation menu forces the browser to load the specified href resource directly into the iframe named display-window.