How to create header component in Lightning Web Component

Dec 28, 2023

Today in this blog we will create a header (navbar) component. To create a component we right click and choose SFDX:Create Lightning Web Component, after clicking on this we will give the component name "headerComponent". Hit the enter.

Now our headerComponent does includes-

headerComponent>

>__test__

headerComponent.html

headerComponent.js

headerComponent.js-meta-xml

And also we will create a css file to add custom css. To create a css file right click on headerComponent and choose New file option then we will name our file css file is 'headerComponent.css'.

Note: Note: When giving the name of a css file the css file name must have the same name of component name.

Now our headerComponent does includes-

headerComponent>

>__test__

headerComponent.css //New file added

headerComponent.html

headerComponent.js

headerComponent.js-meta-xml

Let's jump into the code :

headerComponent.html


        <template>
            <div class="topnav" data-id="myTopnav">
                <a href="#home" class="active">Page 1</a>
                <div class="dropdown">
                    <div class="buttonBox" onclick={productSupportDropdownHandler}>
                        <button class="dropbtn" data-id="productSupportBtn" >Page 2</button>
                        <lightning-icon icon-name='utility:chevrondown' alternative-text='chevrondown' size='x-small' title='chevrondown' class="chevrondown"></lightning-icon>
                    </div>
                    <div class="dropdown-content" data-id="productSupport-content">
                        <div class="triangle-up"></div>
                        <div class="tile">
                            <span>
                                <a href="#link1">Link 1</a>
                                <a href="#link2">Link 2</a>
                                <a href="#link3">Link 3</a>
                            </span>
                            <span>
                                <a href="#link5">Link 4</a>
                                <a href="#link5">Link 5</a>
                                <a href="#link6">Link 6</a>
                            </span>
                        </div>
                    </div>
                </div>
        

                <div class="dropdown">
                    <div class="buttonBox" onclick={discoverDropdownHandler}>
                        <button class="dropbtn" data-id="discoverBtn" >Page 3</button>
                        <lightning-icon icon-name='utility:chevrondown' alternative-text='chevrondown' size='x-small' title='chevrondown' class="chevrondown"></lightning-icon>
                    </div>
                    <div class="dropdown-content" data-id="discover-content">
                        <div class="triangle-up"></div>
                        <div class="tile">
                            <div class="partition_1">
                                <p class="dropdownTitle">Title A</p>
                                <a href="#link1">Link 1</a>
                                <a href="#link2">Link 2</a>
                                <a href="#link3">Link 3</a>
                                <a href="#link4">Link 4</a>
                                <a href="#link5">Link 5</a>
                                <a href="#link6">Link 6</a>
                            </div>
                            <div class="partition_2">
                                <p class="dropdownTitle">Title B</p>
                                <a href="#link7">Link 7</a>
                                <a href="#link8">Link 8</a>
                                <a href="#link9">Link 9</a>
                            </div>
                        </div>
                    </div>
                </div>
        

                <a href="#contact">Page 4</a>
                <button class="icon" onclick={dropdownHandler}>
                    <lightning-icon icon-name='utility:chevrondown' alternative-text='chevrondown' size='small' title='chevrondown' ></lightning-icon>
                </button>
            </div>
        </template>

