Sidebar with accordion functionality and dock functionality

Hi,

Do you have any examples of the sidebar-menu component that uses an accordion to display its members below instead of to the right of the sidebar?

Also, is there a way to incorporate links/urls within a treeview or accordion? I can only seem to do so within a menu item which I cannot use within an accordion or tree view.

Thanks if you can help. Ive attached a screenshot with what I mean so the items come below instead of to the right.

https://i.imgur.com/traFSGh.png

4 Replies 1 reply marked as answer

AL Alex November 16, 2020 05:52 PM UTC

To add, I would still like the dock functionality within the sidebar-menu component. It is perfect besides the ability to use an accordion.


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team November 17, 2020 12:25 PM UTC

Hi Alex, 
 
Greetings from Syncfusion support. 
 
We have checked your requirement on using Accordion with Sidebar component. For your convenience, we have prepared a simple demo application in which we have rendered Accordion within Sidebar. Also, we have used the dock functionality in Sidebar as per your request in this sample. 
 
We have used the following Accordion sample from Syncfusion Blazor sample browser. 
 
 
In this sample, we will only show icons in accordion items when Sidebar is in collapsed state(dock state) and will show the text content in accordion items, when Sidebar is in expanded state. Also, we have added navigation URL’s for first accordion item list. 
 
<SfAccordion> 
                <AccordionItems> 
                    <AccordionItem Expanded=true> 
                        <HeaderTemplate> 
                                <a rel='nofollow' href="https://blazor.syncfusion.com/demos/sidebar/responsive-panel"> 
                                    <span class="e-acrdn-header-icon"> 
                                        <span class="e-athletics e-acrdn-icons e-icons"></span> 
                                    </span> 
                                    <span class="e-acrdn-header-contenttext">Athletics</span> 
                                    </a> 
                        </HeaderTemplate> 
                        <ContentTemplate> 
                            <ul> 
                                <li><a rel='nofollow' href="https://www.syncfusion.com"><span class="e-acrdn-icons e-content-icon marathon"></span><span class="e-acrdn-text"> Marathon</span></a></li> 
                                <li><a rel='nofollow' href="https://www.syncfusion.com"><span class="e-acrdn-icons e-content-icon javelin"></span> <span class="e-acrdn-text"> Javelin Throw</span></a></li> 
                                <li><a rel='nofollow' href="https://www.google.com"><span class="e-acrdn-icons e-content-icon discus"></span> <span class="e-acrdn-text">Discus Throw</span></a></li> 
                                <li><a rel='nofollow' href="https://www.syncfusion.com"><span class="e-acrdn-icons e-content-icon highjump"></span> <span class="e-acrdn-text">High Jump</span></a></li> 
                                <li><a rel='nofollow' href="https://www.google.com"><span class="e-acrdn-icons e-content-icon longjump"></span> <span class="e-acrdn-text">Long Jump</span></a></li> 
                            </ul> 
                        </ContentTemplate> 
                    </AccordionItem> 
 
 
Please, download the custom sample from the following link. 
 
 
Also, check out the following links to know more about SFSidebar and SFAccordion components. 
 
Sidebar 
 
 
 
 
Accordion 
 
 
 
 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


Marked as answer

AL Alex November 17, 2020 01:19 PM UTC

Thank you so much


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team November 17, 2020 01:27 PM UTC

Hi Alex, 
 
Welcome. Please, get back to us if you need any further assistance. We'd be very pleased to assist you. 
 
Regards, 
Shameer Ali Baig S. 


Loader.
Up arrow icon