SfAccordion && SfSidebar Style

[Sarah]

Hello,

I want to use the Syncfusion Sidebar component and implement the style shown below. I would greatly appreciate your help with this, as I know you provide excellent support. (I am using a Blazor Web App with SSR. If necessary, I have no problem using dynamic rendering.)

Attachment: Menu_d863cefa.jpg

[Praveen Sellappan]

Hi Sarah,

Greetings from Syncfusion Support!

To help you achieve the desired behavior, we have prepared a local sample that combines the following Syncfusion components: Sidebar, Accordion, ListView, and ContextMenu.

Here’s how the sample works:

• When the Sidebar is in docked state:
• We render the Sidebar content with a ContextMenu.
• Right clicking the “Home” item opens the context menu.
• When the Sidebar is in opened state:
• We render the Sidebar content using an Accordion component.
• Inside the Accordion, we use a ListView to display the items individually.
• The “Home” item is shown as an Accordion panel — clicking the expand icon reveals the ListView content inside it.

We have attached the complete working sample for your reference.

Code Snippet:

<SfSidebar @ref="sidebarObj" Width="220px" DockSize="72px" EnableDock="true" @bind-IsOpen="SidebarToggle">

    <ChildContent>

        <div class="dock">

            <ul>

                <li class="sidebar-item" id="toggle" @onclick="Toggle">

                    <span class="e-icons expand"></span>

                    <span class="e-text" title="menu">Menu</span>

                </li>

 

               

                <li class="sidebar-item">

                    @if (!SidebarToggle)

                    {

                        <div id="homeItem">

                            <span class="e-icons home"></span>

                            <span class="e-text" title="home">Home</span>

                        </div>

                    }

                    else

                    {

                        <SfAccordion>

                            <AccordionItems>

                                <AccordionItem>   

                <HeaderTemplate>

                                        <span class="e-icons home"></span>

                                        <span class="e-text" title="home">Home</span>

                                    </HeaderTemplate>

                                    <ContentTemplate>

                                        <SfListView DataSource="@Data">

                                            <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>

                                        </SfListView>

                                    </ContentTemplate>

                                </AccordionItem>

                            </AccordionItems>

                        </SfAccordion>

                    }

                </li>

 

                <li class="sidebar-item">

                    <span class="e-icons profile"></span>

                    <span class="e-text" title="profile">Profile</span>

                </li>

                <li class="sidebar-item">

                    <span class="e-icons info"></span>

                    <span class="e-text" title="info">Info</span>

                </li>

                <li class="sidebar-item">

                    <span class="e-icons settings"></span>

                    <span class="e-text" title="settings">Settings</span>

                </li>

            </ul>

        </div>

    </ChildContent>

</SfSidebar>

@if (!SidebarToggle)

{

    <SfContextMenu Target="#homeItem" TValue="MenuItem">

        <MenuItems>

            <MenuItem Text="Open"></MenuItem>

            <MenuItem Text="Properties"></MenuItem>

            <MenuItem Text="Delete"></MenuItem>

        </MenuItems>

    </SfContextMenu>

}

Kindly review the sample and let us know whether it fully addresses your requirement. If it matches your use case or if any adjustments are needed, please feel free to share your feedback.

For additional reference, here are the official demos of the components used in the sample:

• Blazor Sidebar Component | Default Functionalities | Syncfusion
• Blazor Accordion Component | Default Functionalities | Syncfusion
• Blazor ListView Component | Default Functionalities | Syncfusion
• Blazor Context Menu Component | Default Features | Syncfusion

We look forward to your feedback and are happy to refine the sample further if required.

Regards,

Praveen Sellappan

Attachment: sidebaraccordionsample_d15e5f3b.zip

[Sarah]

Hello,

Thank you for the links you provided. I have reviewed them, and while they were helpful and resolved some of the issues, I still have several problems that were not covered by the documentation. The following issues persist:

1-In the sidebar, how can I place a "hide" button in the specified location?

2-How can I apply a style similar to the provided image for selected items or items on mouse hover?

3-How do I implement a drawn line next to the items, accompanied by a solid circle?

4-In the context menu, how can I apply a style similar to the image for items that are selected or on mouse hover?

5-The corners of the context menu are rounded. How can I achieve this effect?

Thank you for your continued assistance.

​

Attachment: Menu2_fdbadf8f.jpg

[Praveen Sellappan]

Hi Sarah,

Thank you for the update.

Here are the answers to your questions:

In the sidebar, how can I place a "hide" button in the specified location?

The sidebar is a layout component, so you can place the "hide" button anywhere inside it, depending on your design requirements and preferred position.

2. How can I apply a style similar to the provided image for selected items or items on mouse hover?

You can customize the hover and selected states of the sidebar, accordion, and listview items by applying custom CSS styles. For demonstration, we used a general color in the example below feel free to adjust the colors, backgrounds, borders, etc. to match your desired design.

Code Snippet:

.e-sidebar .sidebar-item:hover {

     background-color: lightgrey !important;

     color: black!important;

}

 

.e-accordion .e-acrdn-item .e-acrdn-header:hover,

.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-content,

.e-accordion .e-acrdn-header:focus,

.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content .e-text:hover,

.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content .e-icons:hover,

.e-accordion .e-acrdn-item .e-acrdn-header .e-tgl-collapse-icon:hover

{

     background-color: lightgrey !important;

     border-bottom: none !important;

     border: none;

     color: black !important;

}

 

.e-accordion .e-acrdn-item.e-select.e-expand-state .e-text,

.e-accordion .e-acrdn-item.e-select.e-expand-state .e-icons,

.e-list-item .e-list-text {

     color:black!important;

}

   

 .e-listview .e-list-item.e-hover {

     background-color: lightgrey !important;

     color: black !important;

}

3. How do I implement a drawn line next to the items, accompanied by a solid circle?

With the current component structure, it is not possible to implement drawn connector lines between items along with solid circles.

4. In the context menu, how can I apply a style similar to the image for items that are selected or on mouse hover?

You can customize the hover and selected appearance of context menu items using custom CSS styles. The example below uses a basic color for demonstration — you can modify the values (background, text color, etc.) to achieve the exact look you want.

Code Snippet:

   .e-sfcontextmenu .e-contextmenu .e-menu-item.e-focused {

       background-color: lightgrey!important;

   }

5. The corners of the context menu are rounded. How can I achieve this effect?

To make the context menu have rounded corners, you can apply custom CSS with border-radius. In the example below, we used a small pixel value for demonstration — you can increase or decrease it to get the roundness you prefer.

Code Snippet:

.e-sfcontextmenu .e-contextmenu.e-control {

    border-radius:20px;

}

We have attached the updated sample for your reference. Kindly review the sample and check if it addresses your requirements. Please let us know your feedback after reviewing the attached sample, or if you need any further assistance with implementation!

Regards,

Praveen Sellappan

Attachment: sample_669555e5.zip