How to include an accordion within a sidebar

[mobileguy]

Hi

New to blazor , wondering if you could help with showing me how to include an accordion with a sidebar.

I have attached a sample project.

I have 2 items and I want to add an header to it . I.E "Athletics"  with 2 sub items - Marathon and LongJump

Many thanks for your time

Attachment: SidebarAccordion_f120bc2d.zip

[Satheesh Kumar Balasubramanian]

Hi Mobileguy, 

  

Thanks for using Syncfusion Products. 

  

We have modified the sample to render accordion within a sidebar. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/171617/ze/SidebarAccordion-1646641390 

  

NavMenu.razor: 

<div> 

    <ul class="nav flex-column"> 

        <li class="nav-item px-3"> 

            <NavLink class="nav-link" rel='nofollow' href="" Match="NavLinkMatch.All"> 

                <span class="oi oi-home" aria-hidden="true"></span> <span class="displayText">Syncfusion Blazor Samples</span> 

            </NavLink> 

        </li> 

    </ul> 

    <SfAccordion ID="SidebarAccordion"> 

         <AccordionItems> 

                <AccordionItem Expanded="true"> 

                    <HeaderTemplate>Athletics</HeaderTemplate> 

                    <ContentTemplate> 

                         <div class="scroller"> 

                             <ul class="nav flex-column"> 

                                  <li class="nav-item px-3"> 

                                      <NavLink class="nav-link" rel='nofollow' href="marathonpage"> 

                                          <span class="syncfusion-blazor-icons syncfusion-blazor-icon-accordion" aria-hidden="true"></span><span class="displayText" style="margin-left:5px">Marhathon</span> 

                                      </NavLink> 

                                  </li> 

                                  <li class="nav-item px-3"> 

                                      <NavLink class="nav-link" rel='nofollow' href="longjumppage"> 

                                          <span class="syncfusion-blazor-icons syncfusion-blazor-icon-sidebar" aria-hidden="true"></span><span class="displayText" style="margin-left:5px">Long Jump</span> 

                                      </NavLink> 

                                  </li> 

                             </ul> 

                         </div> 

                    </ContentTemplate> 

                </AccordionItem> 

            </AccordionItems> 

    </SfAccordion> 

</div> 

  

<style> 

    #SidebarAccordion .e-icons::before { 

        font-size: 18px; 

    } 

    #SidebarAccordion span.e-icons { 

        color: #0d6efd; 

    } 

    #SidebarAccordion .nav-link, 

    #SidebarAccordion .nav-link:focus, 

    #SidebarAccordion .nav-link:hover, 

    #SidebarAccordion .syncfusion-blazor-icons{ 

        color: #0d6efd; 

    } 

    .scroller { 

        height: calc(100vh - 160px) !important; 

        overflow-y: auto; 

        width: 287px; 

    } 

</style> 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[mobileguy]

Hi

Thanks  a lot for your solution and reply, but  what css do I need to change to make the background color of the accordion to be the same as the menu.

Many thanks

[Satheesh Kumar Balasubramanian]

Hi Mobileguy, 

  

Thanks for your update. 

  

We suggest you to use the below customized style to change the background color of accordion to be same as the menu. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/171617/ze/SidebarAccordion1311071522 

  

NavMenu.razor:  

    #SidebarAccordion .nav-link, 

    #SidebarAccordion .nav-link:focus, 

    #SidebarAccordion .nav-link:hover, 

    #SidebarAccordion .syncfusion-blazor-icons, 

    #SidebarAccordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content{ 

        color: #0d6efd; 

    } 

    #SidebarAccordion, 

    #SidebarAccordion .e-active, 

    #SidebarAccordion .e-acrdn-item.e-selected>.e-acrdn-header, 

    #SidebarAccordion .e-acrdn-item.e-selected.e-select.e-expand-state>.e-acrdn-header:focus { 

        background: transparent; 

    } 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[mobileguy]

thanks a lot for your help .Excellent!

[Satheesh Kumar Balasubramanian]

Hi Mobileguy,

You are most welcome.

Please get in touch with us if you need any further assistance.

Regards,

Satheesh Kumar B