How I Replaced Cluttered Tabs with a Single Dynamic Button in Salesforce

Iryna Zasikan Split, Croatia sivanirina@gmail.com

4th January 2026

OVERVIEW

At some point, almost every Salesforce org runs into the same problem.

You start with a clean navigation bar.
Then you add a few custom tabs.
Then a few more.
And suddenly, users are overwhelmed.

They don’t know where to click — even though everything they need technically exists.

I recently faced this exact situation and asked myself a simple question:

What if users didn’t need to see all those tabs — but could still reach them easily?

That’s when a small but powerful idea emerged:
a dynamic navigation button.

THE IDEA

Instead of exposing many tabs in the app navigation, we can place smart buttons on a Home page (or any Lightning page) that guide users exactly where they need to go.

The button text should be configurable.
The destination should be configurable.
And the component should be reusable everywhere.

Let’s build it.

STEPS

Step 1: Create the Lightning Web Component

We’ll start with a simple LWC called:

dynamicNavButton

This component will do one thing well:
navigate the user when clicked.

Step 2: The JavaScript — Where Navigation Happens

Salesforce provides a clean and supported way to handle navigation in LWCs:
NavigationMixin.

By combining it with public (@api) properties, we can make the destination fully dynamic.

dynamicNavButton.js

import { LightningElement, api } from 'lwc';

import { NavigationMixin } from 'lightning/navigation';

export default class DynamicNavButton extends NavigationMixin(LightningElement) {

    @api buttonLabel;   // Button text shown to the user

    @api targetTabName; // API name of the target tab

    handleNavigate() {

        this[NavigationMixin.Navigate]({

            type: 'standard__navItemPage',

            attributes: {

                apiName: this.targetTabName

            }

        });

    }

}

Why This Works

• @api makes the component configurable in App Builder

• standard__navItemPage is designed specifically for custom navigation tabs

• No hardcoding — the same component works everywhere

Step 3: The HTML — Simple and Clean UI

Now let’s give users something to click.

dynamicNavButton.html

<template>

    <lightning-card>

        <div class="slds-p-around_medium">

            <lightning-button 

                label={buttonLabel} 

                variant="brand" 

                onclick={handleNavigate}>

            </lightning-button>

        </div>

    </lightning-card>

</template>

I intentionally kept the UI minimal:

• Standard SLDS spacing

• variant="brand" to highlight the primary action

• Easy to extend later with icons or styles

Step 4: Expose It in App Builder

To make this component usable by admins (and future you), we expose its properties in the meta XML file.

dynamicNavButton.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>59.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage">

            <property name="buttonLabel" type="String" label="Button Label"/>

            <property name="targetTabName" type="String" label="Target Tab API Name"/>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

This is where the component truly becomes admin-friendly.

Step 5: Using the Button in Lightning App Builder

Now the fun part.

1. Open Lightning App Builder

2. Drag Dynamic Nav Button onto the page

3. Configure it:

• Button Label: Open Reports

• Target Tab API Name: Reports

Save the page.

Click the button.

And just like that — the user is navigated exactly where they need to be.

No clutter.
No confusion.
No extra tabs.

WHY THIS PATTERN IS SO USEFUL

I now use this approach whenever I need:

• Cleaner navigation

• Guided user flows

• Utility actions on Home pages

• Reusable navigation logic

It’s a small component, but it makes a big difference in user experience.

WHATS NEXT?

In the next post, I’ll extend this component to:

• Navigate to record pages

• Support external URLs

• Add icons

• Add conditional visibility

Turning this simple button into a fully dynamic navigation tool.

FINAL RESULT

Final Version (DynamicNavButton v2): A Reusable Navigation Button for Lightning Pages

This version supports:

• Custom / standard tabs

• Object home & list views

• Specific reports

• Specific dashboards

• Icons

• Admin-friendly configuration

• Soft validation (non-blocking)

Find the v2 clean production ready version in my GitHub repository: dynamic-nav-button-lwc.