Building a Full Dynamic Vertical Navigation Bar in Lightning Web Components (LWC)

Introduction:

In this blog post, we will explore how to create a fully dynamic vertical navigation bar in Lightning Web Components (LWC). A vertical navigation bar is a common UI element used to provide easy access to different sections or pages within an application. By making it dynamic, we can easily modify the navigation items without changing the code, making it flexible and adaptable to changing requirements. We will leverage the power of LWC's component-based architecture to achieve this functionality.

Prerequisites:

Before diving into this tutorial, you should have a basic understanding of Lightning Web Components (LWC) and JavaScript.

Step 1: Setting up the Project

To get started, create a new LWC project or use an existing one. Make sure you have Salesforce CLI installed and you are authenticated with your Salesforce org.

Step 2: Creating the Navigation Component

Create a new LWC component called "VerticalNavigationBar" using the Salesforce CLI command:

sfdx force:lightning:component:create --componentname VerticalNavigationBar --outputdir force-app/main/default/lwc

Step 3: Designing the Navigation Bar Markup

Open the VerticalNavigationBar file and update the markup as follows:

<template>

    <nav class="vertical-nav">

        <ul>

            <template for:each={navigationItems} for:item="item">

                <li key={item.id} class={item.isActive ? 'active' : ''}>

                    <a href={item.url}>{item.label}</a>

                </li>

            </template>

        </ul>

    </nav>

</template>

Step 4: Adding the Component JavaScript

Open the VerticalNavigationBar.js  file and update the code as follows:

import { LightningElement, track } from 'lwc';

export default class VerticalNavigationBar extends LightningElement {

    @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 5: Styling the Navigation Bar

Open the VerticalNavigationBar.css file and add the following styles:

.vertical-nav {

    background-color: #f5f5f5;

    width: 200px;

}

.vertical-nav ul {

    padding: 0;

    margin: 0;

    list-style: none;

}

.vertical-nav li {

    padding: 10px;

    border-bottom: 1px solid #ddd;

}

.vertical-nav li.active {

    background-color: #e5e5e5;

}

.vertical-nav a {

    text-decoration: none;

    color: #333;

}

.vertical-nav a:hover {

    color: #000;

}

Step 6: Using the Vertical Navigation Bar

Now, you can use the VerticalNavigationBar component in any parent component by adding the following code to its HTML file:

<template>

    <div>

        <!-- Add other content here -->

        <c-vertical-navigation-bar></c-vertical-navigation-bar>

    </div>

</template>

Conclusion:

In this blog post, we learned how to create a fully dynamic vertical navigation bar in Lightning Web Components (LWC). By leveraging LWC's component-based architecture, we were able to create a reusable and customizable component that can be easily modified without changing the code. With this knowledge, you can enhance your Lightning Web Components to provide a more interactive and user-friendly experience in your Salesforce applications.

Remember to experiment and customize the code to fit your specific requirements and styling preferences. Happy coding!