How to Build a Dynamic Vertical Navigation Bar in Salesforce LWC

In plain words: A dynamic vertical navigation bar is a side menu where the links (like "Home", "About", and "Contact") are not hardcoded into the HTML. Instead, they are defined in JavaScript as an array. This makes it incredibly easy to add, remove, or change menu items later without having to rewrite your HTML layout.

In modern web applications, a clean, intuitive navigation menu is essential. By building a vertical navigation bar using Lightning Web Components (LWC), you can create a reusable sidebar menu that perfectly matches your company's branding.

In this tutorial, we will build a dynamic sidebar menu using the LWC for:each directive to loop through a list of JavaScript objects.

Step 1: Create the Component

First, open your terminal (or VS Code integrated terminal) and use the Salesforce CLI to generate the new component files.

sf lightning generate component -n verticalNavigationBar -d force-app/main/default/lwc

Step 2: Define the Data in JavaScript

Open the verticalNavigationBar.js file. We are going to define an array of objects. Each object will represent one link in our menu, containing an ID, a label, a URL, and a boolean to track if it is the currently active page.

import { LightningElement, track } from 'lwc';

export default class VerticalNavigationBar extends LightningElement {
    // @track ensures the UI updates if this array changes
    @track navigationItems = [
        { id: '1', label: 'Home', url: '/home', isActive: true },
        { id: '2', label: 'About', url: '/about', isActive: false },
        { id: '3', label: 'Products', url: '/products', isActive: false },
        { id: '4', label: 'Contact', url: '/contact', isActive: false }
    ];
}

Step 3: Build the HTML Template

Open the verticalNavigationBar.html file. We will use the for:each directive to loop through our navigationItems array and generate a list item (<li>) for each one.

<template>
    <nav class="vertical-nav">
        <ul>
            <!-- Loop through the JavaScript array -->
            <template for:each={navigationItems} for:item="item">
                
                <!-- The key attribute is required inside a loop! -->
                <li key={item.id} class={item.isActive ? 'active' : ''}>
                    <a href={item.url}>{item.label}</a>
                </li>

            </template>
        </ul>
    </nav>
</template>

Developer Trap: The Missing Key
Whenever you use a for:each loop in LWC, the immediate child element must include a key={} attribute with a unique identifier. If you forget this, Salesforce will throw a compilation error, and your component will fail to deploy!

Step 4: Style the Navigation Bar

To make the list look like a professional sidebar, open the verticalNavigationBar.css file and add the following styling.

/* Main container styling */
.vertical-nav {
    background-color: #f5f5f5;
    width: 200px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Remove default bullet points */
.vertical-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Individual list item styling */
.vertical-nav li {
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s ease;
}

/* Style for the active menu item */
.vertical-nav li.active {
    background-color: #e5e5e5;
    border-left: 4px solid #0070d2; /* Salesforce Blue */
}

/* Link text styling */
.vertical-nav a {
    text-decoration: none;
    color: #333;
    display: block;
    width: 100%;
}

/* Hover effects */
.vertical-nav li:hover {
    background-color: #eaeaea;
}
.vertical-nav a:hover {
    color: #000;
}

Step 5: Using Your New Component

Now that your navigation bar is complete, you can drop it into any other parent LWC component in your org. Just call it using kebab-case formatting in the parent HTML.

<!-- ParentComponent.html -->
<template>
    <div class="slds-grid">
        
        <!-- Place your new sidebar component on the left -->
        <div class="slds-col slds-size_1-of-5">
            <c-vertical-navigation-bar></c-vertical-navigation-bar>
        </div>

        <!-- Main page content goes on the right -->
        <div class="slds-col slds-size_4-of-5">
            <h1>Welcome to the Main Content Area</h1>
        </div>

    </div>
</template>

Core Takeaway: By keeping your menu items in a JavaScript array rather than hardcoding them in HTML, you can easily wire that array to an Apex controller later, allowing you to hide or show menu links based on the current user's profile permissions!

Conclusion

Building a dynamic vertical navigation bar in LWC is a perfect exercise for mastering data binding and loop directives. By separating your data (JavaScript) from your presentation (HTML/CSS), you have built a highly reusable component that can easily adapt as your Salesforce application grows.

Happy coding!