Custom CSS for Separator

[Samuel Matzen]

My SfMenu is working fine.  I am trying to add a separator and it is working fine, but I am having trouble seting the CSS for the Separator.  I was provided the following by Syncfusion support for the menu, but have been unable to identify the CSS classes to control the appearance of the Separator.  Does anyone know what CSS classes I need to override?

/* Custom CSS for SfMenu */

.e-menu-container .e-menu-item,

.e-menu-container .e-menu-item .e-menu-url.e-menu-text {

    background-color: aliceblue;

    color: blue;

}

.e-menu-container .e-menu .e-menu-item.e-selected,

.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,

.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {

    background-color: aliceblue;

    color: blue;

}

.e-menu-container .e-menu-item:hover,

.e-menu-container .e-menu-item:hover .e-menu-url.e-menu-text {

    background-color: Blue;

    color: white;

}

[Saravanan Jayavel]

Hi Samuel Matzen,

Greetings from Syncfusion support

To control the appearance of the separator, you can use the following CSS class to style it:

/* Custom CSS for SfMenu Separator */

 

li.e-menu-item.e-separator {

border-top: 2px solid red;  /* Change to your preferred separator color */

}

 

By applying this CSS, you should be able to customize the separator's appearance in your menu.

For reference, we have created a sample demonstrating this behavior.

Sample: https://blazorplayground.syncfusion.com/LDhetzVvgRpSaWDA

Check out the sample and let us know if you need any further assistance.

Regards,

Saravanan J

[Samuel Matzen]

Thank you.  Works great.

[Saravanan Jayavel]

Hi Samuel Matzen,

 

Thanks for the update. Please get back to us for assistance in the future.

 

Regards,

Saravanan J

[Samuel Matzen]

This worked great, but I also need to set the background color.  I tried the following but it didn't work:

li.e-menu-item.e-separator {

    background-color: aliceblue;

    border-top: 4px solid Blue;

}

[LeoLavanya Dhanaraj]

Hi Samuel,

Based on the information you provided, we understand that you would like to set the background color of the Menu separator. We would like to inform you that the custom styles you provided were applied correctly to the component, but due to the height of the separator, it is not visible in the UI. To verify this, you can set a custom height for the separator and check the background color.

Documentation (For further style customizations) : https://blazor.syncfusion.com/documentation/menu-bar/style-and-appearance

Sample : https://blazorplayground.syncfusion.com/VDhetoXIUlCePVPS

<style>

    li.e-menu-item.e-separator {

      border-top: 2px solid red;

    }

    li.e-menu-item.e-separator {

        background-color: aliceblue;

        height:10px;

        border-top: 4px solid Blue;

    }

    .e-menu-container .e-ul .e-menu-item{

        background-color: aqua;

    }

</style>

Refer the shared details and let us know if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Samuel Matzen]

The separator is using the border-top for the separator horizontal line.

background-color has no impact

height has no impact

margin has no impact

padding has no impact

It looks like the only attribute being applied is the border-top:

/* Custom CSS for SfMenu */

.e-menu-custom {

    background-color: aliceblue;

}

.e-menu-container .e-menu-item,

.e-menu-container .e-menu-item .e-menu-url.e-menu-text {

    background-color: aliceblue;

    color: blue;

}

.e-menu-container .e-menu .e-menu-item.e-selected,

.e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,

.e-menu-container .e-menu .e-menu-item.e-selected .e-caret {

    background-color: aliceblue;

    color: blue;

}

.e-menu-container .e-menu-item:hover,

.e-menu-container .e-menu-item:hover .e-menu-url.e-menu-text {

    background-color: Blue;

    color: white;

}

li.e-menu-item.e-separator {

    border-top: 2px solid red;

}

li.e-menu-item.e-separator {

    background-color: orange;

    height: 40px;

    border-top: 4px solid Blue;

    margin: 0px;

    padding: 0px;

}

.e-menu-container .e-ul .e-menu-item {

    background-color: aqua;

}

Attachment: 20250505_091439_fb4979e1.png

[Saravanan Jayavel]

Hi Samuel,

Thank you for the detailed inspection.

The separator in the Menu bar component is styled using a border-bottom with no set height or background.

This design relies on the border to visually represent the separator line, which changes the background-color, height, margin, or padding which may not have been visible initially.

To apply your custom styles (e.g., background color and height), we need to override the default behavior like this:

li.e-menu-item.e-separator {

  background-color: orange !important;

  height: 40px !important;

  border-top: 4px solid blue;

  border-bottom: none;

  margin: 0 !important;

  padding: 0 !important;

}

This approach forces the separator to have visible height and shows the background and border clearly.

Sample : https://blazorplayground.syncfusion.com/BDBSteXnTtuFBPUA

Check out the sample and let us know if you need any further assistance.

Regards,

Saravanan J