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.v24.1.dll

NuGet Package: DevExpress.Win.Navigation

Declaration

C#

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

VB.NET

<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#

<div class="container">
    <div id="dx-item" class="button">
        <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;
}