function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sandhya santhanagopalansandhya santhanagopalan 

collapsable menu in lightning

Hi,
is it possible for a collapsable menu in lightning component? similar to a split view in slds.Thanks
Best Answer chosen by sandhya santhanagopalan
Maheshkumar Selvaraj 10Maheshkumar Selvaraj 10
Yes. 

You can use the available Split View of SLDS to design customized split view in your Lightning Component. 
Also the Split view is available in Lightning Console from Summer'17 release.
 

All Answers

Maheshkumar Selvaraj 10Maheshkumar Selvaraj 10
Yes. 

You can use the available Split View of SLDS to design customized split view in your Lightning Component. 
Also the Split view is available in Lightning Console from Summer'17 release.
 
This was selected as the best answer
Akhilesh Reddy BaddigamAkhilesh Reddy Baddigam
Hi Sandhya, Please see if this is what you are looking for (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_ui_collapse.htm)  

I tried in my org by creating a component and app and tested it please find the below code
 
<!--component-->
<aura:component >
	<ui:menu>
    <ui:menuTriggerLink aura:id="trigger" label="Contacts"/>
        <ui:menuList class="actionMenu" aura:id="actionMenu" 
                     menuCollapse="{!c.addMyClass}" menuExpand="{!c.removeMyClass}">
            <ui:actionMenuItem aura:id="item1" label="All Contacts" 
                               click="{!c.doSomething}"/>
            <ui:actionMenuItem aura:id="item2" label="All Primary" click="{!c.doSomething}"/>
        </ui:menuList>
</ui:menu>
</aura:component>

Client Controller
 
({
    addMyClass : function(component, event, helper) {
        var trigger = component.find("trigger");
        $A.util.addClass(trigger, "myClass");
    },
    removeMyClass : function(component, event, helper) {
        var trigger = component.find("trigger");
        $A.util.removeClass(trigger, "myClass");
    }
})

If this helps please choose this as the best answer, please let me know if you have any further questions.


Thank you!