Sidebar with accordion functionality and dock functionality

[Alex]

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

[Alex]

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

[Shameer Ali Baig Sulaiman Ali Baig]

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. 

 

https://blazor.syncfusion.com/demos/accordion/icons?theme=bootstrap4  

 

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. 

 

https://www.syncfusion.com/downloads/support/forum/159770/ze/SFSidebar_with_accordion_dock386149657  

 

Also, check out the following links to know more about SFSidebar and SFAccordion components. 

 

Sidebar 

 

Demo: https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=bootstrap4  

 

Documentation: https://blazor.syncfusion.com/documentation/sidebar/docking-sidebar/  

 

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html  

 

Accordion 

 

Demo: https://blazor.syncfusion.com/demos/accordion/icons?theme=bootstrap4  

 

Documentation: https://blazor.syncfusion.com/documentation/accordion/how-to/add-icon-to-accordion-header/  

 

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html  

 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Alex]

Thank you so much

[Shameer Ali Baig Sulaiman Ali Baig]

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.