1

I need to do something like this:

enter image description here

I'm not sure if lightning-vertical-navigation-item-badge is used here, because I don't know how to add a second badge-count. That's what I have at the moment. Any thoughts and advice are welcome. I don't mind using something else, either.

<div style="width: 320px;">
    <lightning-vertical-navigation onselect={handleSelectMonth} selected-item={selectedMonth}>
        <lightning-vertical-navigation-section label="Months">
            <lightning-vertical-navigation-item-badge label="January" name="1" badge-count={badgeCountJanuary}></lightning-vertical-navigation-item-badge>
            ...
        </lightning-vertical-navigation-section>
    </lightning-vertical-navigation>
</div>

enter image description here

2 Answers 2

2
lightning-vertical-navigation-item-badge

only seems to support 1 column / badge, you can easily crate a vertical navigation component using standard HTML/CSS and/or add slds for styling purposes

lightning namespaced components are restricted to their available attributes and shadow dom.

when implementing custom use cases, consider using SLDS Blueprints you can start using the available base code provided in the blueprints for vertical navigation and further tweak the code to meet your requirements.

0
0

I made it this way:

    <li class="slds-nav-vertical__item" key={tab.Id} onclick={handleMonthClick} data-index={index}>
      <a href="#" class="slds-nav-vertical__action" aria-current="true" aria-selected = "true">
      
        {tab.Month__c}<span class="slds-badge" if:true={tab.Amount__c}> {tab.Amount__c}</span>
                    <span class="slds-badge" if:true={tab.Income__c}>{tab.Income__c}</span>
      </a>
    </li>
   </template>

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.