0

I want to build a vertical navigation menu which can direct the users to specific paragraph or div with Id/Class inside a scrollable region. I tried the following codes but none of them works.

Please provide some helps and guides. Thanks.

<template>
    <lightning-card>

    <lightning-layout>
        <lightning-layout-item size="4">
            <div class="slds-box">
                <div>
                    <nav class="slds-nav-vertical__section">
                        <div class="slds-nav-vertical__section">
                            <h2 id="entity-header" class="slds-nav-vertical__title">Menu</h2>
                            <ul aria-describedby="entity-header">
                                <li class="slds-nav-vertical__item">
                                    <a href="#paragraph1;" class="slds-nav-vertical__action">paragraph1</a>
                                </li>
                                <li class="slds-nav-vertical__item">
                                    <a href="#paragraph2;" class="slds-nav-vertical__action">paragraph2</a>
                                </li>
                                <li class="slds-nav-vertical__item">
                                    <a href="#paragraph3;" class="slds-nav-vertical__action">paragraph3</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </lightning-layout-item>

        <lightning-layout-item size="8">
            <div class="slds-scrollable" style="height: 300px">
                <div class="paragraph1">
                    paragraph1<br>
                    <p>{paragraph}</p>
                </div>

                <div class="paragraph2">
                    paragraph2<br>
                    <p>{paragraph}</p>
                </div>

                <div class="paragraph3">
                    paragraph3<br>
                    <p>{paragraph}</p>
                </div>
            </div>
        </lightning-layout-item>
    </lightning-layout>

    </lightning-card>
</template>

[Updates] I notice that Salesforce does not recommend us to use . So is there any workaround to do the effect?

2
1

First of all I recommend you to use the lightning-vertical-navigation base component instead of the SLDS blueprint. That way you'll have the behavior already implemented.

Second, to navigate to sections you have to use "id" or "name" attributes, not "class". However, ids are transformed in LWC, so the only option is name. Not all the HTML elements accept a name attribute, so I suggest you to do something like this:

<template>
  <lightning-card>
    <lightning-layout>
      <lightning-layout-item size="4">
        <lightning-vertical-navigation>
          <lightning-vertical-navigation-section label="Menu">
            <lightning-vertical-navigation-item
              label="Paragraph 1"
              name="p1"
              href="#paragraph1"
            ></lightning-vertical-navigation-item>
            <lightning-vertical-navigation-item
              label="Paragraph 2"
              name="p2"
              href="#paragraph2"
            ></lightning-vertical-navigation-item>
            <lightning-vertical-navigation-item
              label="Paragraph 3"
              name="p3"
              href="#paragraph3"
            ></lightning-vertical-navigation-item>
          </lightning-vertical-navigation-section>
        </lightning-vertical-navigation>
      </lightning-layout-item>
      <lightning-layout-item size="8">
        <div class="slds-scrollable" style="height: 300px;">
          <div>
            <a name="paragraph1">Paragraph 1</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>

          <div>
            <a name="paragraph2">Paragraph 2</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>

          <div>
            <a name="paragraph3">Paragraph 3</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
</template>
1
  • It works perfectly. Thanks a lot. You saved my time. – Sam Aug 14 '20 at 1:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.