Using a Gradient Brush for the SfNavigationDrawer.DrawerBackground colour is also applied to each NavigationItem

[bmadtiger]

How do I get a gradient background for the navigation drawer without also having each navigation item use the same background?

I'd also like to see the hamburger menu icon have a transparent background so it too shows the background from the drawer.

Thanks.

Attachment: 20260124_185646_923ba95f.png

[Manikandan Kannan]

Hi Bmadtiger,

Query 1: Customize the Navigation item Background

The navigation drawer can be configured so that only the drawer background displays a gradient, while each navigation item retains its own independent background. This is accomplished by applying a control template, which allows the drawer background and the navigation items to be styled and managed separately. We have attached the sample for this functionality, please check the sample.

Query 2: Hambuger icon customization.

 

Currently, we are analyzing your query. We will validate and update you with further details on or before 29th January 2026, within three business days.

 

We appreciate your patience until then.

 

Best regards,

Manikandan Kannan.

Attachment: NavigationDrawer_5e8e1f09.zip

[Manikandan Kannan]

Hi Bmadtige,

 

The Hamburger button background cannot be modified through a direct API. To achieve this, we have implemented a ControlTemplate and applied a customized toggle‑button style within the SfNavigationDrawer template, enabling full control over the icon’s background, hover, and checked states. We have also attached a sample demonstrating the Hamburger icon background customization for your reference.

 

Best regards,

Manikandan Kannan.

Attachment: HamburgerIconBackground_456bbf27.zip