Customize UniPopupMenu

[artem_niko]

Hello!

How customize UniPopupMenu?

I need:

1. Remove vertical line;
2. Make rounded corners in menu.

See screen:

[Sherzod]

Hello,

Could you first clarify which component you are using? Is it a UniMenuButton?

[artem_niko]

5 hours ago, Sherzod said:

Hello,

Could you first clarify which component you are using? Is it a UniMenuButton?

Hello!

Yes, UniMenuButton

[Sherzod]

On 2/18/2026 at 2:56 PM, artem_niko said:

Remove vertical line;

Hello,

Are you using any specific theme?

[artem_niko]

7 hours ago, Sherzod said:

Hello,

Are you using any specific theme?

Yes... 

Maybe exists universal solution?

[Sherzod]

On 2/26/2026 at 3:45 PM, artem_niko said:

Maybe exists universal solution?

[Sherzod]

Solution:

1. CustomCSS ->

.customTr .x-btn-split-right:after, .customTr .x-btn-split-left:after {
    background-image: none !important;
}

.customArrow {
    background-image: none !important;
    position: relative;
}

.customArrow:after {
    content: '\f0d7';
    font-family: FontAwesome, "Font Awesome 5 Free";
    font-weight: 900;

    position: absolute;
    right: 6px;
    top: 50%;
    margin-top: -6px;

    pointer-events: none;
}

2. 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniMenuButton1.JSInterface.JSConfig('cls', ['customTr']);
  UniMenuButton1.JSInterface.JSAddListener(
    'afterrender',
    'function(me){' +
    '   if (!me || me._customStyled) return;' +
    '   me._customStyled = true;' +

    '   if (me.arrowEl){' +
    '       me.arrowEl.addCls("customArrow");' +

    '       if (me.btnInnerEl){' +
    '           var color = me.btnInnerEl.getStyle("color");' +
    '           if (color){' +
    '               me.arrowEl.setStyle("color", color);' +
    '           }' +
    '       }' +
    '   }' +
    '}'
  );
end;

 

[mikromundo]

On 3/31/2026 at 9:11 AM, Sherzod said:

Solution:

1. CustomCSS ->

.customTr .x-btn-split-right:after, .customTr .x-btn-split-left:after {
    background-image: none !important;
}

.customArrow {
    background-image: none !important;
    position: relative;
}

.customArrow:after {
    content: '\f0d7';
    font-family: FontAwesome, "Font Awesome 5 Free";
    font-weight: 900;

    position: absolute;
    right: 6px;
    top: 50%;
    margin-top: -6px;

    pointer-events: none;
}

2. 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniMenuButton1.JSInterface.JSConfig('cls', ['customTr']);
  UniMenuButton1.JSInterface.JSAddListener(
    'afterrender',
    'function(me){' +
    '   if (!me || me._customStyled) return;' +
    '   me._customStyled = true;' +

    '   if (me.arrowEl){' +
    '       me.arrowEl.addCls("customArrow");' +

    '       if (me.btnInnerEl){' +
    '           var color = me.btnInnerEl.getStyle("color");' +
    '           if (color){' +
    '               me.arrowEl.setStyle("color", color);' +
    '           }' +
    '       }' +
    '   }' +
    '}'
  );
end;

 

Hi...

How can we do the same with TUniPopupMenu?

[Sherzod]

55 minutes ago, mikromundo said:

How can we do the same with TUniPopupMenu?

Do you mean applying the same behavior to TUniPopupMenu? If so, which exact part are you referring to?

[mikromundo]

Using the same code example you sent, but it doesn't work for TUniPopUpMenu.

Could you create an example to apply rounding to a TUniPopUpMenu and, if possible, a "FADE" display effect for this menu?

Thank you in advance for your help.

[mikromundo]

I found the css class "x-menu-default"

 

[mikromundo]

Sherzod, if I have an item in the PopUpMenu that is disabled (Enabled=False)...

How can I make it so that when I hover the mouse over that item, the background color doesn't change?

[Sherzod]

On 4/10/2026 at 6:28 PM, mikromundo said:

Could you create an example to apply rounding to a TUniPopUpMenu

[Sherzod]

On 4/10/2026 at 6:28 PM, mikromundo said:

if possible, a "FADE" display effect for this menu?

I’ve tested fadeIn/fadeOut, and it doesn’t seem to be the best approach for menus...

[Sherzod]

9 hours ago, Sherzod said:

 

 

type
  TXPopupMenu = class(TUniPopupMenu)

  end;

 

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with TXPopupMenu(UniPopupMenu1).MenuControl.JSInterface do
  begin
    JSConfig('shadow', [False]);
    JSConfig('style', ['border-radius:20px']);
  end;
end;

 

[mikromundo]

11 hours ago, Sherzod said:

 

 

type
  TXPopupMenu = class(TUniPopupMenu)

  end;

 

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with TXPopupMenu(UniPopupMenu1).MenuControl.JSInterface do
  begin
    JSConfig('shadow', [False]);
    JSConfig('style', ['border-radius:20px']);
  end;
end;

 

Thanks...and about this....it´s is possible to create an example?