0

I want to add content on marked zone from vertical navigation bar

I am pasting my code and image for reference below could you please help me out

enter image description here

HTML

<lightning-card>
    
        <div style="width: 200px;">
            <lightning-vertical-navigation selected-item="recent" onselect={changeHandleAction}>
                <lightning-vertical-navigation-section label="Customer Support">
                    <lightning-vertical-navigation-item label="Profile" name="Profile"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Customer" name="Customer"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Case" name="Case"></lightning-vertical-navigation-item>                    </lightning-vertical-navigation-section>
                <lightning-vertical-navigation-overflow>
                    <lightning-vertical-navigation-item label="Knowledge" name="Knowledge"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Reports" name="Reports"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Dashboard" name="Dashboard"></lightning-vertical-navigation-item>
                </lightning-vertical-navigation-overflow>
            </lightning-vertical-navigation>
        </div>


</lightning-card>

1 Answer 1

0

You could enclose that div in a container, a flexbox with two sections. The slds class that define a flexbox is slds-grid. You can find everything you need here.

<lightning-card>
    <!-- container -->
    <div class="slds-grid slds-size_full"> 

        <!-- first section -->
        <div style="width: 200px;">
            <lightning-vertical-navigation selected-item="recent" onselect={changeHandleAction}>
                <lightning-vertical-navigation-section label="Customer Support">
                    <lightning-vertical-navigation-item label="Profile" name="Profile"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Customer" name="Customer"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Case" name="Case"></lightning-vertical-navigation-item>                    </lightning-vertical-navigation-section>
                <lightning-vertical-navigation-overflow>
                    <lightning-vertical-navigation-item label="Knowledge" name="Knowledge"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Reports" name="Reports"></lightning-vertical-navigation-item>
                    <lightning-vertical-navigation-item label="Dashboard" name="Dashboard"></lightning-vertical-navigation-item>
                </lightning-vertical-navigation-overflow>
            </lightning-vertical-navigation>
        </div>

        <!-- second section -->
        <div class="slds-col slds-var-p-around_small">
            Hello World!
        </div>
    <div>
</lightning-card>
1
  • Thank you bro it is working
    – Arjun
    Commented Sep 7, 2023 at 12:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .