AccordionControlHtmlTemplates.HamburgerMenuButton Property

Specifies the HTML-CSS template used to render the Menu button in the control’s header when the Hamburger Menu view style is applied.

Namespace : DevExpress.XtraBars.Navigation

Assembly : DevExpress.XtraBars.v25.2.dll

NuGet Package : DevExpress.Win.Navigation

csharp

[DXCategory("Layout")]
public HtmlTemplate HamburgerMenuButton { get; }

<DXCategory("Layout")>
Public ReadOnly Property HamburgerMenuButton As HtmlTemplate

Property Value

Type	Description
HtmlTemplate

The HTML-CSS template used to render the Menu button.

Remarks

AccordionControl can render its UI elements from HTML-CSS templates. The following properties allow you to define HTML templates for the Hamburger Menu‘s header panel and the Menu button:

AccordionControlHtmlTemplates.HamburgerHeaderPanel — Specifies the HTML-CSS template used to render the control’s header panel.
HamburgerMenuButton — Specifies the HTML-CSS template used to render the Menu button in the control’s header.

HTML markup for the HamburgerMenuButton template should contain an HTML element with the predefined “dx-item” identifier (id). This element’s size determines the Menu button’s display size.

The following example shows a template for the HamburgerMenuButton property. The HTML code uses the “dx-item” id to mark the HTML element that determines the Menu button’s display size:

HTML#
CSS
C#

html

<div class="container">
    <div id="dx-item" class="button" onclick="onHamburgerMenuButtonClick">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</div>

css

.button {
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
}

.button:hover {
    background-color: #2050EEB2;
}

.line{
    width: 22px;
    height: 1px;
    background-color: #50EEB2;
    margin: 2px;
}

void onHamburgerMenuButtonClick(object sender, DxHtmlElementMouseEventArgs e) {
    MessageBox.Show("Hamburger menu button clicked");
}

Tip

See the following help topic for information on how to handle HTML events: HTML Mouse Events.