headerComponent.css


        .topnav {
          overflow: hidden;
          background-color: #fff;
        }
        

        .topnav a {
          float: left;
          display: block;
          color: rgb(50, 29, 113);
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 17px;
          font-weight: 700;
        }
        

        .topnav a:hover {
          color: rgb(1, 118, 211);
        }
        

        /* .topnav a.active {
            color: white;
          } */
        

        .topnav .icon {
          display: none;
        }
        

        .dropdown {
          float: left;
          overflow: hidden;
        }
        

        .dropdown .dropbtn {
          font-size: 16px;
          border: none;
          outline: none;
          color: rgb(50, 29, 113);
          padding: 14px 16px;
          background-color: inherit;
          font-family: inherit;
          margin: 0;
          font-weight: 700;
        }
        

        .dropdown:hover .dropbtn {
          color: rgb(1, 118, 211);
        }
        

        .dropdown-content {
          display: none;
          position: absolute;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
          z-index: 1;
          border-radius: 10px;
        }
        

        .dropdown-content a {
          float: none;
          color: rgb(50, 29, 113);
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
          font-weight: 700;
        }
        

        .partition_1 {
          background-color: #fff;
          float: left;
          padding: 20px 20px 20px 30px;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }
        

        .partition_1:after {
          content: "";
          background-color: rgb(223, 223, 223);
          position: absolute;
          width: 1px;
          height: 320px;
          top: 40px;
          left: 50%;
          display: block;
        }
        

        .partition_2 {
          background-color: #fff;
          padding: 20px 20px 20px 30px;
          float: right;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
        }
        

        .dropdownTitle {
          padding: 20px 20px 20px 10px;
        }
        

        /* .dropdown:hover  {
            display: block;  
          } */
        

        .dropdown-content:hover {
          display: none;
        }
        

        .triangle-up {
          width: 0;
          height: 0;
          margin-top: -12px;
          margin-left: 50px;
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
          border-bottom: 20px solid #f9f9f9;
        }
        

        .tile {
          display: flex;
          background-color: #fff;
          margin-top: -8px;
          border-radius: 10px;
        }
        


        @media screen and (max-width: 600px) {
          .topnav a:not(:first-child) {
            display: none;
          }
        

          .topnav button.icon {
            float: right;
            display: block;
            border: none;
            outline: none;
            background-color: transparent;
            padding: 14px 16px;
          }
        

          .topnav .dropdown {
            display: none;
          }
        

          .topnav.responsive {
            position: relative;
          }
        

          .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
          }
        

          .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
          }
        

          .topnav.responsive .dropdown {
            float: none;
            display: block;
            text-align: left;
          }
        

          .tile {
            display: inline;
            margin-top: -8px;
          }
        

          .dropdown-content {
            position: relative;
            display: none;
            box-shadow: none;
            border-radius: 0px;
          }
        

          .partition_1:after {
            display: none;
          }
        

          .partition_2:before {
            content: "";
            background-color: rgb(223, 223, 223);
            position: static;
            width: 300px;
            height: 1px;
            top: 10px;
            display: block;
          }
        

          .partition_2 {
            float: left;
          }
        

          .partition_1 {
            float: none;
          }
        

          .triangle-up {
            display: none;
          }
        

          .dropdown-content.opensubdropdown-content {
            display: block;
          }
        

          .buttonBox {
            width: 100%;
            display: flex;
            flex-direction: row;
            cursor: pointer;
          }
        

          .chevrondown {
            margin-left: auto;
            margin-top: 20px;
            margin-right: 20px;
        

          }
        }
        

        @media screen and (min-width: 600px) {
        

          /* display none subdropdown btn */
          .dropdown:hover .dropdown-content {
            display: block;
          }
        

        }
        

        @media screen and (min-width: 992px) {
        

          /* display none subdropdown btn */
          .dropdown:hover .dropdown-content {
            display: block;
          }
        }

headerComponent.js



        import { LightningElement } from 'lwc';
        

        export default class HeaderComponent extends LightningElement {
           
           
            dropdownHandler() {
                var x = this.template.querySelector('[data-id="myTopnav"]')
                console.log(x.className);
                if (x.className === "topnav") {
                    x.className += " responsive";
                } else {
                    x.className = "topnav";
                }
            }
        


            productSupportDropdownHandler() {
                var dropdownContentDev = this.template.querySelector('[data-id="productSupport-content"]');
           
                console.log(dropdownContentDev.className);
                if(dropdownContentDev.className === 'dropdown-content'){
                    dropdownContentDev.className += ' opensubdropdown-content';
                } else {
                    dropdownContentDev.className = 'dropdown-content';
                }
            }
        

            discoverDropdownHandler() {
                var dropdownContentDev = this.template.querySelector('[data-id="discover-content"]');
           
                console.log(dropdownContentDev.className);
                if(dropdownContentDev.className === 'dropdown-content'){
                    dropdownContentDev.className += ' opensubdropdown-content';
                } else {
                    dropdownContentDev.className = 'dropdown-content';
                }
            }
        

        }

headerComponent.js-meta.xml


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

I hope this blog helped you!