FREE SALESFORCE LWC COMPONENT

Responsive Navigation

Keep navigation data-driven and make the mobile menu state explicit.

Component structure

COMPONENTwcsResponsiveNav

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <nav class="nav" aria-label="Primary">
    <a href="/s/">Home</a>
    <a href="/s/accounts">Accounts</a>
    <a href="/s/contact">Contact</a>
  </nav>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class WcsResponsiveNav extends LightningElement {
  isOpen = false;

  toggleMenu() {
    this.isOpen = !this.isOpen;
  }
}

CSS

.nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.nav a{color:#0b5cab;text-decoration:none}.nav a:hover{text-decoration:underline}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>