From 373942f922b8104b9dd3500e7c62a968e63b0eea Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Mon, 31 Aug 2026 16:03:36 +0200
Subject: [PATCH] =?UTF-8?q?=20N=C2=B09152=20-=20Add=20extensibility=20API?=
 =?UTF-8?q?=20endpoints=20for=20UI=20elements=20(#1017)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---------

Co-authored-by: Molkobain <lajarige.guillaume@free.fr>
Co-authored-by: Benjamin DALSASS <benjamin.dalsass@combodo.com>
---
 application/applicationextension.inc.php      |   16 +-
 .../ApplicationPopupMenuItem.php              |   90 +-
 .../{backoffice => common}/JSButtonItem.php   |    0
 .../JSPopupMenuItem.php                       |    6 +-
 .../SeparatorPopupMenuItem.php                |    8 +-
 .../{backoffice => common}/URLButtonItem.php  |    0
 .../URLPopupMenuItem.php                      |    6 +-
 .../common/iAriaAttributesProvider.php        |   15 +
 .../common/iDataAttributesProvider.php        |   14 +
 .../common/iGroupingProvider.php              |   13 +
 .../common/iHtmlAttributesSource.php          |   14 +
 .../iPopupMenuExtension.php                   |   19 +-
 application/cmdbabstract.class.inc.php        |    9 +
 application/dashboard.class.inc.php           |    4 +-
 application/displayblock.class.inc.php        |   11 +
 application/forms.class.inc.php               |   43 +-
 application/utils.inc.php                     |    7 +-
 core/config.class.inc.php                     |    8 +
 css/backoffice/components/_all.scss           |    2 +
 css/backoffice/components/_button-bar.scss    |   43 +
 .../components/_button-separator.scss         |   20 +
 css/backoffice/components/_field.scss         |   34 +
 css/backoffice/layout/_all.scss               |    4 +-
 .../activity-panel/_activity-action.scss      |   78 +
 .../activity-panel/_activity-panel.scss       |    3 +-
 .../layout/activity-panel/_all.scss           |    1 +
 .../activity-panel/_caselog-entry-form.scss   |    5 +
 css/backoffice/layout/top-bar/_all.scss       |    2 +
 .../layout/top-bar/_top-bar-action.scss       |   40 +
 .../layout/{ => top-bar}/_top-bar.scss        |    0
 .../scss/scss-variables.scss                  |    2 +
 .../field/cs.dictionary.itop.field.php        |    1 +
 .../field/da.dictionary.itop.field.php        |    1 +
 .../field/de.dictionary.itop.field.php        |    1 +
 .../field/en.dictionary.itop.field.php        |    1 +
 .../field/en_gb.dictionary.itop.field.php     |    1 +
 .../field/es_cr.dictionary.itop.field.php     |    1 +
 .../field/fr.dictionary.itop.field.php        |    1 +
 .../field/hu.dictionary.itop.field.php        |    1 +
 .../field/it.dictionary.itop.field.php        |    1 +
 .../field/ja.dictionary.itop.field.php        |    1 +
 .../field/nl.dictionary.itop.field.php        |    1 +
 .../field/pl.dictionary.itop.field.php        |    1 +
 .../field/pt_br.dictionary.itop.field.php     |    1 +
 .../field/ru.dictionary.itop.field.php        |    1 +
 .../field/sk.dictionary.itop.field.php        |    1 +
 .../field/tr.dictionary.itop.field.php        |    1 +
 .../field/zh_cn.dictionary.itop.field.php     |    1 +
 js/components/button-bar.js                   |  308 +++
 js/dashboard.js                               |    2 +-
 js/layouts/activity-panel/activity-panel.js   |   34 +
 js/property_field.js                          |    1 +
 lib/composer/autoload_classmap.php            |   37 +-
 lib/composer/autoload_static.php              |   37 +-
 .../UI/Base/Common/Action/tActionCommon.php   |   82 +
 .../UI/Base/Common/Action/tActionJs.php       |   58 +
 .../UI/Base/Common/Action/tActionURL.php      |   58 +
 .../Base/Common/Metadata/AriaAttributes.php   |   65 +
 .../Base/Common/Metadata/DataAttributes.php   |   82 +
 .../UI/Base/Common/Metadata/Grouping.php      |   24 +
 .../UI/Base/Component/Button/Button.php       |   19 +
 .../Base/Component/Button/ButtonSeparator.php |   37 +
 .../Component/Button/ButtonUIBlockFactory.php |  130 ++
 .../UI/Base/Component/ButtonBar/ButtonBar.php |  292 +++
 .../ButtonBar/ButtonBarUIBlockFactory.php     |  135 ++
 .../UI/Base/Component/Field/Field.php         |   58 +-
 .../Component/Field/FieldUIBlockFactory.php   |   38 +
 .../PopoverMenuItem/PopoverMenuItem.php       |   25 +
 .../PopoverMenuItemFactory.php                |   60 +
 .../Layout/ActivityPanel/ActivityPanel.php    |   28 +-
 .../ActivityPanelAction.php                   |  130 ++
 .../ActivityPanelActionFactory.php            |  149 ++
 .../ActivityPanelActionJS.php                 |   42 +
 .../ActivityPanelActionSeparator.php          |   42 +
 .../ActivityPanelActionURL.php                |   42 +
 .../ActivityPanel/ActivityPanelFactory.php    |   51 +
 .../CaseLogEntryForm/CaseLogEntryForm.php     |   40 +-
 .../CaseLogEntryFormFactory.php               |   29 +
 .../UI/Base/Layout/TopBar/TopBar.php          |   40 +-
 .../UI/Base/Layout/TopBar/TopBarFactory.php   |   14 +
 .../TopBarQuickAction/TopBarQuickAction.php   |   92 +
 .../TopBarQuickActionFactory.php              |   74 +
 .../TopBarQuickAction/TopBarQuickActionJS.php |   38 +
 .../TopBarQuickActionSeparator.php            |   45 +
 .../TopBarQuickActionURL.php                  |   36 +
 sources/Application/UI/Base/UIBlock.php       |   63 +
 .../components/button-bar/layout.html.twig    |   19 +
 .../base/components/button/buttonjs.html.twig |   10 +-
 .../components/button/buttonurl.html.twig     |   10 +-
 .../base/components/button/layout.html.twig   |   12 +-
 .../button/separator/layout.html.twig         |   15 +
 .../base/components/field/layout.html.twig    |   12 +-
 .../popover-menu/item/mode_js.html.twig       |    5 +
 .../item/mode_separator.html.twig             |    5 +
 .../popover-menu/item/mode_url.html.twig      |    6 +-
 .../activity-action-js.html.twig              |   27 +
 .../activity-action-separator.html.twig       |    5 +
 .../activity-action-url.html.twig             |   27 +
 .../caselog-entry-form/layout.html.twig       |    4 +-
 .../layouts/activity-panel/layout.html.twig   |    7 +
 .../base/layouts/top-bar/layout.html.twig     |    3 +
 .../top-bar-quick-action/layout.html.twig     |   31 +
 .../top-bar-quick-action-js.html.twig         |    1 +
 .../top-bar-quick-action-js.js.twig           |    4 +
 .../top-bar-quick-action-separator.html.twig  |   16 +
 .../top-bar-quick-action-url.html.twig        |    5 +
 .../Backoffice/RenderAllUiBlocks.php          | 1704 ++++++++++++-----
 107 files changed, 4425 insertions(+), 574 deletions(-)
 rename application/applicationextension/{backoffice => common}/ApplicationPopupMenuItem.php (52%)
 rename application/applicationextension/{backoffice => common}/JSButtonItem.php (100%)
 rename application/applicationextension/{backoffice => common}/JSPopupMenuItem.php (90%)
 rename application/applicationextension/{backoffice => common}/SeparatorPopupMenuItem.php (72%)
 rename application/applicationextension/{backoffice => common}/URLButtonItem.php (100%)
 rename application/applicationextension/{backoffice => common}/URLPopupMenuItem.php (86%)
 create mode 100644 application/applicationextension/common/iAriaAttributesProvider.php
 create mode 100644 application/applicationextension/common/iDataAttributesProvider.php
 create mode 100644 application/applicationextension/common/iGroupingProvider.php
 create mode 100644 application/applicationextension/common/iHtmlAttributesSource.php
 rename application/applicationextension/{backoffice => common}/iPopupMenuExtension.php (80%)
 create mode 100644 css/backoffice/components/_button-bar.scss
 create mode 100644 css/backoffice/components/_button-separator.scss
 create mode 100644 css/backoffice/layout/activity-panel/_activity-action.scss
 create mode 100644 css/backoffice/layout/top-bar/_all.scss
 create mode 100644 css/backoffice/layout/top-bar/_top-bar-action.scss
 rename css/backoffice/layout/{ => top-bar}/_top-bar.scss (100%)
 create mode 100644 js/components/button-bar.js
 create mode 100644 sources/Application/UI/Base/Common/Action/tActionCommon.php
 create mode 100644 sources/Application/UI/Base/Common/Action/tActionJs.php
 create mode 100644 sources/Application/UI/Base/Common/Action/tActionURL.php
 create mode 100644 sources/Application/UI/Base/Common/Metadata/AriaAttributes.php
 create mode 100644 sources/Application/UI/Base/Common/Metadata/DataAttributes.php
 create mode 100644 sources/Application/UI/Base/Common/Metadata/Grouping.php
 create mode 100644 sources/Application/UI/Base/Component/Button/ButtonSeparator.php
 create mode 100644 sources/Application/UI/Base/Component/ButtonBar/ButtonBar.php
 create mode 100644 sources/Application/UI/Base/Component/ButtonBar/ButtonBarUIBlockFactory.php
 create mode 100644 sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelAction.php
 create mode 100644 sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionFactory.php
 create mode 100644 sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionJS.php
 create mode 100644 sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionSeparator.php
 create mode 100644 sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionURL.php
 create mode 100644 sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickAction.php
 create mode 100644 sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionFactory.php
 create mode 100644 sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionJS.php
 create mode 100644 sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionSeparator.php
 create mode 100644 sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionURL.php
 create mode 100644 templates/base/components/button-bar/layout.html.twig
 create mode 100644 templates/base/components/button/separator/layout.html.twig
 create mode 100644 templates/base/layouts/activity-panel/activity-action/activity-action-js.html.twig
 create mode 100644 templates/base/layouts/activity-panel/activity-action/activity-action-separator.html.twig
 create mode 100644 templates/base/layouts/activity-panel/activity-action/activity-action-url.html.twig
 create mode 100644 templates/base/layouts/top-bar/top-bar-quick-action/layout.html.twig
 create mode 100644 templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js.html.twig
 create mode 100644 templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js.js.twig
 create mode 100644 templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-separator.html.twig
 create mode 100644 templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-url.html.twig

diff --git a/application/applicationextension.inc.php b/application/applicationextension.inc.php
index 5759db1a60..d1a66149dc 100644
--- a/application/applicationextension.inc.php
+++ b/application/applicationextension.inc.php
@@ -30,6 +30,15 @@ require_once(APPROOT.'application/newsroomprovider.class.inc.php');
  * @license     http://opensource.org/licenses/AGPL-3.0
  * @since       2.7.0
  */
+
+require_once(APPROOT.'application/applicationextension/common/ApplicationPopupMenuItem.php');
+require_once(APPROOT.'application/applicationextension/common/iPopupMenuExtension.php');
+require_once(APPROOT.'application/applicationextension/common/JSButtonItem.php');
+require_once(APPROOT.'application/applicationextension/common/JSPopupMenuItem.php');
+require_once(APPROOT.'application/applicationextension/common/SeparatorPopupMenuItem.php');
+require_once(APPROOT.'application/applicationextension/common/URLButtonItem.php');
+require_once(APPROOT.'application/applicationextension/common/URLPopupMenuItem.php');
+
 require_once(APPROOT.'application/applicationextension/backoffice/iApplicationUIExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/iBackofficeDictEntriesExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/iBackofficeDictEntriesPrefixesExtension.php');
@@ -43,19 +52,12 @@ require_once(APPROOT.'application/applicationextension/backoffice/iBackofficeScr
 require_once(APPROOT.'application/applicationextension/backoffice/iBackofficeStyleExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/iFieldRendererMappingsExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/iPageUIBlockExtension.php');
-require_once(APPROOT.'application/applicationextension/backoffice/iPopupMenuExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/iPreferencesExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/iWelcomePopupExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/AbstractApplicationUIExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/AbstractPageUIBlockExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/AbstractPreferencesExtension.php');
 require_once(APPROOT.'application/applicationextension/backoffice/AbstractWelcomePopupExtension.php');
-require_once(APPROOT.'application/applicationextension/backoffice/ApplicationPopupMenuItem.php');
-require_once(APPROOT.'application/applicationextension/backoffice/JSButtonItem.php');
-require_once(APPROOT.'application/applicationextension/backoffice/JSPopupMenuItem.php');
-require_once(APPROOT.'application/applicationextension/backoffice/SeparatorPopupMenuItem.php');
-require_once(APPROOT.'application/applicationextension/backoffice/URLButtonItem.php');
-require_once(APPROOT.'application/applicationextension/backoffice/URLPopupMenuItem.php');
 
 require_once(APPROOT.'application/applicationextension/iBackupExtraFilesExtension.php');
 require_once(APPROOT.'application/applicationextension/iKPILoggerExtension.php');
diff --git a/application/applicationextension/backoffice/ApplicationPopupMenuItem.php b/application/applicationextension/common/ApplicationPopupMenuItem.php
similarity index 52%
rename from application/applicationextension/backoffice/ApplicationPopupMenuItem.php
rename to application/applicationextension/common/ApplicationPopupMenuItem.php
index 0a1baaf6ba..f0ecaccbe6 100644
--- a/application/applicationextension/backoffice/ApplicationPopupMenuItem.php
+++ b/application/applicationextension/common/ApplicationPopupMenuItem.php
@@ -1,5 +1,9 @@
 <?php
 
+use Combodo\iTop\Application\UI\Base\Common\Metadata\AriaAttributes;
+use Combodo\iTop\Application\UI\Base\Common\Metadata\DataAttributes;
+use Combodo\iTop\Application\UI\Base\Common\Metadata\Grouping;
+
 /**
  * Base class for the various types of custom menus
  *
@@ -7,7 +11,7 @@
  * @package     UIExtensibilityAPI
  * @since 2.0
  */
-abstract class ApplicationPopupMenuItem
+abstract class ApplicationPopupMenuItem implements iGroupingProvider, iDataAttributesProvider, iAriaAttributesProvider
 {
 	/** @ignore */
 	protected $sUID;
@@ -19,6 +23,12 @@ abstract class ApplicationPopupMenuItem
 	protected $sIconClass;
 	/** @ignore */
 	protected $aCssClasses;
+	/** @since 3.3.0 */
+	protected ?AriaAttributes $oAriaAttributes = null;
+	/** @since 3.3.0 */
+	protected ?DataAttributes $oDataAttributes = null;
+	/** @since 3.3.0 */
+	protected ?Grouping $oGrouping = null;
 
 	/**
 	 * Constructor
@@ -58,6 +68,17 @@ abstract class ApplicationPopupMenuItem
 		return $this->sLabel;
 	}
 
+	/**
+	 * @param string $sLabel
+	 *
+	 * @api
+	 * @since 3.3.0
+	 */
+	public function SetLabel(string $sLabel): void
+	{
+		$this->sLabel = $sLabel;
+	}
+
 	/**
 	 * Get the CSS classes
 	 *
@@ -141,9 +162,76 @@ abstract class ApplicationPopupMenuItem
 	 */
 	abstract public function GetMenuItem();
 
+	/**
+	 * Get additional data, child classes can use this without having to worry about this class interfaces
+	 * @return array<string, mixed>
+	 * @since 3.3.0
+	 */
+	protected function GetMenuItemAdditionalData(): array
+	{
+		$aAdditionalData = [];
+
+		$aDataAttributes = $this->GetDataAttributes()->GetAttributes();
+		if (!empty($aDataAttributes)) {
+			$aAdditionalData['data_attributes'] = $aDataAttributes;
+		}
+
+		$aAriaAttributes = $this->GetAriaAttributes()->GetAttributes();
+		if (!empty($aAriaAttributes)) {
+			$aAdditionalData['aria_attributes'] = $aAriaAttributes;
+		}
+
+		$oGrouping = $this->GetGrouping();
+		if ($oGrouping !== null) {
+			$aAdditionalData['grouping_uid'] = $oGrouping->GetUID();
+		}
+
+		return $aAdditionalData;
+	}
+
 	/** @ignore */
 	public function GetLinkedScripts()
 	{
 		return [];
 	}
+
+	/**
+	 * @api
+	 * @since 3.3.0
+	 */
+	public function GetAriaAttributes(): AriaAttributes
+	{
+		return $this->oAriaAttributes ??= new AriaAttributes();
+	}
+
+	/**
+	 * @api
+	 * @since 3.3.0
+	 */
+	public function GetDataAttributes(): DataAttributes
+	{
+		return $this->oDataAttributes ??= new DataAttributes();
+	}
+
+	/**
+	 * @api
+	 * @since 3.3.0
+	 */
+	public function GetGrouping(): ?Grouping
+	{
+		return $this->oGrouping;
+	}
+
+	/**
+	 * @param Grouping|null $oGrouping
+	 * @return static
+	 * @api
+	 * @since 3.3.0
+	 */
+	public function SetGrouping(?Grouping $oGrouping): static
+	{
+		$this->oGrouping = $oGrouping;
+
+		return $this;
+	}
 }
diff --git a/application/applicationextension/backoffice/JSButtonItem.php b/application/applicationextension/common/JSButtonItem.php
similarity index 100%
rename from application/applicationextension/backoffice/JSButtonItem.php
rename to application/applicationextension/common/JSButtonItem.php
diff --git a/application/applicationextension/backoffice/JSPopupMenuItem.php b/application/applicationextension/common/JSPopupMenuItem.php
similarity index 90%
rename from application/applicationextension/backoffice/JSPopupMenuItem.php
rename to application/applicationextension/common/JSPopupMenuItem.php
index 03f68af617..b3308e53b2 100644
--- a/application/applicationextension/backoffice/JSPopupMenuItem.php
+++ b/application/applicationextension/common/JSPopupMenuItem.php
@@ -3,7 +3,7 @@
 /**
  * Class for adding an item into a popup menu that triggers some Javascript code
  *
- * Note: This works only in the backoffice, {@see \JSButtonItem} for the end-user portal
+ * Note: This works only in the backoffice, {@see \common\JSButtonItem} for the end-user portal
  *
  * @api
  * @package     UIExtensibilityAPI
@@ -40,7 +40,7 @@ class JSPopupMenuItem extends ApplicationPopupMenuItem
 	public function GetMenuItem()
 	{
 		// Note: the semicolumn is a must here!
-		return [
+		$aData = [
 			'label' => $this->GetLabel(),
 			'onclick' => $this->GetJsCode().'; return false;',
 			'url' => $this->GetUrl(),
@@ -48,6 +48,8 @@ class JSPopupMenuItem extends ApplicationPopupMenuItem
 			'icon_class' => $this->sIconClass,
 			'tooltip' => $this->sTooltip,
 		];
+
+		return array_merge($aData, $this->GetMenuItemAdditionalData());
 	}
 
 	/** @ignore */
diff --git a/application/applicationextension/backoffice/SeparatorPopupMenuItem.php b/application/applicationextension/common/SeparatorPopupMenuItem.php
similarity index 72%
rename from application/applicationextension/backoffice/SeparatorPopupMenuItem.php
rename to application/applicationextension/common/SeparatorPopupMenuItem.php
index 3be00a0f78..f1cf27c9a1 100644
--- a/application/applicationextension/backoffice/SeparatorPopupMenuItem.php
+++ b/application/applicationextension/common/SeparatorPopupMenuItem.php
@@ -24,6 +24,12 @@ class SeparatorPopupMenuItem extends ApplicationPopupMenuItem
 	/** @ignore */
 	public function GetMenuItem()
 	{
-		return ['label' => '<hr class="menu-separator">', 'url' => '', 'css_classes' => $this->aCssClasses];
+		$aData = [
+			'label' => '<hr class="menu-separator">',
+			'url' => '',
+			'css_classes' => $this->aCssClasses,
+		];
+
+		return array_merge($aData, $this->GetMenuItemAdditionalData());
 	}
 }
diff --git a/application/applicationextension/backoffice/URLButtonItem.php b/application/applicationextension/common/URLButtonItem.php
similarity index 100%
rename from application/applicationextension/backoffice/URLButtonItem.php
rename to application/applicationextension/common/URLButtonItem.php
diff --git a/application/applicationextension/backoffice/URLPopupMenuItem.php b/application/applicationextension/common/URLPopupMenuItem.php
similarity index 86%
rename from application/applicationextension/backoffice/URLPopupMenuItem.php
rename to application/applicationextension/common/URLPopupMenuItem.php
index bd330bf6a5..4276627fda 100644
--- a/application/applicationextension/backoffice/URLPopupMenuItem.php
+++ b/application/applicationextension/common/URLPopupMenuItem.php
@@ -3,7 +3,7 @@
 /**
  * Class for adding an item into a popup menu that browses to the given URL
  *
- * Note: This works only in the backoffice, {@see \URLButtonItem} for the end-user portal
+ * Note: This works only in the backoffice, {@see \common\URLButtonItem} for the end-user portal
  *
  * @api
  * @package     UIExtensibilityAPI
@@ -35,13 +35,15 @@ class URLPopupMenuItem extends ApplicationPopupMenuItem
 	/** @ignore */
 	public function GetMenuItem()
 	{
-		return ['label' => $this->GetLabel(),
+		$aData = ['label' => $this->GetLabel(),
 			'url' => $this->GetUrl(),
 			'target' => $this->GetTarget(),
 			'css_classes' => $this->aCssClasses,
 			'icon_class' => $this->sIconClass,
 			'tooltip' => $this->sTooltip,
 		];
+
+		return array_merge($aData, $this->GetMenuItemAdditionalData());
 	}
 
 	/** @ignore */
diff --git a/application/applicationextension/common/iAriaAttributesProvider.php b/application/applicationextension/common/iAriaAttributesProvider.php
new file mode 100644
index 0000000000..8f7298706b
--- /dev/null
+++ b/application/applicationextension/common/iAriaAttributesProvider.php
@@ -0,0 +1,15 @@
+<?php
+
+use Combodo\iTop\Application\UI\Base\Common\Metadata\AriaAttributes;
+
+/**
+ * Allows to provide ARIA attributes to classes that implement this interface.
+ * The ARIA attributes will be used to improve accessibility of the UI components
+ *
+ * @api
+ * @since 3.3.0
+ */
+interface iAriaAttributesProvider
+{
+	public function GetAriaAttributes(): AriaAttributes;
+}
diff --git a/application/applicationextension/common/iDataAttributesProvider.php b/application/applicationextension/common/iDataAttributesProvider.php
new file mode 100644
index 0000000000..ef621b5a2f
--- /dev/null
+++ b/application/applicationextension/common/iDataAttributesProvider.php
@@ -0,0 +1,14 @@
+<?php
+
+use Combodo\iTop\Application\UI\Base\Common\Metadata\DataAttributes;
+
+/**
+ * Allows to provide data attributes to classes that implement this interface.
+ * The data attributes will be used to provide additional information to the UI components
+ * @api
+ * @since 3.3.0
+ */
+interface iDataAttributesProvider
+{
+	public function GetDataAttributes(): DataAttributes;
+}
diff --git a/application/applicationextension/common/iGroupingProvider.php b/application/applicationextension/common/iGroupingProvider.php
new file mode 100644
index 0000000000..6a295b9138
--- /dev/null
+++ b/application/applicationextension/common/iGroupingProvider.php
@@ -0,0 +1,13 @@
+<?php
+
+use Combodo\iTop\Application\UI\Base\Common\Metadata\Grouping;
+
+/**
+ * Allows to provide grouping information to classes that implement this interface.
+ * @api
+ * @since 3.3.0
+ */
+interface iGroupingProvider
+{
+	public function GetGrouping(): ?Grouping;
+}
diff --git a/application/applicationextension/common/iHtmlAttributesSource.php b/application/applicationextension/common/iHtmlAttributesSource.php
new file mode 100644
index 0000000000..a7d9099363
--- /dev/null
+++ b/application/applicationextension/common/iHtmlAttributesSource.php
@@ -0,0 +1,14 @@
+<?php
+
+/**
+ * Implemented by metadata value objects that flatten to HTML attributes.
+ * Ease the implementation of classes that need to provide HTML attributes to the UI components
+ *
+ * @api
+ * @since 3.3.0
+ */
+interface iHtmlAttributesSource
+{
+	/** @return array<string, string> Attribute name => value, ready to be escaped and printed */
+	public function GetHtmlAttributes(): array;
+}
diff --git a/application/applicationextension/backoffice/iPopupMenuExtension.php b/application/applicationextension/common/iPopupMenuExtension.php
similarity index 80%
rename from application/applicationextension/backoffice/iPopupMenuExtension.php
rename to application/applicationextension/common/iPopupMenuExtension.php
index 0f9f507ff6..87a28efb6a 100644
--- a/application/applicationextension/backoffice/iPopupMenuExtension.php
+++ b/application/applicationextension/common/iPopupMenuExtension.php
@@ -95,7 +95,24 @@ interface iPopupMenuExtension
 	 * @todo
 	 */
 	public const PORTAL_MENU_ACTIONS = 10;
-
+	/**
+	 * Get the list of items to be added to the backoffice top-bar items
+	 * $param is an array: [] for now, in a distant future we want to give a complete context
+	 * @since 3.3.0
+	 */
+	public const MENU_TOPBAR_ACTIONS = 11;
+	/**
+	 * Get the list of items to be added to the actions on a given form field (i.e. the attribute of an object)
+	 * $param is an array: ['object' => DBObject, att_code => attribute code , mode => edit/read]
+	 * @since 3.3.0
+	 */
+	public const MENU_OBJDETAILS_FIELD_ACTIONS = 12;
+	/**
+	 * Get the list of items to be added to the actions in the activity panel (read-only mode)
+	 * $param is an array: ['object' => DBObject, caselog_att_code =>  caselog attribute code or 'activity']
+	 * @since 3.3.0
+	 */
+	public const MENU_OBJDETAILS_ACTIVITY_PANEL_ACTIONS = 13;
 	/**
 	 * Get the list of items to be added to a menu.
 	 *
diff --git a/application/cmdbabstract.class.inc.php b/application/cmdbabstract.class.inc.php
index 9836c31027..dda98b793f 100644
--- a/application/cmdbabstract.class.inc.php
+++ b/application/cmdbabstract.class.inc.php
@@ -49,6 +49,7 @@ use Combodo\iTop\Application\WebPage\WebPage;
 use Combodo\iTop\Renderer\BlockRenderer;
 use Combodo\iTop\Renderer\Console\ConsoleBlockRenderer;
 use Combodo\iTop\Renderer\Console\ConsoleFormRenderer;
+use Combodo\iTop\Service\InterfaceDiscovery\InterfaceDiscovery;
 use Combodo\iTop\Service\Links\LinkSetDataTransformer;
 use Combodo\iTop\Service\Links\LinkSetModel;
 use Combodo\iTop\Service\TemporaryObjects\TemporaryObjectHelper;
@@ -1065,6 +1066,14 @@ HTML
 								}
 							}
 							$val['value_raw'] = ($bExcludeRawValue === false) ? $this->Get($sAttCode) : '';
+							$val['actions'] = [];
+
+							/** @var \iPopupMenuExtension $oExtensionInstance */
+							foreach (InterfaceDiscovery::GetInstance()->FindItopClasses('iPopupMenuExtension') as $oExtensionInstance) {
+								foreach ($oExtensionInstance::EnumItems(iPopupMenuExtension::MENU_OBJDETAILS_FIELD_ACTIONS, ['object' => $this, 'att_code' => $sAttCode, 'mode' => $bEditMode ? 'edit' : 'read']) as $oMenuItem) {
+									$val['actions'][] = $oMenuItem;
+								}
+							}
 
 							// The field is visible, add it to the current column
 							$oField = FieldUIBlockFactory::MakeFromParams($val);
diff --git a/application/dashboard.class.inc.php b/application/dashboard.class.inc.php
index 967fc92ad5..b42f29223d 100644
--- a/application/dashboard.class.inc.php
+++ b/application/dashboard.class.inc.php
@@ -586,7 +586,7 @@ JS
 			/** @var \Dashlet $oDashlet */
 			foreach ($aCell as $oDashlet) {
 				if ($oDashlet->IsVisible()) {
-					$oPage->add('<div class="dashlet_properties" id="dashlet_properties_'.$oDashlet->GetID().'" style="display:none">');
+					$oPage->add('<div class="dashlet_properties" id="dashlet_properties_'.$oDashlet->GetID().'" data-role="ibo-dashlet-properties" data-dashlet-class="'.$oDashlet->GetDashletType().'" style="display:none">');
 					$oForm = $oDashlet->GetForm();
 					$this->SetFormParams($oForm, $aExtraParams);
 					$oForm->RenderAsPropertySheet($oPage, false, '.itop-dashboard');
@@ -1203,7 +1203,7 @@ EOF
 		}
 		$aRenderParams['dashboard_div_id'] = $aExtraParams['dashboard_div_id'];
 		$sJSExtraParams = json_encode($aExtraParams);
-		$oPage->add('<div id="dashboard_editor" class="ibo-dashboard-editor" data-role="ibo-dashboard-editor">');
+		$oPage->add('<div id="dashboard_editor" class="ibo-dashboard-editor" data-role="ibo-dashboard-editor" data-dashboard-id="'.$this->sId.'">');
 		$oPage->add('<div class="ui-layout-center">');
 		$this->SetCustomFlag(true);
 		$this->Render($oPage, true, $aRenderParams);
diff --git a/application/displayblock.class.inc.php b/application/displayblock.class.inc.php
index b7940b90dc..e4da37dfac 100644
--- a/application/displayblock.class.inc.php
+++ b/application/displayblock.class.inc.php
@@ -2292,6 +2292,17 @@ class MenuBlock extends DisplayBlock
 				}
 				// ResourceId should not be sanitized
 				$oActionButton->AddDataAttribute('resource-id', $sActionId);
+				if (isset($aAction['data_attributes']) && is_array($aAction['data_attributes'])) {
+					foreach ($aAction['data_attributes'] as $sName => $sValue) {
+						$sDataAttributeName = $sName;
+						$oActionButton->AddDataAttribute($sDataAttributeName, (string) $sValue);
+					}
+				}
+				if (isset($aAction['aria_attributes']) && is_array($aAction['aria_attributes'])) {
+					foreach ($aAction['aria_attributes'] as $sName => $sValue) {
+						$oActionButton->AddAriaAttribute((string) $sName, (string) $sValue);
+					}
+				}
 				$oActionButton->AddCSSClasses(['ibo-action-button', 'ibo-regular-action-button']);
 				if (empty($sLabel)) {
 					if (empty($aAction['tooltip'])) {
diff --git a/application/forms.class.inc.php b/application/forms.class.inc.php
index 61f62ded64..00982dfbe7 100644
--- a/application/forms.class.inc.php
+++ b/application/forms.class.inc.php
@@ -220,10 +220,19 @@ class DesignerForm
 					$sValidationFields = '</td><td class="prop_icon prop_apply ibo-prop--apply" >'.$sValidation.'</td><td  class="prop_icon prop_cancel ibo-prop--cancel"><span><div class="ibo-button ibo-is-alternative ibo-is-neutral" data-tooltip-content="'.Dict::Format('UI:DashboardEdit:Revert').'"><i class="fas fa-undo"></i></div></span></td>'
 						.$this->EndRow();
 
+					$aPropertyFieldData = [
+						'code' => $oField->GetCode(),
+						'type' => $oField->GetInputType(),
+						'label' => $aRow['label'],
+						'raw-value' => $oField->GetRawValue(),
+					];
 					if (is_null($aRow['label'])) {
-						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_value" colspan="2">'.$aRow['value'];
+						$sReturn .= $this->StartRow($sFieldId, $aPropertyFieldData).
+							'<td class="prop_value" data-role="ibo-property-field-value" colspan="2">'.$aRow['value'];
 					} else {
-						$sReturn .= $this->StartRow($sFieldId).'<td class="prop_label">'.$aRow['label'].'</td><td class="prop_value">'.$aRow['value'];
+						$sReturn .= $this->StartRow($sFieldId, $aPropertyFieldData).
+							'<td class="prop_label" data-role="ibo-property-field-label">'.$aRow['label'].
+							'</td><td class="prop_value" data-role="ibo-property-field-value">'.$aRow['value'];
 					}
 					if (!($oField instanceof DesignerFormSelectorField) && !($oField instanceof DesignerMultipleSubFormField)) {
 						$sReturn .= $sValidationFields;
@@ -294,12 +303,21 @@ EOF
 		}
 	}
 
-	public function StartRow($sFieldId = null)
+	public function StartRow($sFieldId = null, $aPropertyFieldData = [])
 	{
-		if ($sFieldId != null) {
-			return '<tr id="row_'.$sFieldId.'" data-path="'.$this->GetHierarchyPath().'" data-selector="'.$this->GetHierarchyParent().'">';
+		$sPropertyFieldAttributes = '';
+		foreach ($aPropertyFieldData as $sAttribute => $value) {
+			if (is_array($value)) {
+				$value = json_encode($value);
+			} elseif (is_null($value)) {
+				$value = '';
+			}
+			$sPropertyFieldAttributes .= ' data-property-field-'.$sAttribute.'="'.utils::EscapeHtml((string)$value).'"';
 		}
-		return '<tr data-path="'.$this->GetHierarchyPath().'" data-selector="'.$this->GetHierarchyParent().'">';
+		if ($sFieldId != null) {
+			return '<tr id="row_'.$sFieldId.'" data-path="'.$this->GetHierarchyPath().'" data-selector="'.$this->GetHierarchyParent().'"'.$sPropertyFieldAttributes.'>';
+		}
+		return '<tr data-path="'.$this->GetHierarchyPath().'" data-selector="'.$this->GetHierarchyParent().'"'.$sPropertyFieldAttributes.'>';
 	}
 
 	public function EndRow()
@@ -679,6 +697,14 @@ class DesignerFormField
 		return $this->sCode;
 	}
 
+	/**
+	 * @return mixed
+	 */
+	public function GetRawValue()
+	{
+		return $this->defaultValue;
+	}
+
 	/**
 	 * @param \DesignerForm $oForm
 	 */
@@ -1629,6 +1655,11 @@ class DesignerFormSelectorField extends DesignerFormField
 		return 'selector_property_field';
 	}
 
+	public function GetRawValue()
+	{
+		return $this->defaultRealValue;
+	}
+
 	public function AddSubForm($oSubForm, $sLabel, $sValue)
 	{
 		$this->aSubForms[] = ['form' => $oSubForm, 'label' => $sLabel, 'value' => $sValue];
diff --git a/application/utils.inc.php b/application/utils.inc.php
index 0b93b82334..43786e687e 100644
--- a/application/utils.inc.php
+++ b/application/utils.inc.php
@@ -1833,10 +1833,15 @@ SQL;
 	/**
 	 * Some characters cause troubles with jQuery when used inside DOM IDs, so let's replace them by the safe _ (underscore)
 	 * @param string $sId The ID to sanitize
+	 * @param bool $bForSelector Whether to apply strict CSS/jQuery selector-safe sanitization
 	 * @return string The sanitized ID
 	 */
-	public static function GetSafeId($sId)
+	public static function GetSafeId($sId, bool $bForSelector = false)
 	{
+		if ($bForSelector) {
+			return preg_replace('/[^a-zA-Z0-9_]/', '_', $sId);
+		}
+
 		return str_replace([':', '[', ']', '+', '-', ' '], '_', $sId);
 	}
 
diff --git a/core/config.class.inc.php b/core/config.class.inc.php
index d95967d965..a9fa9db8d4 100644
--- a/core/config.class.inc.php
+++ b/core/config.class.inc.php
@@ -607,6 +607,14 @@ class Config
 			'source_of_value' => '',
 			'show_in_conf_sample' => false,
 		],
+		'attribute.max_actions_items' => [
+			'type' => 'integer',
+			'description' => 'Maximum number of actions to display before it\'s compacted into a single action (0 means no limit)',
+			'default' => 2,
+			'value' => 2,
+			'source_of_value' => '',
+			'show_in_conf_sample' => false,
+		],
 		'email_asynchronous' => [
 			'type' => 'bool',
 			'description' => 'If set, the emails are sent off line, which requires cron.php to be activated. Exception: some features like the email test utility will force the serialized mode',
diff --git a/css/backoffice/components/_all.scss b/css/backoffice/components/_all.scss
index 14e62bac21..f571fc1887 100644
--- a/css/backoffice/components/_all.scss
+++ b/css/backoffice/components/_all.scss
@@ -5,6 +5,8 @@
 
 @import "alert";
 @import "button";
+@import "button-bar";
+@import "button-separator";
 @import "button-group";
 @import "breadcrumbs";
 @import "quick-create";
diff --git a/css/backoffice/components/_button-bar.scss b/css/backoffice/components/_button-bar.scss
new file mode 100644
index 0000000000..75e54c1978
--- /dev/null
+++ b/css/backoffice/components/_button-bar.scss
@@ -0,0 +1,43 @@
+/*
+ * @copyright   Copyright (C) 2010-2024 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-button-bar--gap: 2px !default;
+$ibo-button-bar--track--gap: 6px !default;
+
+/* button-bar.css */
+ibo-button-bar{
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  position: relative;
+  gap: $ibo-button-bar--gap;
+  overflow: hidden;
+}
+
+/* Keep content visible even if JS initialization is delayed. */
+
+ibo-button-bar .ibo-button-bar--track{
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  white-space: nowrap;
+  gap: $ibo-button-bar--track--gap;
+  align-items: center;
+}
+
+ibo-button-bar .ibo-button-bar--item{
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+ibo-button-bar .ibo-button-bar--item[hidden]{
+  display: none !important;
+}
+
+ibo-button-bar .ibo-button-bar--extra{
+  flex: 0 0 auto;
+  position: relative;
+}
diff --git a/css/backoffice/components/_button-separator.scss b/css/backoffice/components/_button-separator.scss
new file mode 100644
index 0000000000..2762b65353
--- /dev/null
+++ b/css/backoffice/components/_button-separator.scss
@@ -0,0 +1,20 @@
+/*
+ * @copyright   Copyright (C) 2010-2026 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-button-separator--width: 1px !default;
+$ibo-button-separator--height: 16px !default;
+$ibo-button-separator--margin-x: 0.75rem !default;
+$ibo-button-separator--margin-y: $ibo-spacing-0 !default;
+$ibo-button-separator--border-size: 1px !default;
+$ibo-button-separator--border-color: $ibo-color-grey-500 !default;
+
+.ibo-button-separator {
+	display: inline-flex;
+	border-right: $ibo-button-separator--border-size solid $ibo-button-separator--border-color;
+	width: $ibo-button-separator--width;
+	height: $ibo-button-separator--height;
+	margin: $ibo-button-separator--margin-y $ibo-button-separator--margin-x;
+}
+
diff --git a/css/backoffice/components/_field.scss b/css/backoffice/components/_field.scss
index 6bc1d458ff..b98d51fb04 100644
--- a/css/backoffice/components/_field.scss
+++ b/css/backoffice/components/_field.scss
@@ -37,6 +37,12 @@ $ibo-field--enable-bulk--border-radius: $ibo-border-radius-500 !default;
 
 $ibo-field--enable-bulk--checkbox--margin-left: $ibo-spacing-300 !default;
 
+$ibo-field--label--action--margin-y: $ibo-spacing-0 !default;
+$ibo-field--label--action--margin-x: $ibo-spacing-100 !default;
+$ibo-field--label--action--size: $ibo-field--fullscreen-toggler--size !default;
+$ibo-field--label--action--padding: $ibo-spacing-0 !default;
+$ibo-field--label--action--font-size: $ibo-font-size-50 !default;
+
 /* SCSS rules */
 .ibo-field {
   @extend %ibo-font-size-150;
@@ -264,4 +270,32 @@ $ibo-field--enable-bulk--checkbox--margin-left: $ibo-spacing-300 !default;
 
 .ibo-input-select--action-buttons a  {
   @extend %ibo-hyperlink-inherited-colors;
+}
+
+.ibo-field--label {
+  .ibo-field--action:not(.ibo-button-separator) {
+    display: inline-flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+
+    width: $ibo-field--label--action--size;
+    height: $ibo-field--label--action--size;
+    padding: $ibo-field--label--action--padding;
+    border-radius: $ibo-field--fullscreen-toggler--border-radius;
+    font-size: $ibo-field--label--action--font-size;
+    ~ .ibo-field--action {
+      margin-left: $ibo-field--label--action--margin-x;
+    }
+  }
+  .ibo-field--action.ibo-button-separator {
+    margin:  $ibo-field--label--action--margin-y $ibo-field--label--action--margin-x;
+    vertical-align: middle;
+  }
+}
+
+// Specific rule to ensure that the grouped actions popover of a field is visible in fullscreen mode
+body.ibo-has-fullscreen-descendant .ibo-popover-menu.ibo-field--grouped-actions-popover {
+  z-index: 1060 !important;
 }
\ No newline at end of file
diff --git a/css/backoffice/layout/_all.scss b/css/backoffice/layout/_all.scss
index f1dabffb0c..e3b32c3688 100644
--- a/css/backoffice/layout/_all.scss
+++ b/css/backoffice/layout/_all.scss
@@ -4,7 +4,6 @@
  */
 
 @import "navigation-menu";
-@import "top-bar";
 @import "content";
 @import "details";
 @import "tab-container/tab-container";
@@ -15,4 +14,5 @@
 @import "wizard-container/wizard-container";
 @import "object/all";
 @import "activity-panel/all";
-@import "extension/all";
\ No newline at end of file
+@import "extension/all";
+@import "top-bar/all";
\ No newline at end of file
diff --git a/css/backoffice/layout/activity-panel/_activity-action.scss b/css/backoffice/layout/activity-panel/_activity-action.scss
new file mode 100644
index 0000000000..005590f006
--- /dev/null
+++ b/css/backoffice/layout/activity-panel/_activity-action.scss
@@ -0,0 +1,78 @@
+$ibo-activity-panel--activity-actions--right: $ibo-activity-panel--add-caselog-entry-button--right !default;
+$ibo-activity-panel--activity-actions--top: 76px + $ibo-activity-panel--activity-actions--right !default;
+$ibo-activity-panel--activity-actions--gap: $ibo-spacing-300 !default;
+
+$ibo-activity-panel--activity-action--diameter: $ibo-activity-panel--add-caselog-entry-button--diameter !default;
+$ibo-activity-panel--activity-action--background-color: $ibo-activity-panel--add-caselog-entry-button--background-color !default;
+$ibo-activity-panel--activity-action--background-color--on-hover: $ibo-activity-panel--add-caselog-entry-button--background-color--on-hover !default;
+$ibo-activity-panel--activity-action--background-color--is-active: $ibo-activity-panel--add-caselog-entry-button--background-color--is-active !default;
+$ibo-activity-panel--activity-action--color: $ibo-activity-panel--add-caselog-entry-button--color !default;
+$ibo-activity-panel--activity-action--border-radius: $ibo-border-radius-full !default;
+$ibo-activity-panel--activity-action--box-shadow: $ibo-activity-panel--add-caselog-entry-button--box-shadow !default;
+$ibo-activity-panel--activity-action--hover--box-shadow: $ibo-activity-panel--add-caselog-entry-button--hover--box-shadow !default;
+
+$ibo-activity-panel--activity-action--icon--height: $ibo-activity-panel--add-caselog-entry-button--icon--height !default;
+$ibo-activity-panel--activity-action--icon--width: $ibo-activity-panel--activity-action--icon--height !default;
+$ibo-activity-panel--activity-action--icon--font-size: $ibo-activity-panel--add-caselog-entry-button--icon--font-size !default;
+$ibo-activity-panel--activity-action--icon--line-height: $ibo-activity-panel--add-caselog-entry-button--icon--line-height !default;
+$ibo-activity-panel--activity-action-separator--width: calc(#{$ibo-activity-panel--activity-action--diameter} / 1.5) !default;
+$ibo-activity-panel--activity-action-separator--height: 2px !default;
+$ibo-activity-panel--activity-action-separator--background-color: $ibo-color-grey-500 !default;
+
+
+.ibo-activity-panel--activity-actions {
+  display: flex;
+  flex-direction: column;
+  gap: $ibo-activity-panel--activity-actions--gap;
+  position: absolute;
+  z-index: 1;
+  right: $ibo-activity-panel--activity-actions--right;
+  top: $ibo-activity-panel--activity-actions--top;
+  &.ibo-is-hidden{
+    display: none;
+  }
+  &:has(+ .ibo-activity-panel--add-caselog-entry-button) {
+    top: calc(#{$ibo-activity-panel--activity-actions--top} + #{$ibo-activity-panel--activity-action--diameter} + #{$ibo-activity-panel--activity-actions--gap});
+  }
+}
+
+.ibo-activity-panel--activity-action {
+  @extend %ibo-baseline-centered-content;
+
+  width: $ibo-activity-panel--activity-action--diameter;
+  height: $ibo-activity-panel--activity-action--diameter;
+
+  background-color: $ibo-activity-panel--activity-action--background-color;
+  color: $ibo-activity-panel--activity-action--color;
+
+  border-radius: $ibo-activity-panel--activity-action--border-radius;
+  box-shadow: $ibo-activity-panel--activity-action--box-shadow;
+
+  > i{
+    text-align: center;
+    height: $ibo-activity-panel--activity-action--icon--height;
+    width: $ibo-activity-panel--activity-action--icon--width;
+    font-size: $ibo-activity-panel--activity-action--icon--font-size;
+    line-height: $ibo-activity-panel--activity-action--icon--line-height;
+  }
+  &:hover {
+    color: $ibo-activity-panel--activity-action--color;
+    background-color: $ibo-activity-panel--activity-action--background-color--on-hover;
+    box-shadow: $ibo-activity-panel--activity-action--hover--box-shadow;
+  }
+  &:active {
+    color: $ibo-activity-panel--activity-action--color;
+    background-color: $ibo-activity-panel--activity-action--background-color--is-active;
+  }
+  &.ibo-is-hidden{
+    display: none;
+  }
+}
+
+.ibo-activity-panel--activity-action-separator {
+  display: block;
+  width: $ibo-activity-panel--activity-action-separator--width;
+  height: $ibo-activity-panel--activity-action-separator--height;
+  margin: auto;
+  background-color: $ibo-activity-panel--activity-action-separator--background-color;
+}
diff --git a/css/backoffice/layout/activity-panel/_activity-panel.scss b/css/backoffice/layout/activity-panel/_activity-panel.scss
index 7d412d1d69..1a8a371eda 100644
--- a/css/backoffice/layout/activity-panel/_activity-panel.scss
+++ b/css/backoffice/layout/activity-panel/_activity-panel.scss
@@ -137,7 +137,8 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
 
     .ibo-activity-panel--header,
     .ibo-activity-panel--body,
-    .ibo-activity-panel--add-caselog-entry-button {
+    .ibo-activity-panel--add-caselog-entry-button,
+    .ibo-activity-panel--activity-actions{
       display: none;
     }
 
diff --git a/css/backoffice/layout/activity-panel/_all.scss b/css/backoffice/layout/activity-panel/_all.scss
index 57a8cdd54e..3c9cac0abe 100644
--- a/css/backoffice/layout/activity-panel/_all.scss
+++ b/css/backoffice/layout/activity-panel/_all.scss
@@ -10,3 +10,4 @@
 @import "transition-entry";
 @import "edits-entry";
 @import "notification-entry";
+@import "activity-action";
diff --git a/css/backoffice/layout/activity-panel/_caselog-entry-form.scss b/css/backoffice/layout/activity-panel/_caselog-entry-form.scss
index d26b085a21..423c55291d 100644
--- a/css/backoffice/layout/activity-panel/_caselog-entry-form.scss
+++ b/css/backoffice/layout/activity-panel/_caselog-entry-form.scss
@@ -59,4 +59,9 @@ $ibo-caselog-entry-form--lock-message--margin-left: 1rem !default;
 }
 .ibo-caselog-entry-form--action-buttons--main-actions > .ibo-popover-menu {
   z-index: 1;
+}
+
+.ibo-caselog-entry-form--action-buttons--extra-actions{
+  overflow: hidden;
+  flex-grow: 1;
 }
\ No newline at end of file
diff --git a/css/backoffice/layout/top-bar/_all.scss b/css/backoffice/layout/top-bar/_all.scss
new file mode 100644
index 0000000000..143c50d73a
--- /dev/null
+++ b/css/backoffice/layout/top-bar/_all.scss
@@ -0,0 +1,2 @@
+@import "top-bar";
+@import "top-bar-action";
\ No newline at end of file
diff --git a/css/backoffice/layout/top-bar/_top-bar-action.scss b/css/backoffice/layout/top-bar/_top-bar-action.scss
new file mode 100644
index 0000000000..8139fb192b
--- /dev/null
+++ b/css/backoffice/layout/top-bar/_top-bar-action.scss
@@ -0,0 +1,40 @@
+$ibo-top-bar-quick-action--head--background-color: $ibo-color-white-100 !default;
+
+$ibo-top-bar-quick-action--icon-padding-x: $ibo-spacing-500 !default;
+$ibo-top-bar-quick-action--icon-padding-y: $ibo-spacing-0 !default;
+$ibo-top-bar-quick-action--icon--color: $ibo-color-primary-600 !default;
+$ibo-top-bar-quick-action--icon--color--on-hover: $ibo-color-primary-700 !default;
+$ibo-top-bar-quick-action--icon--color--on-active: $ibo-color-primary-800 !default;
+$ibo-top-bar-quick-action-separator--width: 2px !default;
+$ibo-top-bar-quick-action-separator--background-color: $ibo-color-grey-300 !default;
+$ibo-top-bar-quick-action-separator--margin-y: $ibo-spacing-0 !default;
+$ibo-top-bar-quick-action-separator--margin-x: $ibo-spacing-300 !default;
+
+.ibo-top-bar-quick-action{
+  position: relative;
+  @extend %ibo-full-height-content;
+}
+.ibo-top-bar-quick-action--head{
+  @extend %ibo-full-height-content;
+  height: 100%;
+  background-color: $ibo-top-bar-quick-action--head--background-color;
+}
+.ibo-top-bar-quick-action--icon{
+  color: $ibo-top-bar-quick-action--icon--color;
+  align-self: center;
+  padding: $ibo-top-bar-quick-action--icon-padding-y $ibo-top-bar-quick-action--icon-padding-x;
+  @extend %ibo-font-ral-nor-400;
+
+  &:hover{
+    color: $ibo-top-bar-quick-action--icon--color--on-hover;
+  }
+  &:active{
+    color: $ibo-top-bar-quick-action--icon--color--on-active;
+  }
+}
+
+.ibo-top-bar-quick-action-separator {
+  width: $ibo-top-bar-quick-action-separator--width;
+  background-color: $ibo-top-bar-quick-action-separator--background-color;
+  margin: $ibo-top-bar-quick-action-separator--margin-y $ibo-top-bar-quick-action-separator--margin-x;
+}
\ No newline at end of file
diff --git a/css/backoffice/layout/_top-bar.scss b/css/backoffice/layout/top-bar/_top-bar.scss
similarity index 100%
rename from css/backoffice/layout/_top-bar.scss
rename to css/backoffice/layout/top-bar/_top-bar.scss
diff --git a/datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss b/datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss
index cce7c8bdde..5ea04d3e60 100644
--- a/datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss
+++ b/datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss
@@ -149,6 +149,8 @@ $ibo-quick-create--input--text-color: $ibo-color-grey-100 !default;
 $ibo-quick-create--input--placeholder-color: $ibo-color-grey-200 !default;
 $ibo-quick-create--compartment-element--background-color--is-active: $ibo-color-grey-500 !default;
 
+$ibo-top-bar-quick-action--head--background-color: $ibo-top-bar--background-color !default;
+
 $ibo-datatable--toolbar--text-color: $ibo-color-grey-300 !default;
 $ibo-vendors-datatables--pagination-button--background-color--on-hover: $ibo-color-grey-700 !default;
 $ibo-vendors-datatables--pagination-button--text-color--is-active: $ibo-color-grey-200 !default;
diff --git a/dictionaries/ui/components/field/cs.dictionary.itop.field.php b/dictionaries/ui/components/field/cs.dictionary.itop.field.php
index 9e17850a22..a9773c1445 100644
--- a/dictionaries/ui/components/field/cs.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/cs.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('CS CZ', 'Czech', 'Čeština', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Neznámé hodnoty',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/da.dictionary.itop.field.php b/dictionaries/ui/components/field/da.dictionary.itop.field.php
index 7d007854e4..65dcc07b94 100644
--- a/dictionaries/ui/components/field/da.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/da.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('DA DA', 'Danish', 'Dansk', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Unknown values~~',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/de.dictionary.itop.field.php b/dictionaries/ui/components/field/de.dictionary.itop.field.php
index cd6602fd42..de07b9ba5b 100644
--- a/dictionaries/ui/components/field/de.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/de.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('DE DE', 'German', 'Deutsch', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Unbekannte Werte',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'Weitere Aktionen',
 ]);
diff --git a/dictionaries/ui/components/field/en.dictionary.itop.field.php b/dictionaries/ui/components/field/en.dictionary.itop.field.php
index ca6c19db09..6cd5e58fbe 100644
--- a/dictionaries/ui/components/field/en.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/en.dictionary.itop.field.php
@@ -21,4 +21,5 @@
 // Global search
 Dict::Add('EN US', 'English', 'English', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Unknown values',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions',
 ]);
diff --git a/dictionaries/ui/components/field/en_gb.dictionary.itop.field.php b/dictionaries/ui/components/field/en_gb.dictionary.itop.field.php
index dba2faa929..80f6c71915 100644
--- a/dictionaries/ui/components/field/en_gb.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/en_gb.dictionary.itop.field.php
@@ -8,4 +8,5 @@
 // Global search
 Dict::Add('EN GB', 'British English', 'British English', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Unknown values',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions',
 ]);
diff --git a/dictionaries/ui/components/field/es_cr.dictionary.itop.field.php b/dictionaries/ui/components/field/es_cr.dictionary.itop.field.php
index 0137741c15..cd27f446e8 100644
--- a/dictionaries/ui/components/field/es_cr.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/es_cr.dictionary.itop.field.php
@@ -10,4 +10,5 @@
  */
 Dict::Add('ES CR', 'Spanish', 'Español, Castellano', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Valores desconocidos',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/fr.dictionary.itop.field.php b/dictionaries/ui/components/field/fr.dictionary.itop.field.php
index ca72f4fa0c..47d4691bca 100644
--- a/dictionaries/ui/components/field/fr.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/fr.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('FR FR', 'French', 'Français', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Valeurs inconnues',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'Plus d\'actions',
 ]);
diff --git a/dictionaries/ui/components/field/hu.dictionary.itop.field.php b/dictionaries/ui/components/field/hu.dictionary.itop.field.php
index a55a0618d1..9492e4b300 100644
--- a/dictionaries/ui/components/field/hu.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/hu.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('HU HU', 'Hungarian', 'Magyar', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Ismeretlen értékek',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/it.dictionary.itop.field.php b/dictionaries/ui/components/field/it.dictionary.itop.field.php
index da6160b72c..e610357550 100644
--- a/dictionaries/ui/components/field/it.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/it.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('IT IT', 'Italian', 'Italiano', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Valori sconosciuti',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/ja.dictionary.itop.field.php b/dictionaries/ui/components/field/ja.dictionary.itop.field.php
index 4770049bb6..7cef1542bd 100644
--- a/dictionaries/ui/components/field/ja.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/ja.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('JA JP', 'Japanese', '日本語', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Unknown values~~',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/nl.dictionary.itop.field.php b/dictionaries/ui/components/field/nl.dictionary.itop.field.php
index 2814ef8a65..aa4c310292 100644
--- a/dictionaries/ui/components/field/nl.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/nl.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('NL NL', 'Dutch', 'Nederlands', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Onbekende waardes',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/pl.dictionary.itop.field.php b/dictionaries/ui/components/field/pl.dictionary.itop.field.php
index b1c72557ac..558184579f 100644
--- a/dictionaries/ui/components/field/pl.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/pl.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('PL PL', 'Polish', 'Polski', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Nieznane wartości',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/pt_br.dictionary.itop.field.php b/dictionaries/ui/components/field/pt_br.dictionary.itop.field.php
index 614c22a783..0c8ebcea99 100644
--- a/dictionaries/ui/components/field/pt_br.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/pt_br.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('PT BR', 'Brazilian', 'Brazilian', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Valores desconhecidos',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/ru.dictionary.itop.field.php b/dictionaries/ui/components/field/ru.dictionary.itop.field.php
index 8ffcb4c181..ff3c404889 100755
--- a/dictionaries/ui/components/field/ru.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/ru.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('RU RU', 'Russian', 'Русский', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Неизвестные значения',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'Больше действий',
 ]);
diff --git a/dictionaries/ui/components/field/sk.dictionary.itop.field.php b/dictionaries/ui/components/field/sk.dictionary.itop.field.php
index da42fde3eb..068d4f6760 100644
--- a/dictionaries/ui/components/field/sk.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/sk.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('SK SK', 'Slovak', 'Slovenčina', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Unknown values~~',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/tr.dictionary.itop.field.php b/dictionaries/ui/components/field/tr.dictionary.itop.field.php
index 3feaf31458..2442fcb986 100644
--- a/dictionaries/ui/components/field/tr.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/tr.dictionary.itop.field.php
@@ -12,4 +12,5 @@
  */
 Dict::Add('TR TR', 'Turkish', 'Türkçe', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Unknown values~~',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/dictionaries/ui/components/field/zh_cn.dictionary.itop.field.php b/dictionaries/ui/components/field/zh_cn.dictionary.itop.field.php
index 3174cda940..a80278f952 100644
--- a/dictionaries/ui/components/field/zh_cn.dictionary.itop.field.php
+++ b/dictionaries/ui/components/field/zh_cn.dictionary.itop.field.php
@@ -20,4 +20,5 @@
 // Global search
 Dict::Add('ZH CN', 'Chinese', '简体中文', [
 	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => '未知值',
+	'UI:Component:Field:GroupedActions:Tooltip' => 'More actions~~',
 ]);
diff --git a/js/components/button-bar.js b/js/components/button-bar.js
new file mode 100644
index 0000000000..5874e66125
--- /dev/null
+++ b/js/components/button-bar.js
@@ -0,0 +1,308 @@
+/*
+ * Copyright (C) 2013-2024 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+class ButtonBar extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"overflow-mode",
+			"overflow-count",
+			"overflow-start-after-button-id",
+			"data-overflow-mode",
+			"data-overflow-count",
+			"data-overflow-start-after-button-id",
+		];
+	}
+
+	constructor() {
+		super();
+		// Guard against duplicate setup if the node is re-attached.
+		this._initialized = false;
+		// Retry counter for delayed jQuery plugin availability.
+		this._popoverInitAttempts = 0;
+		// Recompute distribution on resize.
+		this._onResize = this.refresh.bind(this);
+
+		this._overflowMode = "fit";
+		this._count = 3;
+		this._overflowStartAfterButtonId = null;
+		this._initialInlineDisplay = null;
+	}
+
+	attributeChangedCallback() {
+		this._updateOverflowConfigFromAttributes();
+		this._initialInlineDisplay = this.style.display;
+		if (this._initialized) {
+			this.refresh();
+		}
+	}
+
+	connectedCallback() {
+		if (this._initialized) {
+			return;
+		}
+		this._initialized = true;
+
+		// Core DOM references rendered by the Twig template.
+		this._track = this.querySelector('[data-role="ibo-button-bar--track"]');
+		this._extra = this.querySelector('[data-role="ibo-button-bar--extra"]');
+		this._popover = this.querySelector('.ibo-button-bar--popover[data-role="ibo-popover-menu"]');
+		// Toggler id is deterministic: <overflow-id>--toggler.
+		const sTogglerId = `${this.id}--toggler`;
+		const oToggler = document.getElementById(sTogglerId);
+		this._toggler = oToggler && this.contains(oToggler) ? oToggler : null;
+
+		if (!this._track || !this._extra || !this._popover || !this._toggler) {
+			return;
+		}
+
+		this._updateOverflowConfigFromAttributes();
+
+		if (window.ResizeObserver) {
+			this._resizeObserver = new ResizeObserver(this._onResize);
+			this._resizeObserver.observe(this);
+			this._resizeObserver.observe(this._track);
+		} else {
+			window.addEventListener("resize", this._onResize);
+		}
+
+		// Observe both source actions and popover entries (both can be updated dynamically).
+		this._mutationObserver = new MutationObserver(() => this.refresh());
+		this._mutationObserver.observe(this._track, { childList: true, subtree: true, characterData: true });
+		this._mutationObserver.observe(this._popover, { childList: true, subtree: true });
+
+		this.refresh();
+	}
+
+	_getAttributeValue(...aNames) {
+		for (const sName of aNames) {
+			const sValue = this.getAttribute(sName);
+			if (sValue !== null) {
+				return sValue;
+			}
+		}
+
+		return null;
+	}
+
+	_updateOverflowConfigFromAttributes() {
+		const sModeRaw = this._getAttributeValue("overflow-mode", "data-overflow-mode");
+		const sMode = (sModeRaw || "fit").trim().toLowerCase();
+		const aAllowedModes = ["fit", "count", "after-marker"];
+		this._overflowMode = aAllowedModes.includes(sMode) ? sMode : "fit";
+
+		const sCountRaw = this._getAttributeValue("overflow-count", "data-overflow-count");
+		const iParsedCount = Number.parseInt(sCountRaw ?? "3", 10);
+		this._count = Number.isFinite(iParsedCount) && iParsedCount >= 0 ? iParsedCount : 3;
+
+		const sStartAfterButtonId = this._getAttributeValue("overflow-start-after-button-id", "data-overflow-start-after-button-id");
+		this._overflowStartAfterButtonId = sStartAfterButtonId && sStartAfterButtonId.trim() !== "" ? sStartAfterButtonId : null;
+	}
+
+	disconnectedCallback() {
+		this._resizeObserver?.disconnect();
+		this._mutationObserver?.disconnect();
+		if (this._popoverInitTimer) {
+			clearTimeout(this._popoverInitTimer);
+		}
+		this._popover?.removeEventListener("click", this._onPopoverClick);
+		window.removeEventListener("resize", this._onResize);
+		this._initialized = false;
+	}
+
+	_refreshCollections() {
+		// Source actions are direct children of the track.
+		this._items = Array.from(this._track.children).filter((oItem) => Boolean(oItem.dataset.overflowItemId));
+		this._itemsById = {};
+		this._items.forEach((oItem) => {
+			if (oItem.dataset.overflowItemId) {
+				this._itemsById[oItem.dataset.overflowItemId] = oItem;
+			}
+		});
+
+		// Popover entries are generated server-side with the same mapping id.
+		this._menuItems = Array.from(this._popover.querySelectorAll('[data-role~="ibo-popover-menu--item"][data-overflow-item-id]'));
+		this._menuItemsById = {};
+		this._menuItems.forEach((oItem) => {
+			this._menuItemsById[oItem.dataset.overflowItemId] = oItem;
+		});
+	}
+
+	_outerWidth(oElem) {
+		const oRect = oElem.getBoundingClientRect();
+		const oStyle = getComputedStyle(oElem);
+		return oRect.width + (parseFloat(oStyle.marginLeft) || 0) + (parseFloat(oStyle.marginRight) || 0);
+	}
+
+	_flexGap(oElem) {
+		const oStyle = getComputedStyle(oElem);
+		const iGap = parseFloat(oStyle.columnGap);
+		return Number.isFinite(iGap) ? iGap : 0;
+	}
+
+	_closePopoverIfOpen() {
+		if (window.jQuery && window.jQuery(this._popover).data("itop-popover_menu")) {
+			window.jQuery(this._popover).popover_menu("closePopup");
+		}
+	}
+
+	refresh() {
+		this._refreshCollections();
+		this.layout();
+	}
+
+	_applyDisplayMode() {
+		if (this._overflowMode === "fit") {
+			this.style.display = this._initialInlineDisplay || "";
+			return;
+		}
+
+		this.style.display = "inline-flex";
+	}
+
+	layout() {
+		this._applyDisplayMode();
+
+		if (!this._items || this._items.length === 0) {
+			this._extra.hidden = true;
+			return;
+		}
+
+		// 1) Reset visibility before computing overflow.
+		this._items.forEach((oItem) => {
+			oItem.hidden = false;
+		});
+		this._menuItems.forEach((oItem) => {
+			oItem.hidden = true;
+		});
+
+		// 2) No mapping => keep source actions visible and hide overflow controls.
+		if (this._menuItems.length === 0) {
+			this._extra.hidden = true;
+			this._closePopoverIfOpen();
+			return;
+		}
+
+		this._extra.hidden = false;
+		const bHasHiddenItems = this._layoutByMode();
+		this._extra.hidden = !bHasHiddenItems;
+		if (!bHasHiddenItems) {
+			this._closePopoverIfOpen();
+		}
+	}
+
+	_layoutByMode() {
+		switch (this._overflowMode) {
+			case "count":
+				return this._layoutCountMode();
+			case "after-marker":
+				return this._layoutAfterMarkerMode();
+			case "fit":
+			default:
+				return this._layoutFitMode();
+		}
+	}
+
+	_setOverflowForItem(oItem, bOverflow) {
+		oItem.hidden = bOverflow;
+		const sItemId = oItem.dataset.overflowItemId;
+		const oMenuItem = sItemId ? this._menuItemsById[sItemId] : null;
+		if (oMenuItem) {
+			oMenuItem.hidden = !bOverflow;
+		}
+		return Boolean(oMenuItem) && bOverflow;
+	}
+
+	_layoutCountMode() {
+		let bHasHiddenItems = false;
+		for (let i = 0; i < this._items.length; i++) {
+			if (i < this._count) {
+				continue;
+			}
+			if (this._setOverflowForItem(this._items[i], true)) {
+				bHasHiddenItems = true;
+			}
+		}
+		return bHasHiddenItems;
+	}
+
+	_layoutAfterMarkerMode() {
+		let iMarkerIndex = -1;
+		if (this._overflowStartAfterButtonId) {
+			iMarkerIndex = this._items.findIndex((oItem) => oItem.dataset.sourceButtonId === this._overflowStartAfterButtonId);
+		}
+
+		if (iMarkerIndex < 0) {
+			iMarkerIndex = this._items.findIndex((oItem) => oItem.dataset.overflowStartAfter === "1");
+		}
+
+		if (iMarkerIndex < 0) {
+			return false;
+		}
+
+		let bHasHiddenItems = false;
+		for (let i = iMarkerIndex + 1; i < this._items.length; i++) {
+			if (this._setOverflowForItem(this._items[i], true)) {
+				bHasHiddenItems = true;
+			}
+		}
+
+		return bHasHiddenItems;
+	}
+
+	_layoutFitMode() {
+		const iHostWidth = this.clientWidth;
+		if (iHostWidth <= 0) {
+			return false;
+		}
+
+		const aWidths = this._items.map((oItem) => this._outerWidth(oItem));
+		const iTrackGap = this._flexGap(this._track);
+		const iTotalWidth = aWidths.reduce((iSum, iWidth) => iSum + iWidth, 0) + Math.max(0, this._items.length - 1) * iTrackGap;
+
+		if (iTotalWidth <= iHostWidth) {
+			return false;
+		}
+
+		const iHostGap = this._flexGap(this);
+		const iAvailableWidth = Math.max(0, iHostWidth - this._outerWidth(this._extra) - iHostGap);
+		let iUsedWidth = 0;
+		let bHasHiddenItems = false;
+		let bOverflowStarted = false;
+
+		for (let i = 0; i < this._items.length; i++) {
+			const iWidth = aWidths[i];
+			const iGapBeforeItem = i > 0 ? iTrackGap : 0;
+
+			if (!bOverflowStarted && iUsedWidth + iGapBeforeItem + iWidth <= iAvailableWidth) {
+				iUsedWidth += iGapBeforeItem + iWidth;
+				continue;
+			}
+
+			bOverflowStarted = true;
+			if (this._setOverflowForItem(this._items[i], true)) {
+				bHasHiddenItems = true;
+			}
+		}
+
+		return bHasHiddenItems;
+	}
+}
+
+if (!customElements.get("ibo-button-bar")) {
+	customElements.define("ibo-button-bar", ButtonBar);
+}
diff --git a/js/dashboard.js b/js/dashboard.js
index c604d262a4..671658c3ed 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -162,7 +162,7 @@ $(function()
 			//
 			var oDashlet = $('<div class="dashlet" id="dashlet_' + sFinalDashletId + '"/>');
 			oDashlet.appendTo(options.container);
-			var oDashletProperties = $('<div class="dashlet_properties" id="dashlet_properties_' + sFinalDashletId + '"/>');
+			var oDashletProperties = $('<div class="dashlet_properties" id="dashlet_properties_' + sFinalDashletId + '" data-role="ibo-dashlet-properties" data-dashlet-class="'+options.dashlet_class+'"/>');
 			oDashletProperties.appendTo($('#dashlet_properties'));
 
 			// 2) Ajax call to fill the divs with default values
diff --git a/js/layouts/activity-panel/activity-panel.js b/js/layouts/activity-panel/activity-panel.js
index 9172a337b4..bb42842725 100644
--- a/js/layouts/activity-panel/activity-panel.js
+++ b/js/layouts/activity-panel/activity-panel.js
@@ -71,6 +71,8 @@ $(function()
 					authors_count: '[data-role="ibo-activity-panel--tab-toolbar-info-authors-count"]',
 					messages_count: '[data-role="ibo-activity-panel--tab-toolbar-info-messages-count"]',
 					compose_button: '[data-role="ibo-activity-panel--add-caselog-entry-button"]',
+                    activity_actions: '[data-role="ibo-activity-panel--activity-actions"]',
+                    activity_action: '[data-role="ibo-activity-panel--activity-action"]',
 					compose_menu: '#ibo-activity-panel--compose-menu',
 					compose_menu_item: '#ibo-activity-panel--compose-menu [data-role="ibo-popover-menu--item"]',
 					caselog_entry_form: '[data-role="ibo-caselog-entry-form"]',
@@ -194,6 +196,11 @@ $(function()
 				this.element.find(this.js_selectors.compose_button).on('click', function (oEvent) {
 					me._onComposeButtonClick(oEvent);
 				});
+
+                this.element.find(this.js_selectors.activity_action).on('click', function (oEvent) {
+                    me._onActivityActionClick(oEvent, $(this));
+                });
+
 				// - Click on the compose menu items
 				this.element.find(this.js_selectors.compose_menu_item).on('click', function (oEvent) {
 					me._onComposeMenuItemClick(oEvent, $(this));
@@ -375,6 +382,31 @@ $(function()
 
 				// Else, the compose menu will open automatically
 			},
+
+            _onActivityActionClick: function (oEvent, oActionElem) {
+                oEvent.preventDefault();
+                const oActiveTabData = this._GetActiveTabData();
+                const oActionElement = $(oEvent.target).closest(this.js_selectors.activity_action);
+                const oActionElementMenu = $(document.getElementById(oActionElement.attr('id')+'-menu'));
+                const oTabCode = oActiveTabData.type === 'caselog' ? oActiveTabData.att_code : oActiveTabData.type;
+                const oActionElementMenuItem = oActionElementMenu.find('[data-caselog-attribute-code="'+oTabCode+'"]');
+
+                // If the current tab has a corresponding menu item, click on it to trigger it directly
+                if (oActionElementMenuItem.length > 0) {
+                    // Note: Stop propagation to avoid the menu to be opened automatically by the popover handler
+                    oEvent.stopImmediatePropagation();
+                    if (oActionElementMenuItem.is('[onclick]')) {
+                        oActionElementMenuItem.click();
+                    }
+                    else {
+                        // Navigate synchronously to preserve the user activation of the original click.
+                        const sTarget = oActionElementMenuItem.attr('target') || '_self';
+                        window.open(oActionElementMenuItem.attr('href'), sTarget);
+                    }
+                }
+                // Else let the popover menu open automatically, the user will have to choose a case log
+            },
+
 			/**
 			 * @param oEvent {Object}
 			 * @param oItemElem {Object} jQuery object representing the clicked item
@@ -784,6 +816,7 @@ $(function()
 			_ShowCaseLogsEntryForms: function () {
 				this.element.find(this.js_selectors.caselog_entry_form).trigger('show_form.caselog_entry_form.itop');
 				this.element.find(this.js_selectors.compose_button).addClass(this.css_classes.is_hidden);
+				this.element.find(this.js_selectors.activity_actions).addClass(this.css_classes.is_hidden);
 			},
 			/**
 			 * Hide all case logs entry forms.
@@ -795,6 +828,7 @@ $(function()
 			_HideCaseLogsEntryForms: function () {
 				this.element.find(this.js_selectors.caselog_entry_form).trigger('hide_form.caselog_entry_form.itop');
 				this.element.find(this.js_selectors.compose_button).removeClass(this.css_classes.is_hidden);
+				this.element.find(this.js_selectors.activity_actions).removeClass(this.css_classes.is_hidden);
 			},
 			/**
 			 * Empty all case logs entry forms
diff --git a/js/property_field.js b/js/property_field.js
index cd51fd5850..d895b9aea3 100644
--- a/js/property_field.js
+++ b/js/property_field.js
@@ -27,6 +27,7 @@ $(function()
 
 			this.element
 				.addClass( "itop-property-field ibo-field" )
+                .attr('data-role', 'ibo-property-field')
 				.on('apply_changes.itop-property-field', function(){me._do_apply();} );
 				
 			this.bModified = false;
diff --git a/lib/composer/autoload_classmap.php b/lib/composer/autoload_classmap.php
index 7b0a6ad759..253375f5f3 100644
--- a/lib/composer/autoload_classmap.php
+++ b/lib/composer/autoload_classmap.php
@@ -21,7 +21,7 @@ return array(
     'ApplicationContext' => $baseDir . '/application/applicationcontext.class.inc.php',
     'ApplicationException' => $baseDir . '/application/exceptions/ApplicationException.php',
     'ApplicationMenu' => $baseDir . '/application/menunode.class.inc.php',
-    'ApplicationPopupMenuItem' => $baseDir . '/application/applicationextension/backoffice/ApplicationPopupMenuItem.php',
+    'ApplicationPopupMenuItem' => $baseDir . '/application/applicationextension/common/ApplicationPopupMenuItem.php',
     'Archive_Tar' => $vendorDir . '/pear/archive_tar/Archive/Tar.php',
     'ArchivedObjectException' => $baseDir . '/application/exceptions/ArchivedObjectException.php',
     'AsyncSendEmail' => $baseDir . '/core/asynctask.class.inc.php',
@@ -157,15 +157,24 @@ return array(
     'Combodo\\iTop\\Application\\TwigBase\\UI\\UIBlockNode' => $baseDir . '/sources/Application/TwigBase/UI/UIBlockNode.php',
     'Combodo\\iTop\\Application\\TwigBase\\UI\\UIBlockParser' => $baseDir . '/sources/Application/TwigBase/UI/UIBlockParser.php',
     'Combodo\\iTop\\Application\\UI\\Base\\AbstractUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/AbstractUIBlockFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Common\\Action\\tActionCommon' => $baseDir . '/sources/Application/UI/Base/Common/Action/tActionCommon.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Common\\Action\\tActionJs' => $baseDir . '/sources/Application/UI/Base/Common/Action/tActionJs.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Common\\Action\\tActionURL' => $baseDir . '/sources/Application/UI/Base/Common/Action/tActionURL.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Common\\Metadata\\AriaAttributes' => $baseDir . '/sources/Application/UI/Base/Common/Metadata/AriaAttributes.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Common\\Metadata\\DataAttributes' => $baseDir . '/sources/Application/UI/Base/Common/Metadata/DataAttributes.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Common\\Metadata\\Grouping' => $baseDir . '/sources/Application/UI/Base/Common/Metadata/Grouping.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\Alert' => $baseDir . '/sources/Application/UI/Base/Component/Alert/Alert.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\Badge' => $baseDir . '/sources/Application/UI/Base/Component/Badge/Badge.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\BadgeUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/Badge/BadgeUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/Application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonBar\\ButtonBar' => $baseDir . '/sources/Application/UI/Base/Component/ButtonBar/ButtonBar.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonBar\\ButtonBarUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/ButtonBar/ButtonBarUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroup' => $baseDir . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroup.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroupUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroupUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\Button' => $baseDir . '/sources/Application/UI/Base/Component/Button/Button.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonJS' => $baseDir . '/sources/Application/UI/Base/Component/Button/ButtonJS.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonSeparator' => $baseDir . '/sources/Application/UI/Base/Component/Button/ButtonSeparator.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/Button/ButtonUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonURL' => $baseDir . '/sources/Application/UI/Base/Component/Button/ButtonURL.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\CollapsibleSection\\CollapsibleSection' => $baseDir . '/sources/Application/UI/Base/Component/CollapsibleSection/CollapsibleSection.php',
@@ -269,6 +278,11 @@ return array(
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityEntry\\NotificationEntry' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityEntry/NotificationEntry.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityEntry\\TransitionEntry' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityEntry/TransitionEntry.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanel' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanel.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelAction' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelAction.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelActionFactory' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelActionJS' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionJS.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelActionSeparator' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionSeparator.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelActionURL' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionURL.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelFactory' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelHelper' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelHelper.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelPrint' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelPrint.php',
@@ -295,6 +309,11 @@ return array(
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TabContainer\\Tab\\AjaxTab' => $baseDir . '/sources/Application/UI/Base/Layout/TabContainer/Tab/AjaxTab.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TabContainer\\Tab\\Tab' => $baseDir . '/sources/Application/UI/Base/Layout/TabContainer/Tab/Tab.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBar' => $baseDir . '/sources/Application/UI/Base/Layout/TopBar/TopBar.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickAction' => $baseDir . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickAction.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickActionFactory' => $baseDir . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickActionJS' => $baseDir . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionJS.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickActionSeparator' => $baseDir . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionSeparator.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickActionURL' => $baseDir . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionURL.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarFactory' => $baseDir . '/sources/Application/UI/Base/Layout/TopBar/TopBarFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\UIContentBlock' => $baseDir . '/sources/Application/UI/Base/Layout/UIContentBlock.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\UIContentBlockUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Layout/UIContentBlockUIBlockFactory.php',
@@ -976,8 +995,8 @@ return array(
     'InvalidPasswordAttributeOneWayPassword' => $baseDir . '/application/exceptions/InvalidPasswordAttributeOneWayPassword.php',
     'IssueLog' => $baseDir . '/core/log.class.inc.php',
     'ItopCounter' => $baseDir . '/core/counter.class.inc.php',
-    'JSButtonItem' => $baseDir . '/application/applicationextension/backoffice/JSButtonItem.php',
-    'JSPopupMenuItem' => $baseDir . '/application/applicationextension/backoffice/JSPopupMenuItem.php',
+    'JSButtonItem' => $baseDir . '/application/applicationextension/common/JSButtonItem.php',
+    'JSPopupMenuItem' => $baseDir . '/application/applicationextension/common/JSPopupMenuItem.php',
     'KeyValueStore' => $baseDir . '/core/counter.class.inc.php',
     'League\\OAuth2\\Client\\Exception\\HostedDomainException' => $vendorDir . '/league/oauth2-google/src/Exception/HostedDomainException.php',
     'League\\OAuth2\\Client\\Grant\\AbstractGrant' => $vendorDir . '/league/oauth2-client/src/Grant/AbstractGrant.php',
@@ -1543,7 +1562,7 @@ return array(
     'ScssPhp\\ScssPhp\\Warn' => $vendorDir . '/scssphp/scssphp/src/Warn.php',
     'SearchMenuNode' => $baseDir . '/application/menunode.class.inc.php',
     'SecurityException' => $baseDir . '/application/exceptions/SecurityException.php',
-    'SeparatorPopupMenuItem' => $baseDir . '/application/applicationextension/backoffice/SeparatorPopupMenuItem.php',
+    'SeparatorPopupMenuItem' => $baseDir . '/application/applicationextension/common/SeparatorPopupMenuItem.php',
     'SetupLog' => $baseDir . '/core/log.class.inc.php',
     'Shortcut' => $baseDir . '/application/shortcut.class.inc.php',
     'ShortcutContainerMenuNode' => $baseDir . '/application/menunode.class.inc.php',
@@ -3922,8 +3941,8 @@ return array(
     'UIPasswordWidget' => $baseDir . '/application/ui.passwordwidget.class.inc.php',
     'UISearchFormForeignKeys' => $baseDir . '/application/ui.searchformforeignkeys.class.inc.php',
     'UIWizard' => $baseDir . '/application/uiwizard.class.inc.php',
-    'URLButtonItem' => $baseDir . '/application/applicationextension/backoffice/URLButtonItem.php',
-    'URLPopupMenuItem' => $baseDir . '/application/applicationextension/backoffice/URLPopupMenuItem.php',
+    'URLButtonItem' => $baseDir . '/application/applicationextension/common/URLButtonItem.php',
+    'URLPopupMenuItem' => $baseDir . '/application/applicationextension/common/URLPopupMenuItem.php',
     'UnaryExpression' => $baseDir . '/core/oql/expression.class.inc.php',
     'UnknownClassOqlException' => $baseDir . '/core/oql/oqlinterpreter.class.inc.php',
     'User' => $baseDir . '/core/userrights.class.inc.php',
@@ -3949,6 +3968,7 @@ return array(
     'cmdbAbstractObject' => $baseDir . '/application/cmdbabstract.class.inc.php',
     'cmdbDataGenerator' => $baseDir . '/core/data.generator.class.inc.php',
     'iApplicationUIExtension' => $baseDir . '/application/applicationextension/backoffice/iApplicationUIExtension.php',
+    'iAriaAttributesProvider' => $baseDir . '/application/applicationextension/common/iAriaAttributesProvider.php',
     'iBackgroundProcess' => $baseDir . '/core/backgroundprocess.inc.php',
     'iBackofficeDictEntriesExtension' => $baseDir . '/application/applicationextension/backoffice/iBackofficeDictEntriesExtension.php',
     'iBackofficeDictEntriesPrefixesExtension' => $baseDir . '/application/applicationextension/backoffice/iBackofficeDictEntriesPrefixesExtension.php',
@@ -3964,8 +3984,11 @@ return array(
     'iCMDBChangeOp' => $baseDir . '/core/cmdbchangeop.class.inc.php',
     'iDBObjectSetIterator' => $baseDir . '/core/dbobjectiterator.php',
     'iDBObjectURLMaker' => $baseDir . '/application/applicationcontext.class.inc.php',
+    'iDataAttributesProvider' => $baseDir . '/application/applicationextension/common/iDataAttributesProvider.php',
     'iDisplay' => $baseDir . '/core/dbobject.class.php',
     'iFieldRendererMappingsExtension' => $baseDir . '/application/applicationextension/backoffice/iFieldRendererMappingsExtension.php',
+    'iGroupingProvider' => $baseDir . '/application/applicationextension/common/iGroupingProvider.php',
+    'iHtmlAttributesSource' => $baseDir . '/application/applicationextension/common/iHtmlAttributesSource.php',
     'iKPILoggerExtension' => $baseDir . '/application/applicationextension/iKPILoggerExtension.php',
     'iLogFileNameBuilder' => $baseDir . '/core/log.class.inc.php',
     'iLoginExtension' => $baseDir . '/application/applicationextension/login/iLoginExtension.php',
@@ -3977,7 +4000,7 @@ return array(
     'iNewsroomProvider' => $baseDir . '/application/newsroomprovider.class.inc.php',
     'iOnClassInitialization' => $baseDir . '/core/metamodelmodifier.inc.php',
     'iPageUIBlockExtension' => $baseDir . '/application/applicationextension/backoffice/iPageUIBlockExtension.php',
-    'iPopupMenuExtension' => $baseDir . '/application/applicationextension/backoffice/iPopupMenuExtension.php',
+    'iPopupMenuExtension' => $baseDir . '/application/applicationextension/common/iPopupMenuExtension.php',
     'iPortalUIExtension' => $baseDir . '/application/applicationextension/portal/iPortalUIExtension.php',
     'iPreferencesExtension' => $baseDir . '/application/applicationextension/backoffice/iPreferencesExtension.php',
     'iProcess' => $baseDir . '/core/backgroundprocess.inc.php',
diff --git a/lib/composer/autoload_static.php b/lib/composer/autoload_static.php
index 292ff47043..eb7bd78b88 100644
--- a/lib/composer/autoload_static.php
+++ b/lib/composer/autoload_static.php
@@ -422,7 +422,7 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'ApplicationContext' => __DIR__ . '/../..' . '/application/applicationcontext.class.inc.php',
         'ApplicationException' => __DIR__ . '/../..' . '/application/exceptions/ApplicationException.php',
         'ApplicationMenu' => __DIR__ . '/../..' . '/application/menunode.class.inc.php',
-        'ApplicationPopupMenuItem' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/ApplicationPopupMenuItem.php',
+        'ApplicationPopupMenuItem' => __DIR__ . '/../..' . '/application/applicationextension/common/ApplicationPopupMenuItem.php',
         'Archive_Tar' => __DIR__ . '/..' . '/pear/archive_tar/Archive/Tar.php',
         'ArchivedObjectException' => __DIR__ . '/../..' . '/application/exceptions/ArchivedObjectException.php',
         'AsyncSendEmail' => __DIR__ . '/../..' . '/core/asynctask.class.inc.php',
@@ -558,15 +558,24 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'Combodo\\iTop\\Application\\TwigBase\\UI\\UIBlockNode' => __DIR__ . '/../..' . '/sources/Application/TwigBase/UI/UIBlockNode.php',
         'Combodo\\iTop\\Application\\TwigBase\\UI\\UIBlockParser' => __DIR__ . '/../..' . '/sources/Application/TwigBase/UI/UIBlockParser.php',
         'Combodo\\iTop\\Application\\UI\\Base\\AbstractUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/AbstractUIBlockFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Common\\Action\\tActionCommon' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Common/Action/tActionCommon.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Common\\Action\\tActionJs' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Common/Action/tActionJs.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Common\\Action\\tActionURL' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Common/Action/tActionURL.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Common\\Metadata\\AriaAttributes' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Common/Metadata/AriaAttributes.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Common\\Metadata\\DataAttributes' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Common/Metadata/DataAttributes.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Common\\Metadata\\Grouping' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Common/Metadata/Grouping.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\Alert' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Alert/Alert.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\Badge' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Badge/Badge.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\BadgeUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Badge/BadgeUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonBar\\ButtonBar' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/ButtonBar/ButtonBar.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonBar\\ButtonBarUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/ButtonBar/ButtonBarUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroup' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroup.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroupUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroupUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\Button' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Button/Button.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonJS' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Button/ButtonJS.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonSeparator' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Button/ButtonSeparator.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Button/ButtonUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonURL' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Button/ButtonURL.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\CollapsibleSection\\CollapsibleSection' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/CollapsibleSection/CollapsibleSection.php',
@@ -670,6 +679,11 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityEntry\\NotificationEntry' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityEntry/NotificationEntry.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityEntry\\TransitionEntry' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityEntry/TransitionEntry.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanel' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanel.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelAction' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelAction.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelActionFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelActionJS' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionJS.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelActionSeparator' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionSeparator.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelAction\\ActivityPanelActionURL' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionURL.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelHelper' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelHelper.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\ActivityPanelPrint' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelPrint.php',
@@ -696,6 +710,11 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TabContainer\\Tab\\AjaxTab' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TabContainer/Tab/AjaxTab.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TabContainer\\Tab\\Tab' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TabContainer/Tab/Tab.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBar' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TopBar/TopBar.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickAction' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickAction.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickActionFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickActionJS' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionJS.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickActionSeparator' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionSeparator.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarAction\\TopBarQuickActionURL' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionURL.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\TopBar\\TopBarFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/TopBar/TopBarFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\UIContentBlock' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/UIContentBlock.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\UIContentBlockUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/UIContentBlockUIBlockFactory.php',
@@ -1377,8 +1396,8 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'InvalidPasswordAttributeOneWayPassword' => __DIR__ . '/../..' . '/application/exceptions/InvalidPasswordAttributeOneWayPassword.php',
         'IssueLog' => __DIR__ . '/../..' . '/core/log.class.inc.php',
         'ItopCounter' => __DIR__ . '/../..' . '/core/counter.class.inc.php',
-        'JSButtonItem' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/JSButtonItem.php',
-        'JSPopupMenuItem' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/JSPopupMenuItem.php',
+        'JSButtonItem' => __DIR__ . '/../..' . '/application/applicationextension/common/JSButtonItem.php',
+        'JSPopupMenuItem' => __DIR__ . '/../..' . '/application/applicationextension/common/JSPopupMenuItem.php',
         'KeyValueStore' => __DIR__ . '/../..' . '/core/counter.class.inc.php',
         'League\\OAuth2\\Client\\Exception\\HostedDomainException' => __DIR__ . '/..' . '/league/oauth2-google/src/Exception/HostedDomainException.php',
         'League\\OAuth2\\Client\\Grant\\AbstractGrant' => __DIR__ . '/..' . '/league/oauth2-client/src/Grant/AbstractGrant.php',
@@ -1944,7 +1963,7 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'ScssPhp\\ScssPhp\\Warn' => __DIR__ . '/..' . '/scssphp/scssphp/src/Warn.php',
         'SearchMenuNode' => __DIR__ . '/../..' . '/application/menunode.class.inc.php',
         'SecurityException' => __DIR__ . '/../..' . '/application/exceptions/SecurityException.php',
-        'SeparatorPopupMenuItem' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/SeparatorPopupMenuItem.php',
+        'SeparatorPopupMenuItem' => __DIR__ . '/../..' . '/application/applicationextension/common/SeparatorPopupMenuItem.php',
         'SetupLog' => __DIR__ . '/../..' . '/core/log.class.inc.php',
         'Shortcut' => __DIR__ . '/../..' . '/application/shortcut.class.inc.php',
         'ShortcutContainerMenuNode' => __DIR__ . '/../..' . '/application/menunode.class.inc.php',
@@ -4323,8 +4342,8 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'UIPasswordWidget' => __DIR__ . '/../..' . '/application/ui.passwordwidget.class.inc.php',
         'UISearchFormForeignKeys' => __DIR__ . '/../..' . '/application/ui.searchformforeignkeys.class.inc.php',
         'UIWizard' => __DIR__ . '/../..' . '/application/uiwizard.class.inc.php',
-        'URLButtonItem' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/URLButtonItem.php',
-        'URLPopupMenuItem' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/URLPopupMenuItem.php',
+        'URLButtonItem' => __DIR__ . '/../..' . '/application/applicationextension/common/URLButtonItem.php',
+        'URLPopupMenuItem' => __DIR__ . '/../..' . '/application/applicationextension/common/URLPopupMenuItem.php',
         'UnaryExpression' => __DIR__ . '/../..' . '/core/oql/expression.class.inc.php',
         'UnknownClassOqlException' => __DIR__ . '/../..' . '/core/oql/oqlinterpreter.class.inc.php',
         'User' => __DIR__ . '/../..' . '/core/userrights.class.inc.php',
@@ -4350,6 +4369,7 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'cmdbAbstractObject' => __DIR__ . '/../..' . '/application/cmdbabstract.class.inc.php',
         'cmdbDataGenerator' => __DIR__ . '/../..' . '/core/data.generator.class.inc.php',
         'iApplicationUIExtension' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/iApplicationUIExtension.php',
+        'iAriaAttributesProvider' => __DIR__ . '/../..' . '/application/applicationextension/common/iAriaAttributesProvider.php',
         'iBackgroundProcess' => __DIR__ . '/../..' . '/core/backgroundprocess.inc.php',
         'iBackofficeDictEntriesExtension' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/iBackofficeDictEntriesExtension.php',
         'iBackofficeDictEntriesPrefixesExtension' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/iBackofficeDictEntriesPrefixesExtension.php',
@@ -4365,8 +4385,11 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'iCMDBChangeOp' => __DIR__ . '/../..' . '/core/cmdbchangeop.class.inc.php',
         'iDBObjectSetIterator' => __DIR__ . '/../..' . '/core/dbobjectiterator.php',
         'iDBObjectURLMaker' => __DIR__ . '/../..' . '/application/applicationcontext.class.inc.php',
+        'iDataAttributesProvider' => __DIR__ . '/../..' . '/application/applicationextension/common/iDataAttributesProvider.php',
         'iDisplay' => __DIR__ . '/../..' . '/core/dbobject.class.php',
         'iFieldRendererMappingsExtension' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/iFieldRendererMappingsExtension.php',
+        'iGroupingProvider' => __DIR__ . '/../..' . '/application/applicationextension/common/iGroupingProvider.php',
+        'iHtmlAttributesSource' => __DIR__ . '/../..' . '/application/applicationextension/common/iHtmlAttributesSource.php',
         'iKPILoggerExtension' => __DIR__ . '/../..' . '/application/applicationextension/iKPILoggerExtension.php',
         'iLogFileNameBuilder' => __DIR__ . '/../..' . '/core/log.class.inc.php',
         'iLoginExtension' => __DIR__ . '/../..' . '/application/applicationextension/login/iLoginExtension.php',
@@ -4378,7 +4401,7 @@ class ComposerStaticInitfc0e9e9dea11dcbb6272414776c30685
         'iNewsroomProvider' => __DIR__ . '/../..' . '/application/newsroomprovider.class.inc.php',
         'iOnClassInitialization' => __DIR__ . '/../..' . '/core/metamodelmodifier.inc.php',
         'iPageUIBlockExtension' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/iPageUIBlockExtension.php',
-        'iPopupMenuExtension' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/iPopupMenuExtension.php',
+        'iPopupMenuExtension' => __DIR__ . '/../..' . '/application/applicationextension/common/iPopupMenuExtension.php',
         'iPortalUIExtension' => __DIR__ . '/../..' . '/application/applicationextension/portal/iPortalUIExtension.php',
         'iPreferencesExtension' => __DIR__ . '/../..' . '/application/applicationextension/backoffice/iPreferencesExtension.php',
         'iProcess' => __DIR__ . '/../..' . '/core/backgroundprocess.inc.php',
diff --git a/sources/Application/UI/Base/Common/Action/tActionCommon.php b/sources/Application/UI/Base/Common/Action/tActionCommon.php
new file mode 100644
index 0000000000..990b67b37b
--- /dev/null
+++ b/sources/Application/UI/Base/Common/Action/tActionCommon.php
@@ -0,0 +1,82 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Common\Action;
+
+/**
+ * Trait tActionCommon
+ *
+ * Shared properties and accessors for UI actions.
+ *
+ * @package Combodo\iTop\Application\UI\Base\Common\Action
+ * @internal
+ * @since 3.3.0
+ */
+trait tActionCommon
+{
+	protected string $sUid;
+	protected string $sLabel;
+	protected string $sIconClass = '';
+	protected ?string $sTooltip = null;
+
+	public function GetUID(): string
+	{
+		return $this->sUid;
+	}
+
+	public function SetUID(string $sUid): static
+	{
+		$this->sUid = $sUid;
+		return $this;
+	}
+
+	public function GetLabel(): string
+	{
+		return $this->sLabel;
+	}
+
+	public function SetLabel(string $sLabel): static
+	{
+		$this->sLabel = $sLabel;
+		return $this;
+	}
+
+	public function GetIconClass(): string
+	{
+		return $this->sIconClass;
+	}
+
+	public function SetIconClass(string $sIconClass): static
+	{
+		$this->sIconClass = $sIconClass;
+		return $this;
+	}
+
+	public function GetTooltip(): ?string
+	{
+		return $this->sTooltip;
+	}
+
+	public function SetTooltip(?string $sTooltip): static
+	{
+		$this->sTooltip = $sTooltip;
+		return $this;
+	}
+}
diff --git a/sources/Application/UI/Base/Common/Action/tActionJs.php b/sources/Application/UI/Base/Common/Action/tActionJs.php
new file mode 100644
index 0000000000..802f583c78
--- /dev/null
+++ b/sources/Application/UI/Base/Common/Action/tActionJs.php
@@ -0,0 +1,58 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Common\Action;
+
+/**
+ * Trait tActionJs
+ *
+ * Shared properties and accessors for JS-based actions.
+ *
+ * @package Combodo\iTop\Application\UI\Base\Common\Action
+ * @internal
+ * @since 3.3.0
+ */
+trait tActionJs
+{
+	protected string $sJsCode;
+	protected string $sUrl = '#';
+
+	public function GetJsCode(): string
+	{
+		return $this->sJsCode;
+	}
+
+	public function SetJsCode(string $sJsCode): static
+	{
+		$this->sJsCode = $sJsCode;
+		return $this;
+	}
+
+	public function GetUrl(): string
+	{
+		return $this->sUrl;
+	}
+
+	public function SetUrl(string $sUrl): static
+	{
+		$this->sUrl = $sUrl;
+		return $this;
+	}
+}
diff --git a/sources/Application/UI/Base/Common/Action/tActionURL.php b/sources/Application/UI/Base/Common/Action/tActionURL.php
new file mode 100644
index 0000000000..008f9d1621
--- /dev/null
+++ b/sources/Application/UI/Base/Common/Action/tActionURL.php
@@ -0,0 +1,58 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Common\Action;
+
+/**
+ * Trait tActionURL
+ *
+ * Shared properties and accessors for URL-based actions.
+ *
+ * @package Combodo\iTop\Application\UI\Base\Common\Action
+ * @internal
+ * @since 3.3.0
+ */
+trait tActionURL
+{
+	protected string $sUrl;
+	protected ?string $sTarget = null;
+
+	public function GetUrl(): string
+	{
+		return $this->sUrl;
+	}
+
+	public function SetUrl(string $sUrl): static
+	{
+		$this->sUrl = $sUrl;
+		return $this;
+	}
+
+	public function GetTarget(): ?string
+	{
+		return $this->sTarget;
+	}
+
+	public function SetTarget(?string $sTarget): static
+	{
+		$this->sTarget = $sTarget;
+		return $this;
+	}
+}
diff --git a/sources/Application/UI/Base/Common/Metadata/AriaAttributes.php b/sources/Application/UI/Base/Common/Metadata/AriaAttributes.php
new file mode 100644
index 0000000000..6c7e31c641
--- /dev/null
+++ b/sources/Application/UI/Base/Common/Metadata/AriaAttributes.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Common\Metadata;
+
+use iHtmlAttributesSource;
+
+/**
+ * WAI-ARIA attributes class holding, allows to be enriched with more attributes
+ *
+ * @api @since 3.3.0
+ */
+final class AriaAttributes implements iHtmlAttributesSource
+{
+	private ?string $sLabel = null;
+
+	public function SetLabel(?string $sLabel): self
+	{
+		$this->sLabel = $sLabel;
+
+		return $this;
+	}
+
+	public function GetLabel(): ?string
+	{
+		return $this->sLabel;
+	}
+
+	/**
+	 * Set several attributes at once, by ARIA attribute name ("label", "description", ...)
+	 *
+	 * @param array<string, mixed> $aAttributes
+	 * @since 3.3.0
+	 */
+	public function SetMultiple(array $aAttributes): self
+	{
+		foreach ($aAttributes as $sName => $sValue) {
+			$sMethod = 'Set'.$sName;
+			if ($sMethod !== 'SetMultiple' && method_exists($this, $sMethod)) {
+				$this->$sMethod($sValue);
+			}
+		}
+
+		return $this;
+	}
+
+	public function GetAttributes(): array
+	{
+		$aAttributes = [];
+		if ($this->sLabel !== null) {
+			$aAttributes['label'] = $this->sLabel;
+		}
+
+		return $aAttributes;
+	}
+
+	public function GetHtmlAttributes(): array
+	{
+		$aAttributes = [];
+		if ($this->sLabel !== null) {
+			$aAttributes['aria-label'] = $this->sLabel;
+		}
+
+		return $aAttributes;
+	}
+}
diff --git a/sources/Application/UI/Base/Common/Metadata/DataAttributes.php b/sources/Application/UI/Base/Common/Metadata/DataAttributes.php
new file mode 100644
index 0000000000..095b8d44b3
--- /dev/null
+++ b/sources/Application/UI/Base/Common/Metadata/DataAttributes.php
@@ -0,0 +1,82 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Common\Metadata;
+
+use iHtmlAttributesSource;
+
+/**
+ * data-xxx attributes class holding, allows to be enriched with more attributes
+ *
+ * @api @since 3.3.0
+ */
+final class DataAttributes implements iHtmlAttributesSource
+{
+	private const NAME_PATTERN = '/^[a-z][a-z0-9\-_.]*$/';
+
+	/** @var array<string, string> */
+	private array $aValues = [];
+
+	public function Set(string $sName, string $sValue): self
+	{
+		$this->aValues[static::NormalizeName($sName)] = $sValue;
+
+		return $this;
+	}
+
+	/** @param array<string, string> $aValues */
+	public function SetMultiple(array $aValues): self
+	{
+		foreach ($aValues as $sName => $sValue) {
+			$this->Set($sName, $sValue);
+		}
+
+		return $this;
+	}
+
+	public function Get(string $sName): ?string
+	{
+		return $this->aValues[static::NormalizeName($sName)] ?? null;
+	}
+
+	public function Has(string $sName): bool
+	{
+		return array_key_exists(static::NormalizeName($sName), $this->aValues);
+	}
+
+	public function Remove(string $sName): self
+	{
+		unset($this->aValues[static::NormalizeName($sName)]);
+
+		return $this;
+	}
+
+	/** @return array<string, string> Names without the "data-" prefix */
+	public function GetAttributes(): array
+	{
+		return $this->aValues;
+	}
+
+	public function GetHtmlAttributes(): array
+	{
+		$aAttributes = [];
+		foreach ($this->aValues as $sName => $sValue) {
+			$aAttributes['data-'.$sName] = $sValue;
+		}
+
+		return $aAttributes;
+	}
+
+	/** @throws \InvalidArgumentException */
+	private static function NormalizeName(string $sName): string
+	{
+		$sNormalized = strtolower(trim($sName));
+		if (str_starts_with($sNormalized, 'data-')) {
+			$sNormalized = substr($sNormalized, 5);
+		}
+		if (preg_match(static::NAME_PATTERN, $sNormalized) !== 1) {
+			throw new \InvalidArgumentException(sprintf('Invalid data attribute name "%s"', $sName));
+		}
+
+		return $sNormalized;
+	}
+}
diff --git a/sources/Application/UI/Base/Common/Metadata/Grouping.php b/sources/Application/UI/Base/Common/Metadata/Grouping.php
new file mode 100644
index 0000000000..ad6ff28e72
--- /dev/null
+++ b/sources/Application/UI/Base/Common/Metadata/Grouping.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Common\Metadata;
+
+/**
+ * Describes the group an item belongs to.
+ * May later carry a label, a rank, an icon...
+ *
+ * @api @since 3.3.0
+ */
+final class Grouping
+{
+	private string $sUID;
+
+	public function __construct(string $sUID)
+	{
+		$this->sUID = $sUID;
+	}
+
+	public function GetUID(): string
+	{
+		return $this->sUID;
+	}
+}
diff --git a/sources/Application/UI/Base/Component/Button/Button.php b/sources/Application/UI/Base/Component/Button/Button.php
index 7921aa5664..22369dc194 100644
--- a/sources/Application/UI/Base/Component/Button/Button.php
+++ b/sources/Application/UI/Base/Component/Button/Button.php
@@ -21,6 +21,7 @@
 namespace Combodo\iTop\Application\UI\Base\Component\Button;
 
 use Combodo\iTop\Application\UI\Base\UIBlock;
+use utils;
 
 /**
  * Class Button
@@ -271,4 +272,22 @@ class Button extends UIBlock
 
 		return $this;
 	}
+
+	public function GetAriaAttributes(): array
+	{
+		$aDefaultValues = [];
+
+		// Keep the visible label as the accessible name, falling back to the tooltip for icon-only buttons.
+		if (utils::IsNotNullOrEmptyString($this->sLabel)) {
+			$aDefaultValues['label'] = $this->sLabel;
+		} elseif (utils::IsNotNullOrEmptyString($this->sTooltip)) {
+			$aDefaultValues['label'] = $this->sTooltip;
+		}
+		return array_merge($aDefaultValues, parent::GetAriaAttributes());
+	}
+
+	public function HasAriaAttributes(): bool
+	{
+		return  !empty($this->GetAriaAttributes());
+	}
 }
diff --git a/sources/Application/UI/Base/Component/Button/ButtonSeparator.php b/sources/Application/UI/Base/Component/Button/ButtonSeparator.php
new file mode 100644
index 0000000000..721a66f197
--- /dev/null
+++ b/sources/Application/UI/Base/Component/Button/ButtonSeparator.php
@@ -0,0 +1,37 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Component\Button;
+
+use Combodo\iTop\Application\UI\Base\UIBlock;
+
+/**
+ * Class ButtonSeparator
+ *
+ * @internal
+ * @since 3.3.0
+ */
+class ButtonSeparator extends UIBlock
+{
+	public const BLOCK_CODE = 'ibo-button-separator';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/button/separator/layout';
+	public const DEFAULT_JS_TEMPLATE_REL_PATH = null;
+}
+
diff --git a/sources/Application/UI/Base/Component/Button/ButtonUIBlockFactory.php b/sources/Application/UI/Base/Component/Button/ButtonUIBlockFactory.php
index 35dcc0067f..0b037a1dd0 100644
--- a/sources/Application/UI/Base/Component/Button/ButtonUIBlockFactory.php
+++ b/sources/Application/UI/Base/Component/Button/ButtonUIBlockFactory.php
@@ -20,8 +20,12 @@
 
 namespace Combodo\iTop\Application\UI\Base\Component\Button;
 
+use ApplicationPopupMenuItem;
 use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
 use Dict;
+use JSPopupMenuItem;
+use SeparatorPopupMenuItem;
+use URLPopupMenuItem;
 use utils;
 
 /**
@@ -376,6 +380,132 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory
 		return $oButton;
 	}
 
+	/**
+	 * @param ApplicationPopupMenuItem $oPopupItem
+	 * @param string $sColor
+	 * @param string $sActionType
+	 *
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\Button|\Combodo\iTop\Application\UI\Base\Component\Button\ButtonSeparator|null
+	 * @since 3.3.0
+	 */
+	public static function MakeIconButtonFromApplicationPopupMenuItem(ApplicationPopupMenuItem $oPopupItem, string $sColor = Button::ENUM_COLOR_SCHEME_NEUTRAL, string $sActionType = Button::ENUM_ACTION_TYPE_ALTERNATIVE): Button|ButtonSeparator|null
+	{
+		if ($oPopupItem instanceof JSPopupMenuItem) {
+			$sTooltip = $oPopupItem->GetTooltip();
+			if (utils::IsNullOrEmptyString($sTooltip)) {
+				$sTooltip = $oPopupItem->GetLabel();
+			}
+
+			$oButton = self::MakeIconAction(
+				$oPopupItem->GetIconClass(),
+				$sTooltip
+			);
+
+			$oButton->SetOnClickJsCode($oPopupItem->GetJsCode());
+			$oButton->AddMultipleJsFilesRelPaths($oPopupItem->GetLinkedScripts());
+			$oButton->SetActionType($sActionType);
+			$oButton->SetColor($sColor);
+			$oButton->SetAriaAttributes($oPopupItem->GetAriaAttributes()->GetAttributes());
+			$oButton->SetDataAttributes($oPopupItem->GetDataAttributes()->GetAttributes());
+			$oButton->AddDataAttribute('uid', $oPopupItem->GetUID());
+
+			return $oButton;
+		} elseif ($oPopupItem instanceof URLPopupMenuItem) {
+			$sTooltip = $oPopupItem->GetTooltip();
+			if (!utils::IsNotNullOrEmptyString($sTooltip)) {
+				$sTooltip = $oPopupItem->GetLabel();
+			}
+
+			$oButton = self::MakeIconLink(
+				$oPopupItem->GetIconClass(),
+				$sTooltip,
+				$oPopupItem->GetURL(),
+				$oPopupItem->GetTarget(),
+			);
+
+			$oButton->SetActionType($sActionType);
+			$oButton->SetColor($sColor);
+			$oButton->SetAriaAttributes($oPopupItem->GetAriaAttributes()->GetAttributes());
+			$oButton->SetDataAttributes($oPopupItem->GetDataAttributes()->GetAttributes());
+			$oButton->AddDataAttribute('uid', $oPopupItem->GetUID());
+
+			return $oButton;
+		} elseif ($oPopupItem instanceof SeparatorPopupMenuItem) {
+			$oSeparator = new ButtonSeparator();
+			$oSeparator->SetCSSClasses($oPopupItem->GetCssClasses());
+			$oSeparator->AddDataAttribute('uid', $oPopupItem->GetUID());
+			return $oSeparator;
+		}
+
+		// Should never happen, but just in case a new type is added, return null
+
+		return null;
+	}
+
+	/**
+	 * @param ApplicationPopupMenuItem $oPopupItem
+	 * @param string $sColor
+	 * @param string $sActionType
+	 *
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\Button|\Combodo\iTop\Application\UI\Base\Component\Button\ButtonSeparator|null
+	 * @since 3.3.0
+	 */
+	public static function MakeButtonFromApplicationPopupMenuItem(ApplicationPopupMenuItem $oPopupItem, string $sColor = Button::ENUM_COLOR_SCHEME_NEUTRAL, string $sActionType = Button::ENUM_ACTION_TYPE_ALTERNATIVE): Button|ButtonSeparator|null
+	{
+		if ($oPopupItem instanceof JSPopupMenuItem) {
+			$oButton = self::MakeForAction(
+				$oPopupItem->GetLabel(),
+				$sColor,
+				$sActionType,
+			);
+
+			if (utils::IsNotNullOrEmptyString($oPopupItem->GetIconClass())) {
+				$oButton->SetIconClass($oPopupItem->GetIconClass());
+			}
+			if (utils::IsNotNullOrEmptyString($oPopupItem->GetTooltip())) {
+				$oButton->SetTooltip($oPopupItem->GetTooltip());
+			}
+			$oButton->SetOnClickJsCode($oPopupItem->GetJsCode());
+			$oButton->AddMultipleJsFilesRelPaths($oPopupItem->GetLinkedScripts());
+			$oButton->SetAriaAttributes($oPopupItem->GetAriaAttributes()->GetAttributes());
+			$oButton->SetDataAttributes($oPopupItem->GetDataAttributes()->GetAttributes());
+			$oButton->AddDataAttribute('uid', $oPopupItem->GetUID());
+
+			return $oButton;
+		} elseif ($oPopupItem instanceof URLPopupMenuItem) {
+			$oButton = self::MakeForLink(
+				$oPopupItem->GetLabel(),
+				$oPopupItem->GetURL(),
+				$sColor,
+				$sActionType,
+				$oPopupItem->GetTarget()
+			);
+
+			if (utils::IsNotNullOrEmptyString($oPopupItem->GetIconClass())) {
+				$oButton->SetIconClass($oPopupItem->GetIconClass());
+			}
+			if (utils::IsNotNullOrEmptyString($oPopupItem->GetTooltip())) {
+				$oButton->SetTooltip($oPopupItem->GetTooltip());
+			}
+			if (utils::IsNotNullOrEmptyString($oPopupItem->GetTarget())) {
+				$oButton->SetTarget($oPopupItem->GetTarget());
+			}
+			$oButton->SetAriaAttributes($oPopupItem->GetAriaAttributes()->GetAttributes());
+			$oButton->SetDataAttributes($oPopupItem->GetDataAttributes()->GetAttributes());
+			$oButton->AddDataAttribute('uid', $oPopupItem->GetUID());
+
+			return $oButton;
+		} elseif ($oPopupItem instanceof SeparatorPopupMenuItem) {
+			$oSeparator = new ButtonSeparator();
+			$oSeparator->SetCSSClasses($oPopupItem->GetCssClasses());
+			$oSeparator->AddDataAttribute('uid', $oPopupItem->GetUID());
+			return $oSeparator;
+		}
+
+		// Should never happen, but just in case a new type is added, return null
+
+		return null;
+	}
 	//----------------------------------------------------------------------------------------------
 	// Link buttons, mostly used outside forms, to redirect somewhere whilst keeping a button aspect
 	//----------------------------------------------------------------------------------------------
diff --git a/sources/Application/UI/Base/Component/ButtonBar/ButtonBar.php b/sources/Application/UI/Base/Component/ButtonBar/ButtonBar.php
new file mode 100644
index 0000000000..21019f9f09
--- /dev/null
+++ b/sources/Application/UI/Base/Component/ButtonBar/ButtonBar.php
@@ -0,0 +1,292 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2024 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Component\ButtonBar;
+
+use Combodo\iTop\Application\UI\Base\Component\Button\Button;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonJS;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonSeparator;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
+use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
+use InvalidArgumentException;
+use utils;
+
+/**
+ * A button bar that moves overflowing entries into a popover menu.
+ *
+ * @api
+ * @since 3.3.0
+ */
+class ButtonBar extends UIContentBlock
+{
+	public const BLOCK_CODE = 'ibo-button-bar';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/button-bar/layout';
+	public const DEFAULT_JS_FILES_REL_PATH = [
+		'js/components/button-bar.js',
+	];
+
+	private const OVERFLOW_SECTION_ID = 'overflow';
+	public const OVERFLOW_MODE_FIT = 'fit';
+	public const OVERFLOW_MODE_COUNT = 'count';
+	public const OVERFLOW_MODE_AFTER_MARKER = 'after-marker';
+
+	/** @var string|null More button tooltip text */
+	protected ?string $sMoreTooltipText;
+
+	/** @var PopoverMenu Popover menu for overflow */
+	protected PopoverMenu $oPopoverMenu;
+
+	/** @var ButtonJS Button for overflow */
+	protected ButtonJS $oOverflowTogglerButton;
+
+	/** @var array Button bar buttons */
+	private array $aButtons = [];
+
+	/** @var string Overflow mode used by the custom element */
+	private string $sOverflowMode = self::OVERFLOW_MODE_FIT;
+
+	/** @var int Number of visible items before overflow in count mode */
+	private int $iOverflowCount = 3;
+
+	/** @var string|null Button id used as overflow marker in after-marker mode */
+	private ?string $sOverflowStartAfterButtonId = null;
+
+	public function __construct(array $aSubBlocks = [], ?string $sMoreButtonTooltipText = null, ?string $sId = null)
+	{
+		parent::__construct($sId);
+
+		$this->sMoreTooltipText = $sMoreButtonTooltipText;
+		$this->oOverflowTogglerButton = ButtonUIBlockFactory::MakeIconAction(
+			'fas fa-ellipsis-v',
+			$this->sMoreTooltipText ?: '',
+			null,
+			null,
+			false,
+			$this->GetOverflowTogglerId()
+		)
+			->SetActionType(Button::ENUM_ACTION_TYPE_ALTERNATIVE)
+			->SetColor(Button::ENUM_COLOR_SCHEME_NEUTRAL);
+
+		$this->oPopoverMenu = (new PopoverMenu($this->GetId().'--menu'))
+			->SetTogglerFromId($this->GetOverflowTogglerId())
+			->SetContainer(PopoverMenu::ENUM_CONTAINER_BODY)
+			->SetHorizontalPosition(PopoverMenu::ENUM_HORIZONTAL_POSITION_ALIGN_INNER_RIGHT)
+			->SetVerticalPosition(PopoverMenu::ENUM_VERTICAL_POSITION_BELOW)
+			->AddCSSClass('ibo-button-bar--popover')
+			->AddSection(static::OVERFLOW_SECTION_ID);
+
+		$this->RefreshOverflowDataAttributes();
+
+		$this->SetButtons($aSubBlocks);
+	}
+
+	public function SetMoreButtonTooltipText(string $sMoreButtonTooltipText): self
+	{
+		$this->sMoreTooltipText = $sMoreButtonTooltipText;
+		$this->oOverflowTogglerButton->SetTooltip($sMoreButtonTooltipText);
+
+		return $this;
+	}
+
+	public function GetMoreButtonTooltipText(): ?string
+	{
+		return $this->sMoreTooltipText;
+	}
+
+	public function GetOverflowTogglerId(): string
+	{
+		return $this->GetId().'--toggler';
+	}
+
+	public function GetOverflowTogglerButton(): Button
+	{
+		return $this->oOverflowTogglerButton;
+	}
+
+	public function GetPopoverMenu(): PopoverMenu
+	{
+		return $this->oPopoverMenu;
+	}
+
+	/**
+	 * @return string One of self::OVERFLOW_MODE_*
+	 */
+	public function GetOverflowMode(): string
+	{
+		return $this->sOverflowMode;
+	}
+
+	/**
+	 * @param string $sOverflowMode One of self::OVERFLOW_MODE_*
+	 *
+	 * @return $this
+	 */
+	public function SetOverflowMode(string $sOverflowMode): self
+	{
+		$aAllowedModes = [
+			self::OVERFLOW_MODE_FIT,
+			self::OVERFLOW_MODE_COUNT,
+			self::OVERFLOW_MODE_AFTER_MARKER,
+		];
+
+		if (!in_array($sOverflowMode, $aAllowedModes, true)) {
+			throw new InvalidArgumentException(sprintf('Unsupported overflow mode "%s" for %s', $sOverflowMode, static::class));
+		}
+
+		$this->sOverflowMode = $sOverflowMode;
+		$this->RefreshOverflowDataAttributes();
+
+		return $this;
+	}
+
+	public function GetOverflowCount(): int
+	{
+		return $this->iOverflowCount;
+	}
+
+	public function SetOverflowCount(int $iOverflowCount): self
+	{
+		if ($iOverflowCount < 0) {
+			throw new InvalidArgumentException(sprintf('Overflow count must be >= 0, got "%d"', $iOverflowCount));
+		}
+
+		$this->iOverflowCount = $iOverflowCount;
+		$this->RefreshOverflowDataAttributes();
+
+		return $this;
+	}
+
+	public function GetOverflowStartAfterButtonId(): ?string
+	{
+		return $this->sOverflowStartAfterButtonId;
+	}
+
+	public function SetOverflowStartAfterButtonId(?string $sButtonId): self
+	{
+		$this->sOverflowStartAfterButtonId = $sButtonId;
+		$this->RefreshOverflowDataAttributes();
+
+		return $this;
+	}
+
+	public function IsOverflowStartAfterButton(string $sButtonId): bool
+	{
+		return $this->sOverflowStartAfterButtonId !== null && $this->sOverflowStartAfterButtonId === $sButtonId;
+	}
+
+	public function AddButton(Button|ButtonSeparator $oButton): self
+	{
+		$this->aButtons[$oButton->GetId()] = $oButton;
+
+		$this->RebuildPopoverItems();
+
+		return $this;
+	}
+
+	public function RemoveButton(string $sId): self
+	{
+		if ($this->HasButton($sId)) {
+			unset($this->aButtons[$sId]);
+		}
+
+		$this->RebuildPopoverItems();
+
+		return $this;
+	}
+
+	public function GetButtons(): array
+	{
+		return $this->aButtons;
+	}
+
+	public function SetButtons(array $aButtons): self
+	{
+		$this->aButtons = [];
+		foreach ($aButtons as $oButton) {
+			if (!($oButton instanceof Button) && !($oButton instanceof ButtonSeparator)) {
+				throw new InvalidArgumentException('Button bar items must be a Button or ButtonSeparator');
+			}
+			$this->aButtons[$oButton->GetId()] = $oButton;
+		}
+
+		$this->RebuildPopoverItems();
+
+		return $this;
+	}
+
+	public function HasButton(string $sId): bool
+	{
+		return array_key_exists($sId, $this->aButtons);
+	}
+
+	public function GetOverflowItemIdFromBlockId(string $sBlockId): string
+	{
+		return $this->GetId().'--item--'.utils::GetSafeId($sBlockId);
+	}
+
+	protected function RebuildPopoverItems(): void
+	{
+		$this->oPopoverMenu->ClearSection(static::OVERFLOW_SECTION_ID);
+
+		foreach ($this->GetButtons() as $oBlock) {
+			if (!($oBlock instanceof Button) && !($oBlock instanceof ButtonSeparator)) {
+				continue;
+			}
+
+			$sBlockId = $oBlock->GetId();
+			$sUid = $this->GetId().'--menu-item--'.utils::GetSafeId($sBlockId);
+
+			$oPopoverMenuItem = PopoverMenuItemFactory::MakeApplicationPopupMenuItemFromButton($oBlock, $sUid);
+			$oPopoverMenuItem->AddDataAttribute('overflow-item-id', $this->GetOverflowItemIdFromBlockId($sBlockId));
+			$this->oPopoverMenu->AddItem(static::OVERFLOW_SECTION_ID, $oPopoverMenuItem);
+		}
+	}
+
+	protected function RefreshOverflowDataAttributes(): void
+	{
+		$aDataAttributes = $this->GetDataAttributes();
+		$aDataAttributes['overflow-mode'] = $this->GetOverflowMode();
+		$aDataAttributes['overflow-count'] = (string) $this->GetOverflowCount();
+
+		if ($this->GetOverflowStartAfterButtonId() !== null && $this->GetOverflowStartAfterButtonId() !== '') {
+			$aDataAttributes['overflow-start-after-button-id'] = $this->GetOverflowStartAfterButtonId();
+		} else {
+			unset($aDataAttributes['overflow-start-after-button-id']);
+		}
+
+		$this->SetDataAttributes($aDataAttributes);
+	}
+
+	public function GetSubBlocks(): array
+	{
+		$aSubBlocks = [];
+		$aSubBlocks[$this->GetOverflowTogglerButton()->GetId()] = $this->GetOverflowTogglerButton();
+		$aSubBlocks[$this->GetPopoverMenu()->GetId()] = $this->GetPopoverMenu();
+
+		foreach ($this->GetButtons() as $oButton) {
+			$aSubBlocks[$oButton->GetId()] = $oButton;
+		}
+
+		return $aSubBlocks;
+	}
+
+}
diff --git a/sources/Application/UI/Base/Component/ButtonBar/ButtonBarUIBlockFactory.php b/sources/Application/UI/Base/Component/ButtonBar/ButtonBarUIBlockFactory.php
new file mode 100644
index 0000000000..3b1fa80d7f
--- /dev/null
+++ b/sources/Application/UI/Base/Component/ButtonBar/ButtonBarUIBlockFactory.php
@@ -0,0 +1,135 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2024 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Component\ButtonBar;
+
+use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Button\Button;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonSeparator;
+
+/**
+ * Class ButtonBarUIBlockFactory
+ *
+ * @api
+ * @since 3.3.0
+ */
+class ButtonBarUIBlockFactory extends AbstractUIBlockFactory
+{
+	/** @inheritDoc */
+	public const TWIG_TAG_NAME = 'UIButtonBar';
+
+	/** @inheritDoc */
+	public const UI_BLOCK_CLASS_NAME = ButtonBar::class;
+
+	/**
+	 * Build a button bar from a list of items.
+	 *
+	 * Each item can be:
+	 * - Button
+	 * - ButtonSeparator
+	 * (ButtonGroup are not supported in this factory)
+	 *
+	 * @param array $aItems
+	 * @param string|null $sMoreButtonTooltipText
+	 * @param string|null $sId
+	 *
+	 * @return ButtonBar
+	 */
+	public static function MakeStandard(
+		array $aItems = [],
+		?string $sMoreButtonTooltipText = null,
+		?string $sId = null
+	): ButtonBar {
+		return static::BuildButtonBar($aItems, $sMoreButtonTooltipText, $sId, ButtonBar::OVERFLOW_MODE_FIT);
+	}
+
+	/**
+	 * Build a button bar using a fixed visible item count before overflow.
+	 *
+	 * @param array $aItems
+	 * @param int $iOverflowCount Number of items to keep visible in the bar
+	 * @param string|null $sMoreButtonTooltipText
+	 * @param string|null $sId
+	 *
+	 * @return ButtonBar
+	 */
+	public static function MakeWithCountOverflow(
+		array $aItems = [],
+		int $iOverflowCount = 3,
+		?string $sMoreButtonTooltipText = null,
+		?string $sId = null
+	): ButtonBar {
+		return static::BuildButtonBar($aItems, $sMoreButtonTooltipText, $sId, ButtonBar::OVERFLOW_MODE_COUNT, $iOverflowCount);
+	}
+
+	/**
+	 * Build a button bar overflowing everything after a marker button.
+	 *
+	 * @param array $aItems
+	 * @param string $sOverflowStartAfterButtonId Button id used as marker
+	 * @param string|null $sMoreButtonTooltipText
+	 * @param string|null $sId
+	 *
+	 * @return ButtonBar
+	 */
+	public static function MakeWithAfterMarkerOverflow(
+		string $sOverflowStartAfterButtonId,
+		array $aItems = [],
+		?string $sMoreButtonTooltipText = null,
+		?string $sId = null
+	): ButtonBar {
+		return static::BuildButtonBar(
+			$aItems,
+			$sMoreButtonTooltipText,
+			$sId,
+			ButtonBar::OVERFLOW_MODE_AFTER_MARKER,
+			3,
+			$sOverflowStartAfterButtonId
+		);
+	}
+
+	/**
+	 * Internal builder shared by the public named constructors.
+	 */
+	protected static function BuildButtonBar(
+		array $aItems,
+		?string $sMoreButtonTooltipText,
+		?string $sId,
+		string $sOverflowMode,
+		int $iOverflowCount = 3,
+		?string $sOverflowStartAfterButtonId = null
+	): ButtonBar {
+		$oButtonBar = new ButtonBar([], $sMoreButtonTooltipText, $sId);
+		$oButtonBar
+			->SetOverflowMode($sOverflowMode)
+			->SetOverflowCount($iOverflowCount)
+			->SetOverflowStartAfterButtonId($sOverflowStartAfterButtonId);
+
+		foreach ($aItems as $iIndex => $oItem) {
+			if (!($oItem instanceof Button) && !($oItem instanceof ButtonSeparator)) {
+				throw new \InvalidArgumentException(sprintf('Button bar items must be a Button or ButtonSeparator, "%s" given at index %d', is_object($oItem) ? get_class($oItem) : gettype($oItem), $iIndex));
+			}
+
+			$oButtonBar->AddButton($oItem);
+		}
+
+		return $oButtonBar;
+	}
+}
diff --git a/sources/Application/UI/Base/Component/Field/Field.php b/sources/Application/UI/Base/Component/Field/Field.php
index ce21f5e610..f166e24015 100644
--- a/sources/Application/UI/Base/Component/Field/Field.php
+++ b/sources/Application/UI/Base/Component/Field/Field.php
@@ -7,6 +7,7 @@
 
 namespace Combodo\iTop\Application\UI\Base\Component\Field;
 
+use Combodo\iTop\Application\UI\Base\iUIBlock;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
 use Combodo\iTop\Application\UI\Base\UIBlock;
 use utils;
@@ -57,14 +58,16 @@ class Field extends UIContentBlock
 	/** @var string */
 	protected $sComments;
 
+	protected $oValue;
+
+	protected $aActions = [];
+
 	public function __construct(string $sLabel, ?UIBlock $oValue = null, ?string $sId = null)
 	{
 		parent::__construct($sId);
 		$this->sLabel = $sLabel;
 		$this->sValueId = null;
-		if (!is_null($oValue)) {
-			$this->AddSubBlock($oValue);
-		}
+		$this->oValue = $oValue;
 	}
 
 	/**
@@ -287,6 +290,10 @@ class Field extends UIContentBlock
 		return $this;
 	}
 
+	public function HasValue(): bool
+	{
+		return !is_null($this->oValue);
+	}
 	/**
 	 * @return \Combodo\iTop\Application\UI\Base\UIBlock
 	 */
@@ -390,4 +397,49 @@ class Field extends UIContentBlock
 	{
 		return utils::IsNotNullOrEmptyString($this->GetDescription());
 	}
+
+	public function GetActions(): array
+	{
+		return $this->aActions;
+	}
+	public function AddAction(UIBlock $oAction): static
+	{
+		$this->aActions[] = $oAction;
+		return $this;
+	}
+	public function HasActions(): bool
+	{
+		return !empty($this->aActions);
+	}
+
+	public function SetActions(array $aActions): static
+	{
+		$this->aActions = $aActions;
+		return $this;
+	}
+
+	public function GetSubBlocks(): array
+	{
+		$aSubBlocks = [];
+		if (!is_null($this->oValue)) {
+			$aSubBlocks[$this->oValue->GetId()] = $this->oValue;
+		}
+		foreach ($this->aActions as $oAction) {
+			$aSubBlocks[$oAction->GetId()] = $oAction;
+		}
+		$aSubBlocks = array_merge($aSubBlocks, parent::GetSubBlocks());
+		return $aSubBlocks;
+	}
+
+	/**
+	 * Return array of sub-blocks without the value or the actions
+	 * Handle the ancient way to add sub-blocks to the field (via AddSubBlock)
+	 *
+	 * @since 3.3.0
+	 * @return array<\Combodo\iTop\Application\UI\Base\UIBlock>
+	 */
+	public function GetAdditionalSubBlocks(): array
+	{
+		return $this->aSubBlocks;
+	}
 }
diff --git a/sources/Application/UI/Base/Component/Field/FieldUIBlockFactory.php b/sources/Application/UI/Base/Component/Field/FieldUIBlockFactory.php
index 2eea31f441..1ae8d29fd9 100644
--- a/sources/Application/UI/Base/Component/Field/FieldUIBlockFactory.php
+++ b/sources/Application/UI/Base/Component/Field/FieldUIBlockFactory.php
@@ -8,8 +8,13 @@
 namespace Combodo\iTop\Application\UI\Base\Component\Field;
 
 use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Html\Html;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuFactory;
 use Combodo\iTop\Application\UI\Base\UIBlock;
+use Dict;
+use utils;
 
 /**
  * Class FieldUIBlockFactory
@@ -67,6 +72,39 @@ class FieldUIBlockFactory extends AbstractUIBlockFactory
 			}
 		}
 
+		if (isset($aParams['actions'])) {
+			$iMaxActions = utils::GetConfig()->Get('attribute.max_actions_items');
+			$aActions = [];
+			// Create buttons for a few actions or a grouped-actions button for more actions than configured
+			if ($iMaxActions > 0 && count($aParams['actions']) > $iMaxActions) {
+				$oGroupedActionsButton = ButtonUIBlockFactory::MakeIconAction('fas fa-ellipsis-v', Dict::S('UI:Component:Field:GroupedActions:Tooltip'), 'grouped-actions');
+				$oGroupedActionsButton->AddCSSClass('ibo-field--action');
+
+				$aGroupedActions = [];
+				foreach ($aParams['actions'] as $oAction) {
+					$aGroupedActions[$oAction->GetUID()] = $oAction->GetMenuItem();
+					$oField->AddMultipleJsFilesRelPaths($oAction->GetLinkedScripts());
+				}
+				$oGroupedActionsPopoverMenu = PopoverMenuFactory::MakeMenuForActions($oField->GetId().'--grouped-actions-menu', $aGroupedActions);
+				$oGroupedActionsPopoverMenu->AddCSSClass('ibo-field--grouped-actions-popover');
+				$oGroupedActionsPopoverMenu->SetTogglerFromBlock($oGroupedActionsButton);
+				$oGroupedActionsPopoverMenu->SetContainer(PopoverMenu::ENUM_CONTAINER_BODY);
+
+				$aActions[] = $oGroupedActionsButton;
+				$aActions[] = $oGroupedActionsPopoverMenu;
+			} else {
+				foreach ($aParams['actions'] as $oAction) {
+					$oActionButton = ButtonUIBlockFactory::MakeIconButtonFromApplicationPopupMenuItem($oAction);
+					if ($oActionButton === null) {
+						continue;
+					}
+					$oActionButton->AddCSSClass('ibo-field--action');
+					$aActions[] = $oActionButton;
+				}
+			}
+			$oField->SetActions($aActions);
+		}
+
 		return $oField;
 	}
 
diff --git a/sources/Application/UI/Base/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItem.php b/sources/Application/UI/Base/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItem.php
index 9e07716b21..3d0a6f0813 100644
--- a/sources/Application/UI/Base/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItem.php
+++ b/sources/Application/UI/Base/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItem.php
@@ -159,4 +159,29 @@ class PopoverMenuItem extends UIBlock
 		return $this->oPopupMenuItem->GetUID();
 	}
 
+	public function GetDataAttributes(): array
+	{
+		// Merge attributes from the embedded popup item and from the UI block itself
+		return array_merge($this->oPopupMenuItem->GetDataAttributes()->GetAttributes(), parent::GetDataAttributes());
+	}
+
+	public function HasDataAttributes(): bool
+	{
+		return !empty($this->GetDataAttributes());
+	}
+
+	public function GetAriaAttributes(): array
+	{
+		return array_merge($this->oPopupMenuItem->GetAriaAttributes()->GetAttributes(), parent::GetAriaAttributes());
+	}
+
+	public function HasAriaAttribute(string $sName): bool
+	{
+		return array_key_exists($sName, $this->GetAriaAttributes());
+	}
+
+	public function HasAriaAttributes(): bool
+	{
+		return !empty($this->GetAriaAttributes());
+	}
 }
diff --git a/sources/Application/UI/Base/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItemFactory.php b/sources/Application/UI/Base/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItemFactory.php
index 0959cff928..e4425e2fc0 100644
--- a/sources/Application/UI/Base/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItemFactory.php
+++ b/sources/Application/UI/Base/Component/PopoverMenu/PopoverMenuItem/PopoverMenuItemFactory.php
@@ -21,6 +21,10 @@
 namespace Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem;
 
 use ApplicationPopupMenuItem;
+use Combodo\iTop\Application\UI\Base\Component\Button\Button;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonJS;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonSeparator;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonURL;
 use JSPopupMenuItem;
 use SeparatorPopupMenuItem;
 use URLPopupMenuItem;
@@ -84,6 +88,8 @@ class PopoverMenuItemFactory
 			'label' => $aActionData['label'],
 			'icon_class' => isset($aActionData['icon_class']) ? $aActionData['icon_class'] : '',
 			'tooltip' => isset($aActionData['tooltip']) ? $aActionData['tooltip'] : '',
+			'data_attributes' => isset($aActionData['data_attributes']) && is_array($aActionData['data_attributes']) ? $aActionData['data_attributes'] : [],
+			'aria_attributes' => isset($aActionData['aria_attributes']) && is_array($aActionData['aria_attributes']) ? $aActionData['aria_attributes'] : [],
 		];
 
 		// Avoid meaningless tooltips which are identical to the label
@@ -124,10 +130,64 @@ class PopoverMenuItemFactory
 		if (!empty($aRefactoredItem['tooltip'])) {
 			$oPopoverMenuItem->SetTooltip($aRefactoredItem['tooltip']);
 		}
+		if (!empty($aRefactoredItem['data_attributes'])) {
+			$oPopoverMenuItem->SetDataAttributes($aRefactoredItem['data_attributes']);
+		}
+		if (!empty($aRefactoredItem['aria_attributes'])) {
+			$oPopoverMenuItem->SetAriaAttributes($aRefactoredItem['aria_attributes']);
+		}
 
 		return $oPopoverMenuItem;
 	}
 
+	public static function MakeApplicationPopupMenuItemFromButton(Button|ButtonSeparator $oButton, string $sUid): PopoverMenuItem|SeparatorPopupMenuItem
+	{
+		$sLabel = '';
+		if ($oButton instanceof Button) {
+			$sLabel = $oButton->GetLabel();
+			if ($sLabel === '' && $oButton->GetTooltip() !== '') {
+				// Fallback for icon-only buttons: show the tooltip text in the dropdown item.
+				$sLabel = $oButton->GetTooltip();
+			}
+		}
+
+		if ($oButton instanceof ButtonSeparator) {
+			$oPopoverMenuItem = PopoverMenuItemFactory::MakeSeparator();
+		} elseif ($oButton instanceof ButtonURL) {
+			$oPopoverMenuItem = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
+				new URLPopupMenuItem($sUid, $sLabel, $oButton->GetURL(), $oButton->GetTarget())
+			);
+		} elseif ($oButton instanceof ButtonJS) {
+			$oPopoverMenuItem = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
+				new JSPopupMenuItem($sUid, $sLabel, $oButton->GetOnClickJsCode())
+			);
+		} elseif ($oButton->GetOnClickJsCode() !== '') {
+			$oPopoverMenuItem = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
+				new JSPopupMenuItem($sUid, $sLabel, $oButton->GetOnClickJsCode())
+			);
+		} else {
+			$oPopoverMenuItem = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
+				new URLPopupMenuItem($sUid, $sLabel, '#')
+			);
+		}
+
+		if ($oButton instanceof Button) {
+			if ($oButton->GetIconClass() !== '') {
+				$oPopoverMenuItem->SetIconClass($oButton->GetIconClass());
+			}
+			if ($oButton->GetTooltip() !== '' && $oButton->GetTooltip() !== $sLabel) {
+				$oPopoverMenuItem->SetTooltip($oButton->GetTooltip());
+			}
+			if ($oButton->HasDataAttributes()) {
+				$oPopoverMenuItem->SetDataAttributes($oButton->GetDataAttributes());
+			}
+			if ($oButton->HasAriaAttributes()) {
+				$oPopoverMenuItem->SetAriaAttributes($oButton->GetAriaAttributes());
+			}
+		}
+
+		return $oPopoverMenuItem;
+	}
 	/**
 	 * Make a separator item for the popover menu
 	 *
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanel.php b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanel.php
index c711eead4e..5e49eddba6 100644
--- a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanel.php
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanel.php
@@ -101,7 +101,7 @@ class ActivityPanel extends UIBlock
 	protected $bPrefilterStateChangesOnLogs;
 	/** @var bool */
 	protected $bPrefilterEditsOnLogs;
-
+	protected array $aActivityActions = [];
 	/**
 	 * ActivityPanel constructor.
 	 *
@@ -939,6 +939,10 @@ class ActivityPanel extends UIBlock
 
 		$aSubBlocks[$this->GetComposeMenu()->GetId()] = $this->GetComposeMenu();
 
+		foreach ($this->GetActivityActions() as $oActivityAction) {
+			$aSubBlocks[$oActivityAction->GetId()] = $oActivityAction;
+		}
+
 		return $aSubBlocks;
 	}
 
@@ -950,4 +954,26 @@ class ActivityPanel extends UIBlock
 	{
 		return \UserRights::IsActionAllowed($this->GetObjectClass(), UR_ACTION_MODIFY);
 	}
+
+	public function HasActivityActions(): bool
+	{
+		return count($this->aActivityActions) > 0;
+	}
+
+	public function GetActivityActions(): array
+	{
+		return $this->aActivityActions;
+	}
+
+	public function SetActivityActions(array $aActivityActions)
+	{
+		$this->aActivityActions = $aActivityActions;
+		return $this;
+	}
+
+	public function AddActivityAction($oActivityAction)
+	{
+		$this->aActivityActions[] = $oActivityAction;
+		return $this;
+	}
 }
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelAction.php b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelAction.php
new file mode 100644
index 0000000000..999faafec3
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelAction.php
@@ -0,0 +1,130 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction;
+
+use Combodo\iTop\Application\UI\Base\Common\Action\tActionCommon;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
+use Combodo\iTop\Application\UI\Base\UIBlock;
+use utils;
+
+/**
+ * Class ActivityPanelAction
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction
+ * @internal
+ * @since 3.3.0
+ */
+abstract class ActivityPanelAction extends UIBlock
+{
+	use tActionCommon;
+	// Overloaded constants
+	public const BLOCK_CODE = 'ibo-activity-panel-action';
+	public const DEFAULT_JS_FILES_REL_PATH = [
+	];
+	public const DEFAULT_CSS_FILES_REL_PATH = [
+	];
+
+	/** @var array<string, array<\ApplicationPopupMenuItem>> */
+	protected array $aPopupItems = [];
+	protected ?PopoverMenu $oPopoverMenu = null;
+
+	public function __construct(string $sLabel, string $sIconClass, ?string $sTooltip, string $sUid)
+	{
+		// UID is necessary for parent ID generation, we set it first
+		$this->sUid = $sUid;
+		parent::__construct();
+		$this->sLabel = $sLabel;
+		$this->sIconClass = $sIconClass;
+		$this->sTooltip = $sTooltip;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected function GenerateId(): string
+	{
+		return parent::GenerateId().'--'.utils::GetSafeId($this->sUid, true);
+	}
+
+	public function SetPopupItems(array $aPopupItems): static
+	{
+		$this->aPopupItems = $aPopupItems;
+		return $this;
+	}
+
+	public function AddPopupItem(string $sSectionId, \ApplicationPopupMenuItem $oPopupItem): static
+	{
+		if (!array_key_exists($sSectionId, $this->aPopupItems)) {
+			$this->aPopupItems[$sSectionId] = [];
+		}
+
+		$this->aPopupItems[$sSectionId][] = $oPopupItem;
+		return $this;
+	}
+
+	public function GetPopupItems(): array
+	{
+		return $this->aPopupItems;
+	}
+
+	public function SetPopoverMenu(PopoverMenu $oPopoverMenu): static
+	{
+		$this->oPopoverMenu = $oPopoverMenu;
+		return $this;
+	}
+
+	public function GetPopoverMenu(): ?PopoverMenu
+	{
+		return $this->oPopoverMenu;
+	}
+
+	public function HasPopoverMenu(): bool
+	{
+		return $this->oPopoverMenu !== null;
+	}
+
+	public function GetAriaAttributes(): array
+	{
+		$aDefaultValues = [];
+		// Keep the label as the default accessible name, falling back to the tooltip
+		if (utils::IsNotNullOrEmptyString($this->sLabel)) {
+			$aDefaultValues['label'] = $this->sLabel;
+		} elseif (utils::IsNotNullOrEmptyString($this->sTooltip)) {
+			$aDefaultValues['label'] = $this->sTooltip;
+		}
+
+		return array_merge($aDefaultValues, parent::GetAriaAttributes());
+	}
+
+	public function HasAriaAttributes(): bool
+	{
+		return  !empty($this->GetAriaAttributes());
+	}
+
+	public function GetSubBlocks(): array
+	{
+		if (false === $this->HasPopoverMenu()) {
+			return [];
+		}
+
+		return [$this->oPopoverMenu->GetId() => $this->oPopoverMenu];
+	}
+}
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionFactory.php b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionFactory.php
new file mode 100644
index 0000000000..f07f957d9d
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionFactory.php
@@ -0,0 +1,149 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction;
+
+use ApplicationPopupMenuItem;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
+use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
+use JSPopupMenuItem;
+use SeparatorPopupMenuItem;
+use URLPopupMenuItem;
+
+/**
+ * Class ActivityPanelActionJS
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction
+ * @internal
+ * @since 3.3.0
+ */
+class ActivityPanelActionFactory
+{
+	/**
+	 * @param array $aPopupItems as follow:
+	 * [ 'case-log-attribute-code' => [ ApplicationPopupMenuItem1, ... ], ... ]
+	 * or
+	 * [ 'case-log-attribute-code' => ['label' => 'Displayed label', 'items' => [ ApplicationPopupMenuItem1, ... ]], ... ]
+	 * @return ActivityPanelAction[]
+	 * @throws \Exception
+	 */
+	public static function MakeFromApplicationPopupItems(array $aPopupItems): array
+	{
+		$aActionsByUid = [];
+
+		foreach ($aPopupItems as $sSectionId => $aSectionData) {
+			$sSectionLabel = (string)$sSectionId;
+			$aSectionPopupItems = $aSectionData;
+			if (is_array($aSectionData) && array_key_exists('items', $aSectionData)) {
+				$aSectionPopupItems = $aSectionData['items'];
+				if (array_key_exists('label', $aSectionData)) {
+					$sSectionLabel = (string)$aSectionData['label'];
+				}
+			}
+
+			if (!is_array($aSectionPopupItems)) {
+				$aSectionPopupItems = [$aSectionPopupItems];
+			}
+
+			// Special index as separators aren't meant to be multiple action across different caselogs
+			$iSectionSeparatorIndex = 0;
+			foreach ($aSectionPopupItems as $oPopupItem) {
+				if (!$oPopupItem instanceof ApplicationPopupMenuItem) {
+					continue;
+				}
+
+				$sUid = $oPopupItem->GetUID();
+				if ($oPopupItem instanceof SeparatorPopupMenuItem) {
+					$iSectionSeparatorIndex++;
+					$sUid = 'ibo-activity-panel--activity-action-separator--'.$iSectionSeparatorIndex;
+				}
+				if (!isset($aActionsByUid[$sUid])) {
+					$oActivityAction = static::MakeFromApplicationPopupItem($oPopupItem);
+					if ($oActivityAction === null) {
+						continue;
+					}
+
+					if (false === ($oActivityAction instanceof ActivityPanelActionSeparator)) {
+						$oPopoverMenu = new PopoverMenu($oActivityAction->GetId().'-menu');
+						$oPopoverMenu->SetContainer(PopoverMenu::ENUM_CONTAINER_BODY);
+						$oPopoverMenu->SetTogglerFromBlock($oActivityAction);
+						$oActivityAction->SetPopoverMenu($oPopoverMenu);
+					}
+
+					$aActionsByUid[$sUid] = $oActivityAction;
+				}
+
+				if ($aActionsByUid[$sUid] instanceof ActivityPanelActionSeparator) {
+					continue;
+				}
+
+				$oPopupItemForPopoverMenuItem = clone $oPopupItem;
+				$oPopupItemForPopoverMenuItem->SetLabel($sSectionLabel);
+				$oPopupItemForPopoverMenuItem->SetIconClass('');
+
+				$oPopoverMenuItem = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem($oPopupItemForPopoverMenuItem);
+				$oPopoverMenuItem->AddDataAttribute('caselog-attribute-code', (string)$sSectionId);
+				$aActionsByUid[$sUid]->GetPopoverMenu()->AddItem((string)$sSectionId, $oPopoverMenuItem);
+			}
+		}
+
+		return array_values($aActionsByUid);
+	}
+
+	public static function MakeFromApplicationPopupItem($oPopupItem): ?ActivityPanelAction
+	{
+		if ($oPopupItem instanceof JSPopupMenuItem) {
+			$sUid = $oPopupItem->GetUID();
+			$oAction = new ActivityPanelActionJS(
+				$oPopupItem->GetLabel(),
+				$oPopupItem->GetIconClass(),
+				$oPopupItem->GetTooltip(),
+				$sUid
+			);
+			$oAction->SetJsCode($oPopupItem->GetJsCode());
+			$oAction->SetUrl($oPopupItem->GetUrl());
+			$oAction->AddMultipleJsFilesRelPaths($oPopupItem->GetLinkedScripts());
+			$oAction->SetAriaAttributes($oPopupItem->GetAriaAttributes()->GetAttributes());
+			$oAction->SetDataAttributes($oPopupItem->GetDataAttributes()->GetAttributes());
+
+			return $oAction;
+		} elseif ($oPopupItem instanceof URLPopupMenuItem) {
+			$sUid = $oPopupItem->GetUID();
+			$oAction = new ActivityPanelActionURL(
+				$oPopupItem->GetLabel(),
+				$oPopupItem->GetIconClass(),
+				$oPopupItem->GetTooltip(),
+				$sUid
+			);
+			$oAction->SetUrl($oPopupItem->GetUrl());
+			$oAction->SetTarget($oPopupItem->GetTarget());
+			$oAction->SetAriaAttributes($oPopupItem->GetAriaAttributes()->GetAttributes());
+			$oAction->SetDataAttributes($oPopupItem->GetDataAttributes()->GetAttributes());
+
+			return $oAction;
+		} elseif ($oPopupItem instanceof SeparatorPopupMenuItem) {
+			return new ActivityPanelActionSeparator($oPopupItem->GetUID());
+		}
+
+		// Should never happen, but just in case a new type is added, return null
+
+		return null;
+	}
+}
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionJS.php b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionJS.php
new file mode 100644
index 0000000000..3922c6501e
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionJS.php
@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction;
+
+use Combodo\iTop\Application\UI\Base\Common\Action\tActionJs;
+
+/**
+ * Class ActivityPanelActionJS
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction
+ * @internal
+ * @since 3.3.0
+ */
+class ActivityPanelActionJS extends ActivityPanelAction
+{
+	use tActionJs;
+	// Overloaded constants
+	public const BLOCK_CODE = 'ibo-activity-panel-action-js';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/activity-panel/activity-action/activity-action-js';
+	public const DEFAULT_JS_FILES_REL_PATH = [
+	];
+	public const DEFAULT_CSS_FILES_REL_PATH = [
+	];
+}
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionSeparator.php b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionSeparator.php
new file mode 100644
index 0000000000..0bac4fd17a
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionSeparator.php
@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction;
+
+/**
+ * Class ActivityPanelActionSeparator
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction
+ * @internal
+ * @since 3.3.0
+ */
+class ActivityPanelActionSeparator extends ActivityPanelAction
+{
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/activity-panel/activity-action/activity-action-separator';
+	public const DEFAULT_JS_TEMPLATE_REL_PATH = null;
+
+	/**
+	 * @param string $sUid
+	 */
+	public function __construct(string $sUid)
+	{
+		parent::__construct('', '', null, $sUid);
+	}
+}
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionURL.php b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionURL.php
new file mode 100644
index 0000000000..718e5a0aa8
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelAction/ActivityPanelActionURL.php
@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction;
+
+use Combodo\iTop\Application\UI\Base\Common\Action\tActionURL;
+
+/**
+ * Class ActivityPanelActionURL
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction
+ * @internal
+ * @since 3.3.0
+ */
+class ActivityPanelActionURL extends ActivityPanelAction
+{
+	use tActionURL;
+	// Overloaded constants
+	public const BLOCK_CODE = 'ibo-activity-panel-action-url';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/activity-panel/activity-action/activity-action-url';
+	public const DEFAULT_JS_FILES_REL_PATH = [
+	];
+	public const DEFAULT_CSS_FILES_REL_PATH = [
+	];
+}
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelFactory.php b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelFactory.php
index 96c425af80..d28c419045 100644
--- a/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelFactory.php
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/ActivityPanelFactory.php
@@ -22,12 +22,16 @@ namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel;
 
 use cmdbAbstractObject;
 use Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityEntry\ActivityEntryFactory;
+use Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelAction\ActivityPanelActionFactory;
 use Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\CaseLogEntryForm\CaseLogEntryFormFactory;
+use Combodo\iTop\Service\InterfaceDiscovery\InterfaceDiscovery;
 use DBObject;
 use DBObjectSearch;
 use DBObjectSet;
+use Dict;
 use Exception;
 use ExecutionKPI;
+use iPopupMenuExtension;
 use IssueLog;
 use MetaModel;
 
@@ -172,6 +176,53 @@ class ActivityPanelFactory
 			}
 		}
 
+		if ($sMode === cmdbAbstractObject::ENUM_DISPLAY_MODE_VIEW) {
+			$aActionItems = [];
+			/** @var \iPopupMenuExtension $oExtensionInstance */
+			foreach (InterfaceDiscovery::GetInstance()->FindItopClasses('iPopupMenuExtension') as $oExtensionInstance) {
+				// Iterate over every case log tab to retrieve the actions for each of them
+				foreach ($aCaseLogTabs as $sCaseLogAttCode => $aCaseLogData) {
+					$aCaselogActions = [];
+
+					// Let's iterate over the menu items for this case log
+					foreach ($oExtensionInstance::EnumItems(iPopupMenuExtension::MENU_OBJDETAILS_ACTIVITY_PANEL_ACTIONS, ['object' => $oObject, 'caselog_att_code' => $sCaseLogAttCode]) as $oMenuItem) {
+						$aCaselogActions[] = $oMenuItem;
+					}
+
+					if (empty($aCaselogActions)) {
+						continue;
+					}
+
+					// Create a new section for the case log if it doesn't exist yet
+					if (!array_key_exists($sCaseLogAttCode, $aActionItems)) {
+						$aActionItems[$sCaseLogAttCode] = [
+							'label' => MetaModel::GetLabel($sObjClass, $sCaseLogAttCode),
+							'items' => [],
+						];
+					}
+
+					$aActionItems[$sCaseLogAttCode]['items'] = array_merge($aActionItems[$sCaseLogAttCode]['items'], $aCaselogActions);
+				}
+
+				$aActivityItems = [];
+				// Don't forget 1 last iteration for the activity tab
+				foreach ($oExtensionInstance::EnumItems(iPopupMenuExtension::MENU_OBJDETAILS_ACTIVITY_PANEL_ACTIONS, ['object' => $oObject, 'caselog_att_code' => 'activity']) as $oMenuItem) {
+					$aActivityItems[] = $oMenuItem;
+				}
+				if (!empty($aActivityItems)) {
+					if (!array_key_exists('activity', $aActionItems)) {
+						$aActionItems['activity'] = [
+							'label' => Dict::S('UI:Layout:ActivityPanel:Tab:Activity:Title'),
+							'items' => [],
+						];
+					}
+					$aActionItems['activity']['items'] = array_merge($aActionItems['activity']['items'], $aActivityItems);
+				}
+			}
+
+			$oActivityPanel->SetActivityActions(ActivityPanelActionFactory::MakeFromApplicationPopupItems($aActionItems));
+		}
+
 		$oKPI->ComputeStatsForExtension(new ActivityPanelFactory(), 'MakeForObjectDetails');
 
 		return $oActivityPanel;
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryForm.php b/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryForm.php
index 54fa431ef3..e182b3ec74 100644
--- a/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryForm.php
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryForm.php
@@ -9,10 +9,14 @@ namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\CaseLogEntryForm
 
 use AttributeCaseLog;
 use cmdbAbstractObject;
+use Combodo\iTop\Application\UI\Base\Component\Button\Button;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonSeparator;
+use Combodo\iTop\Application\UI\Base\Component\ButtonBar\ButtonBar;
 use Combodo\iTop\Application\UI\Base\Component\Input\RichText\RichText;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
 use Combodo\iTop\Application\UI\Base\UIBlock;
 use DBObject;
+use Dict;
 use MetaModel;
 use utils;
 
@@ -53,8 +57,8 @@ class CaseLogEntryForm extends UIContentBlock
 	protected $oTextInput;
 	/** @var array $aMainActionButtons The form main actions (send, cancel, ...) */
 	protected $aMainActionButtons;
-	/** @var array $aExtraActionButtons The form extra actions, can be populated through a public API */
-	protected $aExtraActionButtons;
+	/** @var ButtonBar $oExtraActionButtonBar Extra actions button bar */
+	protected ButtonBar $oExtraActionButtonBar;
 
 	/**
 	 * CaseLogEntryForm constructor.
@@ -69,8 +73,8 @@ class CaseLogEntryForm extends UIContentBlock
 		$this->sAttCode = $sAttCode;
 		$this->sSubmitMode = static::DEFAULT_SUBMIT_MODE;
 		$this->aMainActionButtons = [];
-		$this->aExtraActionButtons = [];
 		$this->InitTextInput();
+		$this->InitExtraActionButtonBar();
 	}
 
 	/**
@@ -273,12 +277,27 @@ class CaseLogEntryForm extends UIContentBlock
 		return $this;
 	}
 
+	/**
+	 * @return void
+	 */
+	protected function InitExtraActionButtonBar(): void
+	{
+		$this->oExtraActionButtonBar = new ButtonBar([], Dict::S('UI:Component:Field:GroupedActions:Tooltip'));
+	}
+
+	/**
+	 * @return ButtonBar
+	 */
+	public function GetExtraActionButtonBar(): ButtonBar
+	{
+		return $this->oExtraActionButtonBar;
+	}
 	/**
 	 * @return \Combodo\iTop\Application\UI\Base\UIBlock[]
 	 */
 	public function GetExtraActionButtons(): array
 	{
-		return $this->aExtraActionButtons;
+		return $this->oExtraActionButtonBar->GetButtons();
 	}
 
 	/**
@@ -291,7 +310,7 @@ class CaseLogEntryForm extends UIContentBlock
 	 */
 	public function SetExtraActionButtons(array $aExtraActionButtons)
 	{
-		$this->aExtraActionButtons = $aExtraActionButtons;
+		$this->oExtraActionButtonBar->SetButtons($aExtraActionButtons);
 		return $this;
 	}
 
@@ -302,9 +321,12 @@ class CaseLogEntryForm extends UIContentBlock
 	 * @see $aExtraActionButtons
 	 *
 	 */
-	public function AddExtraActionButtons(UIBlock $oExtraActionButton)
+	public function AddExtraActionButtons(UIBlock $oExtraActionButton): self
 	{
-		$this->aExtraActionButtons[] = $oExtraActionButton;
+		if (!($oExtraActionButton instanceof Button) && !($oExtraActionButton instanceof ButtonSeparator)) {
+			throw new \InvalidArgumentException('Extra action buttons must be either a Button or a ButtonSeparator');
+		}
+		$this->oExtraActionButtonBar->AddButton($oExtraActionButton);
 		return $this;
 	}
 
@@ -316,9 +338,7 @@ class CaseLogEntryForm extends UIContentBlock
 		$aSubBlocks = [];
 		$aSubBlocks[$this->GetTextInput()->GetId()] = $this->GetTextInput();
 
-		foreach ($this->GetExtraActionButtons() as $oExtraActionButton) {
-			$aSubBlocks[$oExtraActionButton->GetId()] = $oExtraActionButton;
-		}
+		$aSubBlocks[$this->GetExtraActionButtonBar()->GetId()] = $this->GetExtraActionButtonBar();
 
 		foreach ($this->GetMainActionButtons() as $oMainActionButton) {
 			$aSubBlocks[$oMainActionButton->GetId()] = $oMainActionButton;
diff --git a/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryFormFactory.php b/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryFormFactory.php
index 02ef6d2491..597991892f 100644
--- a/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryFormFactory.php
+++ b/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryFormFactory.php
@@ -13,9 +13,11 @@ use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroupUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
 use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
+use Combodo\iTop\Service\InterfaceDiscovery\InterfaceDiscovery;
 use DBObject;
 use DBObjectSet;
 use Dict;
+use iPopupMenuExtension;
 use JSPopupMenuItem;
 use MetaModel;
 use UserRights;
@@ -48,6 +50,33 @@ class CaseLogEntryFormFactory
 			$oCaseLogEntryForm->AddMainActionButtons($oSaveButton);
 		}
 
+		// Build extra actions
+		$aPopupItems = [];
+		/** @var \iPopupMenuExtension $oExtensionInstance */
+		foreach (InterfaceDiscovery::GetInstance()->FindItopClasses('iPopupMenuExtension') as $oExtensionInstance) {
+			foreach ($oExtensionInstance::EnumItems(iPopupMenuExtension::MENU_OBJDETAILS_FIELD_ACTIONS, ['object' => $oObject, 'att_code' => $sCaseLogAttCode, 'mode' => $sObjectMode === cmdbAbstractObject::ENUM_DISPLAY_MODE_EDIT ? 'edit' : 'read']) as $oMenuItem) {
+				$aPopupItems[] = $oMenuItem;
+			}
+		}
+
+		if (!empty($aPopupItems)) {
+			$aActions = [];
+			// Create a button for each extra action, the UI will be responsible for displaying them in a dropdown if there are too many
+			foreach ($aPopupItems as $oAction) {
+				$oActionButton = ButtonUIBlockFactory::MakeButtonFromApplicationPopupMenuItem($oAction);
+				if ($oActionButton === null) {
+					continue;
+				}
+				$oActionButton->AddCSSClass('ibo-field--action');
+				$aActions[] = $oActionButton;
+			}
+
+			foreach ($aActions as $oAction) {
+				$oAction->AddCSSClass('ibo-caselog-entry-form--extra-action');
+				$oCaseLogEntryForm->AddExtraActionButtons($oAction);
+			}
+		}
+
 		return $oCaseLogEntryForm;
 	}
 
diff --git a/sources/Application/UI/Base/Layout/TopBar/TopBar.php b/sources/Application/UI/Base/Layout/TopBar/TopBar.php
index 4d13b716e9..9954936bd8 100644
--- a/sources/Application/UI/Base/Layout/TopBar/TopBar.php
+++ b/sources/Application/UI/Base/Layout/TopBar/TopBar.php
@@ -24,6 +24,7 @@ use Combodo\iTop\Application\UI\Base\Component\Breadcrumbs\Breadcrumbs;
 use Combodo\iTop\Application\UI\Base\Component\GlobalSearch\GlobalSearch;
 use Combodo\iTop\Application\UI\Base\Component\QuickCreate\QuickCreate;
 use Combodo\iTop\Application\UI\Base\Component\Toolbar\Toolbar;
+use Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction\TopBarQuickAction;
 use Combodo\iTop\Application\UI\Base\UIBlock;
 
 /**
@@ -48,6 +49,8 @@ class TopBar extends UIBlock
 	protected $oBreadcrumbs;
 	/** @var Toolbar|null */
 	protected $oToolbar;
+	/** @var array $aQuickActions */
+	protected array $aQuickActions = [];
 
 	/**
 	 * TopBar constructor.
@@ -205,7 +208,8 @@ class TopBar extends UIBlock
 	{
 		$aSubBlocks = [];
 
-		$aSubBlocksNames = ['QuickCreate', 'GlobalSearch', 'Breadcrumbs', 'Toolbar'];
+		// Add single objects
+		$aSubBlocksNames = ['QuickCreate', 'GlobalSearch', 'Breadcrumbs', 'Toolbar', ];
 		foreach ($aSubBlocksNames as $sSubBlockName) {
 			$sHasMethodName = 'Has'.$sSubBlockName;
 			if (true === call_user_func_array([$this, $sHasMethodName], [])) {
@@ -214,6 +218,40 @@ class TopBar extends UIBlock
 			}
 		}
 
+		// Add object arrays
+		$aSubBlocksNames = ['QuickActions'];
+		foreach ($aSubBlocksNames as $sSubBlockName) {
+			$sHasMethodName = 'Has'.$sSubBlockName;
+			if (true === call_user_func_array([$this, $sHasMethodName], [])) {
+				$sPropertyName = 'a'.$sSubBlockName;
+				foreach ($this->$sPropertyName as $oSubBlock) {
+					$aSubBlocks[$oSubBlock->GetId()] = $oSubBlock;
+				}
+			}
+		}
+
 		return $aSubBlocks;
 	}
+
+	public function HasQuickActions(): bool
+	{
+		return count($this->GetQuickActions()) > 0;
+	}
+
+	public function GetQuickActions(): array
+	{
+		return $this->aQuickActions;
+	}
+
+	public function SetQuickActions(array $aQuickActions): static
+	{
+		$this->aQuickActions = $aQuickActions;
+		return $this;
+	}
+
+	public function AddQuickAction(TopBarQuickAction $oQuickAction): static
+	{
+		$this->aQuickActions[] = $oQuickAction;
+		return $this;
+	}
 }
diff --git a/sources/Application/UI/Base/Layout/TopBar/TopBarFactory.php b/sources/Application/UI/Base/Layout/TopBar/TopBarFactory.php
index 5bf8bad66b..51dcec12ee 100644
--- a/sources/Application/UI/Base/Layout/TopBar/TopBarFactory.php
+++ b/sources/Application/UI/Base/Layout/TopBar/TopBarFactory.php
@@ -23,6 +23,9 @@ namespace Combodo\iTop\Application\UI\Base\Layout\TopBar;
 use Combodo\iTop\Application\UI\Base\Component\Breadcrumbs\Breadcrumbs;
 use Combodo\iTop\Application\UI\Base\Component\GlobalSearch\GlobalSearchFactory;
 use Combodo\iTop\Application\UI\Base\Component\QuickCreate\QuickCreateFactory;
+use Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction\TopBarQuickActionFactory;
+use Combodo\iTop\Service\InterfaceDiscovery\InterfaceDiscovery;
+use iPopupMenuExtension;
 use utils;
 
 /**
@@ -58,6 +61,17 @@ class TopBarFactory
 			$oTopBar->SetGlobalSearch(GlobalSearchFactory::MakeFromUserHistory());
 		}
 
+		/** @var \iPopupMenuExtension $oExtensionInstance */
+		foreach (InterfaceDiscovery::GetInstance()->FindItopClasses('iPopupMenuExtension') as $oExtensionInstance) {
+			foreach ($oExtensionInstance::EnumItems(iPopupMenuExtension::MENU_TOPBAR_ACTIONS, []) as $oMenuItem) {
+				$oNewQuickAction = TopBarQuickActionFactory::MakeFromApplicationPopupItem($oMenuItem);
+				if ($oNewQuickAction === null) {
+					continue;
+				}
+				$oTopBar->AddQuickAction($oNewQuickAction);
+			}
+		}
+
 		if (utils::GetConfig()->Get('breadcrumb.enabled') === true) {
 			$oBreadcrumbs = new Breadcrumbs($aBreadcrumbsEntry, Breadcrumbs::BLOCK_CODE);
 
diff --git a/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickAction.php b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickAction.php
new file mode 100644
index 0000000000..ee1224e731
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickAction.php
@@ -0,0 +1,92 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction;
+
+use Combodo\iTop\Application\UI\Base\Common\Action\tActionCommon;
+use Combodo\iTop\Application\UI\Base\UIBlock;
+use utils;
+
+/**
+ * Class TopBarAction
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction
+ * @internal
+ * @since 3.3.0
+ */
+abstract class TopBarQuickAction extends UIBlock
+{
+	use tActionCommon;
+
+	// Overloaded constants
+	public const BLOCK_CODE = 'ibo-top-bar-quick-action';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/top-bar/top-bar-quick-action/layout';
+	public const DEFAULT_JS_FILES_REL_PATH = [
+	];
+	public const DEFAULT_CSS_FILES_REL_PATH = [
+	];
+
+	/**
+	 * TopBarAction constructor.
+	 *
+	 * @param string $sLabel
+	 * @param string $sIconClass
+	 * @param string|null $sTooltip
+	 * @param string $sUid
+	 *
+	 * @throws \CoreException
+	 * @throws \DictExceptionMissingString
+	 */
+	public function __construct(string $sLabel, string $sIconClass, ?string $sTooltip, string $sUid)
+	{
+		// UID is necessary for parent ID generation, we set it first
+		$this->sUid = $sUid;
+		parent::__construct();
+		$this->sLabel = $sLabel;
+		$this->sIconClass = $sIconClass;
+		$this->sTooltip = $sTooltip;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected function GenerateId(): string
+	{
+		return parent::GenerateId().'--'.utils::GetSafeId($this->sUid, true);
+	}
+
+	public function GetAriaAttributes(): array
+	{
+		$aDefaultValues = [];
+		// Keep the label as the default accessible name, falling back to the tooltip
+		if (utils::IsNotNullOrEmptyString($this->sLabel)) {
+			$aDefaultValues['label'] = $this->sLabel;
+		} elseif (utils::IsNotNullOrEmptyString($this->sTooltip)) {
+			$aDefaultValues['label'] = $this->sTooltip;
+		}
+
+		return array_merge($aDefaultValues, parent::GetAriaAttributes());
+	}
+
+	public function HasAriaAttributes(): bool
+	{
+		return  !empty($this->GetAriaAttributes());
+	}
+}
diff --git a/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionFactory.php b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionFactory.php
new file mode 100644
index 0000000000..a4c650177e
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionFactory.php
@@ -0,0 +1,74 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction;
+
+use JSPopupMenuItem;
+use SeparatorPopupMenuItem;
+use URLPopupMenuItem;
+
+/**
+ * Class TopBarActionFactory
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction
+ * @internal
+ * @since 3.0.0
+ */
+class TopBarQuickActionFactory
+{
+	public static function MakeFromApplicationPopupItem($oApplicationPopupItem): ?TopBarQuickAction
+	{
+		if ($oApplicationPopupItem instanceof JSPopupMenuItem) {
+			$oTopBarAction = new TopBarQuickActionJS(
+				$oApplicationPopupItem->GetLabel(),
+				$oApplicationPopupItem->GetIconClass(),
+				$oApplicationPopupItem->GetTooltip(),
+				$oApplicationPopupItem->GetUID()
+			);
+			$oTopBarAction->SetJsCode($oApplicationPopupItem->GetJsCode());
+			$oTopBarAction->SetUrl($oApplicationPopupItem->GetUrl());
+			$oTopBarAction->AddMultipleJsFilesRelPaths($oApplicationPopupItem->GetLinkedScripts());
+			$oTopBarAction->SetAriaAttributes($oApplicationPopupItem->GetAriaAttributes()->GetAttributes());
+			$oTopBarAction->SetDataAttributes($oApplicationPopupItem->GetDataAttributes()->GetAttributes());
+			return $oTopBarAction;
+		} elseif ($oApplicationPopupItem instanceof URLPopupMenuItem) {
+			$oTopBarAction = new TopBarQuickActionURL(
+				$oApplicationPopupItem->GetLabel(),
+				$oApplicationPopupItem->GetIconClass(),
+				$oApplicationPopupItem->GetTooltip(),
+				$oApplicationPopupItem->GetUID()
+			);
+			$oTopBarAction->SetUrl($oApplicationPopupItem->GetUrl());
+			$oTopBarAction->SetTarget($oApplicationPopupItem->GetTarget());
+			$oTopBarAction->SetAriaAttributes($oApplicationPopupItem->GetAriaAttributes()->GetAttributes());
+			$oTopBarAction->SetDataAttributes($oApplicationPopupItem->GetDataAttributes()->GetAttributes());
+			return $oTopBarAction;
+		} elseif ($oApplicationPopupItem instanceof SeparatorPopupMenuItem) {
+			$oTopBarAction = new TopBarQuickActionSeparator($oApplicationPopupItem->GetUID());
+			$oTopBarAction->SetCSSClasses($oApplicationPopupItem->GetCssClasses());
+			$oTopBarAction->SetAriaAttributes($oApplicationPopupItem->GetAriaAttributes()->GetAttributes());
+			$oTopBarAction->SetDataAttributes($oApplicationPopupItem->GetDataAttributes()->GetAttributes());
+			return $oTopBarAction;
+		}
+
+		// Should never happen, but just in case a new type is added, return null
+		return null;
+	}
+}
diff --git a/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionJS.php b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionJS.php
new file mode 100644
index 0000000000..c53785569a
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionJS.php
@@ -0,0 +1,38 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction;
+
+use Combodo\iTop\Application\UI\Base\Common\Action\tActionJs;
+use Combodo\iTop\Application\UI\Base\UIBlock;
+
+/**
+ * Class TopBarActionJS
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction
+ * @internal
+ * @since 3.3.0
+ */
+class TopBarQuickActionJS extends TopBarQuickAction
+{
+	use tActionJs;
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js';
+	public const DEFAULT_JS_TEMPLATE_REL_PATH = 'base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js';
+}
diff --git a/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionSeparator.php b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionSeparator.php
new file mode 100644
index 0000000000..c900a41a90
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionSeparator.php
@@ -0,0 +1,45 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction;
+
+/**
+ * Class TopBarQuickActionSeparator
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction
+ * @internal
+ * @since 3.3.0
+ */
+class TopBarQuickActionSeparator extends TopBarQuickAction
+{
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-separator';
+	public const DEFAULT_JS_TEMPLATE_REL_PATH = null;
+
+	/**
+	 * @param string|null $sId
+	 *
+	 * @throws \CoreException
+	 * @throws \DictExceptionMissingString
+	 */
+	public function __construct(string $sUid)
+	{
+		parent::__construct('', '', null, $sUid);
+	}
+}
diff --git a/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionURL.php b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionURL.php
new file mode 100644
index 0000000000..614760ca5a
--- /dev/null
+++ b/sources/Application/UI/Base/Layout/TopBar/TopBarQuickAction/TopBarQuickActionURL.php
@@ -0,0 +1,36 @@
+<?php
+
+/**
+ * Copyright (C) 2013-2026 Combodo SAS
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction;
+
+use Combodo\iTop\Application\UI\Base\Common\Action\tActionURL;
+
+/**
+ * Class TopBarActionURL
+ *
+ * @package Combodo\iTop\Application\UI\Base\Layout\TopBar\TopBarAction
+ * @internal
+ * @since 3.3.0
+ */
+class TopBarQuickActionURL extends TopBarQuickAction
+{
+	use tActionURL;
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-url';
+}
diff --git a/sources/Application/UI/Base/UIBlock.php b/sources/Application/UI/Base/UIBlock.php
index 1197ad3cc1..f8f7a7d594 100644
--- a/sources/Application/UI/Base/UIBlock.php
+++ b/sources/Application/UI/Base/UIBlock.php
@@ -145,6 +145,8 @@ abstract class UIBlock implements iUIBlock
 	protected $aCssFilesRelPath = [];
 	/** @var array Array <KEY> => <VALUE> which will be output as HTML data-xxx attributes (eg. data-<KEY>="<VALUE>") */
 	protected $aDataAttributes = [];
+	/** @var array Array <KEY> => <VALUE> which will be output as HTML aria-xxx attributes (eg. aria-<KEY>="<VALUE>") */
+	protected $aAriaAttributes = [];
 	/** @var bool Whether the current block is shown or hidden */
 	protected $bIsHidden;
 	/** @var array Additional CSS classes to put on the block */
@@ -622,6 +624,67 @@ abstract class UIBlock implements iUIBlock
 		return !empty($this->aDataAttributes);
 	}
 
+	/**
+	 * @return array
+	 * @see static::$aAriaAttributes
+	 * @since 3.3.0
+	 */
+	public function GetAriaAttributes(): array
+	{
+		return $this->aAriaAttributes;
+	}
+
+	/**
+	 * @param array $aAriaAttributes Array of aria attributes in the format ['name' => 'value']
+	 *
+	 * @return $this
+	 * @see static::$aAriaAttributes
+	 * @since 3.3.0
+	 */
+	public function SetAriaAttributes(array $aAriaAttributes)
+	{
+		$this->aAriaAttributes = $aAriaAttributes;
+
+		return $this;
+	}
+
+	/**
+	 * @param string $sName
+	 * @param string $sValue
+	 *
+	 * @return $this
+	 * @see static::$aAriaAttributes
+	 * @since 3.3.0
+	 */
+	public function AddAriaAttribute(string $sName, string $sValue)
+	{
+		$this->aAriaAttributes[$sName] = $sValue;
+
+		return $this;
+	}
+
+	/**
+	 * @param string $sName Name of the aria attribute
+	 *
+	 * @return bool True if $sName is already defined (even as a null value) in the UIBlock aria attributes, false otherwise
+	 * @see static::$aAriaAttributes
+	 * @since 3.3.0
+	 */
+	public function HasAriaAttribute(string $sName): bool
+	{
+		return array_key_exists($sName, $this->aAriaAttributes);
+	}
+
+	/**
+	 * @return bool
+	 * @see static::$aAriaAttributes
+	 * @since 3.3.0
+	 */
+	public function HasAriaAttributes(): bool
+	{
+		return !empty($this->aAriaAttributes);
+	}
+
 	/**
 	 * @return bool
 	 * @see static::$bIsHidden
diff --git a/templates/base/components/button-bar/layout.html.twig b/templates/base/components/button-bar/layout.html.twig
new file mode 100644
index 0000000000..3f19ad5b55
--- /dev/null
+++ b/templates/base/components/button-bar/layout.html.twig
@@ -0,0 +1,19 @@
+<ibo-button-bar id="{{ oUIBlock.GetId() }}" class="ibo-button-bar {{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-button-bar"
+	{% if oUIBlock.GetDataAttributes() %}
+		{% for sName, sValue in oUIBlock.GetDataAttributes() %}
+			data-{{ sName }}="{{ sValue }}"
+		{% endfor %}
+	{% endif %}
+>
+	<div class="ibo-button-bar--track" data-role="ibo-button-bar--track">
+		{% for oButton in oUIBlock.GetButtons() %}
+			<div class="ibo-button-bar--item" data-role="ibo-button-bar--item" data-overflow-item-id="{{ oUIBlock.GetOverflowItemIdFromBlockId(oButton.GetId()) }}" data-source-button-id="{{ oButton.GetId() }}"{% if oUIBlock.IsOverflowStartAfterButton(oButton.GetId()) %} data-overflow-start-after="1"{% endif %}>
+				{{ render_block(oButton, {aPage: aPage}) }}
+			</div>
+		{% endfor %}
+	</div>
+	<div class="ibo-button-bar--extra" data-role="ibo-button-bar--extra" >
+        {{ render_block(oUIBlock.GetPopoverMenu(), {aPage: aPage}) }}
+		{{ render_block(oUIBlock.GetOverflowTogglerButton(), {aPage: aPage}) }}
+	</div>
+</ibo-button-bar>
\ No newline at end of file
diff --git a/templates/base/components/button/buttonjs.html.twig b/templates/base/components/button/buttonjs.html.twig
index 14523a63e6..54ee1ec138 100644
--- a/templates/base/components/button/buttonjs.html.twig
+++ b/templates/base/components/button/buttonjs.html.twig
@@ -1,4 +1,3 @@
-{% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
         class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
         data-role="ibo-button"
@@ -7,6 +6,11 @@
                 data-{{ sName }}="{{ sValue }}"
             {% endfor %}
         {% endif %}
+        {% if oUIBlock.GetAriaAttributes() %}
+            {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+                    aria-{{ sName }}="{{ sValue }}"
+            {% endfor %}
+        {% endif %}
         type="{{ oUIBlock.GetType() }}"
         name="{{ oUIBlock.GetName() }}"
         value="{{ oUIBlock.GetValue() }}"
@@ -17,10 +21,6 @@
         {% else %}
             title="{{ oUIBlock.GetLabel() }}"
         {% endif %}
-        {# ... and accessibility title. Important especially in case the button has no label, but only an icon #}
-        {% if sAriaLabel is not empty %}
-            aria-label="{{ sAriaLabel }}"
-        {% endif %}
 >
     <span class="ibo-button--loading-icon fas fa-spinner fa-pulse"></span>
     {% if oUIBlock.GetIconClass() is not empty %}
diff --git a/templates/base/components/button/buttonurl.html.twig b/templates/base/components/button/buttonurl.html.twig
index 6575c39803..449a4040e2 100644
--- a/templates/base/components/button/buttonurl.html.twig
+++ b/templates/base/components/button/buttonurl.html.twig
@@ -1,4 +1,3 @@
-{% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <a id="{{ oUIBlock.GetId() }}"
         class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
         data-role="ibo-button"
@@ -7,6 +6,11 @@
                 data-{{ sName }}="{{ sValue }}"
             {% endfor %}
         {% endif %}
+        {% if oUIBlock.GetAriaAttributes() %}
+            {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+                    aria-{{ sName }}="{{ sValue }}"
+            {% endfor %}
+        {% endif %}
         href="{{ oUIBlock.GetURL() }}"
         target="{{ oUIBlock.GetTarget() }}"
         {# Visual tooltip... #}
@@ -15,10 +19,6 @@
         {% else %}
             title="{{ oUIBlock.GetLabel() }}"
         {% endif %}
-        {# ... and accessibility title. Important especially in case the button has no label, but only an icon #}
-        {% if sAriaLabel is not empty %}
-            aria-label="{{ sAriaLabel }}"
-        {% endif %}
 >
     <span class="ibo-button--loading-icon fas fa-spinner fa-pulse"></span>
     {% if oUIBlock.GetIconClass() is not empty %}
diff --git a/templates/base/components/button/layout.html.twig b/templates/base/components/button/layout.html.twig
index b047d21a11..6b615f4801 100644
--- a/templates/base/components/button/layout.html.twig
+++ b/templates/base/components/button/layout.html.twig
@@ -1,4 +1,4 @@
-{% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
+{% set sAriaLabel = oUIBlock.HasAriaAttribute('label') ? oUIBlock.GetAriaAttributes()['label'] : (oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '')) %}
 <button id="{{ oUIBlock.GetId() }}"
         class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
         data-role="ibo-button"
@@ -7,6 +7,11 @@
                         data-{{ sName }}="{{ sValue }}"
                 {% endfor %}
         {% endif %}
+        {% if oUIBlock.GetAriaAttributes() %}
+            {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+                    aria-{{ sName }}="{{ sValue }}"
+            {% endfor %}
+        {% endif %}
         {% if oUIBlock.IsDisabled() %} disabled {% endif %}
         {# Visual tooltip... #}
         {% if oUIBlock.GetTooltip() is not empty %}
@@ -14,11 +19,6 @@
         {% else %}
             title="{{ oUIBlock.GetLabel() }}"
         {% endif %}
-        {# ... and accessibility title. Important especially in case the button has no label, but only an icon #}
-        {% if sAriaLabel is not empty %}
-            aria-label="{{ sAriaLabel }}"
-        {% endif %}
-
 >
     <span class="ibo-button--loading-icon fas fa-spinner fa-pulse"></span>
     {% if oUIBlock.GetIconClass() is not empty %}
diff --git a/templates/base/components/button/separator/layout.html.twig b/templates/base/components/button/separator/layout.html.twig
new file mode 100644
index 0000000000..f7afc81e62
--- /dev/null
+++ b/templates/base/components/button/separator/layout.html.twig
@@ -0,0 +1,15 @@
+{# @copyright   Copyright (C) 2010-2026 Combodo SAS #}
+{# @license     http://opensource.org/licenses/AGPL-3.0 #}
+{% apply spaceless %}
+    <span id="{{ oUIBlock.GetId() }}"
+          class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }}
+             {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}
+             {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+          data-role="ibo-button-separator"
+          {% if oUIBlock.GetDataAttributes() %}
+              {% for sName, sValue in oUIBlock.GetDataAttributes() %}
+                  data-{{ sName }}="{{ sValue }}"
+              {% endfor %}
+          {% endif %}>
+    </span>
+{% endapply %}
diff --git a/templates/base/components/field/layout.html.twig b/templates/base/components/field/layout.html.twig
index fb7a858f6d..67e3da9bc2 100644
--- a/templates/base/components/field/layout.html.twig
+++ b/templates/base/components/field/layout.html.twig
@@ -26,6 +26,13 @@
         {% if oUIBlock.HasDescription() %}
             <span class="ibo-has-description" data-tooltip-content="{{ oUIBlock.GetDescription() }}" data-tooltip-max-width="600px" ></span>
         {% endif %}
+        {% if oUIBlock.HasActions() %}
+            <span class="ibo-field--actions">
+            {% for oAction in oUIBlock.GetActions() %}
+                {{ render_block(oAction, {aPage: aPage}) }}
+            {% endfor %}
+            </span>
+        {% endif %}
         {% if oUIBlock.GetLayout() == constant("Combodo\\iTop\\Application\\UI\\Base\\Component\\Field\\Field::ENUM_FIELD_LAYOUT_LARGE") %}
             {% if oUIBlock.GetComments() %}
                 <div class="ibo-field--comments">{{ oUIBlock.GetComments()|raw }}</div>
@@ -33,7 +40,10 @@
         {% endif %}
     </div>
     <div class="ibo-field--value" {% if oUIBlock.GetValueId() %}id="{{ oUIBlock.GetValueId() }}"{% endif %}>
-        {% for oSubBlock in oUIBlock.GetSubBlocks() %}
+        {% if oUIBlock.HasValue() %}
+            {{ render_block(oUIBlock.GetValue(), {aPage: aPage}) }}
+        {% endif %}
+        {% for oSubBlock in oUIBlock.GetAdditionalSubBlocks() %}
             {{ render_block(oSubBlock, {aPage: aPage}) }}
         {% endfor %}
     </div>
diff --git a/templates/base/components/popover-menu/item/mode_js.html.twig b/templates/base/components/popover-menu/item/mode_js.html.twig
index 8c8452a9e1..4b436feb76 100644
--- a/templates/base/components/popover-menu/item/mode_js.html.twig
+++ b/templates/base/components/popover-menu/item/mode_js.html.twig
@@ -7,6 +7,11 @@
                     data-{{ sName }}="{{ sValue }}"
                 {% endfor %}
             {% endif %}
+            {% if oUIBlock.GetAriaAttributes() %}
+                {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+                    aria-{{ sName }}="{{ sValue }}"
+                {% endfor %}
+            {% endif %}
             {% if oUIBlock.GetTooltip() is not empty %}
                 data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
             {% endif %}
diff --git a/templates/base/components/popover-menu/item/mode_separator.html.twig b/templates/base/components/popover-menu/item/mode_separator.html.twig
index d95cdc7370..05de387164 100644
--- a/templates/base/components/popover-menu/item/mode_separator.html.twig
+++ b/templates/base/components/popover-menu/item/mode_separator.html.twig
@@ -6,5 +6,10 @@
                     data-{{ sName }}="{{ sValue }}"
                 {% endfor %}
             {% endif %}
+            {% if oUIBlock.GetAriaAttributes() %}
+                {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+                    aria-{{ sName }}="{{ sValue }}"
+                {% endfor %}
+            {% endif %}
     >
 {% endblock %}
\ No newline at end of file
diff --git a/templates/base/components/popover-menu/item/mode_url.html.twig b/templates/base/components/popover-menu/item/mode_url.html.twig
index 79b375db01..a37394d1e6 100644
--- a/templates/base/components/popover-menu/item/mode_url.html.twig
+++ b/templates/base/components/popover-menu/item/mode_url.html.twig
@@ -7,6 +7,11 @@
                     data-{{ sName }}="{{ sValue }}"
                 {% endfor %}
             {% endif %}
+            {% if oUIBlock.GetAriaAttributes() %}
+                {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+                    aria-{{ sName }}="{{ sValue }}"
+                {% endfor %}
+            {% endif %}
             {% if oUIBlock.GetTooltip() is not empty %}
                 data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
             {% endif %}
@@ -17,4 +22,3 @@
         {{ oUIBlock.GetLabel() }}
     </a>
 {% endblock %}
-
diff --git a/templates/base/layouts/activity-panel/activity-action/activity-action-js.html.twig b/templates/base/layouts/activity-panel/activity-action/activity-action-js.html.twig
new file mode 100644
index 0000000000..4d75ad3034
--- /dev/null
+++ b/templates/base/layouts/activity-panel/activity-action/activity-action-js.html.twig
@@ -0,0 +1,27 @@
+<a href="{{ oUIBlock.GetUrl() }}"
+   id="{{ oUIBlock.GetId() }}"
+   class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-activity-panel--activity-action"
+   data-role="ibo-activity-panel--activity-action"
+   data-uid="{{ oUIBlock.GetUID() }}"
+   {% if oUIBlock.GetDataAttributes() %}
+       {% for sName, sValue in oUIBlock.GetDataAttributes() %}
+          data-{{ sName }}="{{ sValue }}"
+       {% endfor %}
+   {% endif %}
+       {% if oUIBlock.GetAriaAttributes() %}
+       {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+       aria-{{ sName }}="{{ sValue }}"
+       {% endfor %}
+   {% endif %}
+   {% if oUIBlock.GetTooltip() is not empty %}
+   data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+   {% endif %}
+>
+    {% if oUIBlock.GetIconClass() is not empty %}
+        <i class="{{ oUIBlock.GetIconClass() }}"></i>
+    {% endif %}
+{#    <span>{{ oUIBlock.GetLabel() }}</span>#}
+</a>
+{% if oUIBlock.HasPopoverMenu() %}
+    {{ render_block(oUIBlock.GetPopoverMenu()) }}
+{% endif %}
diff --git a/templates/base/layouts/activity-panel/activity-action/activity-action-separator.html.twig b/templates/base/layouts/activity-panel/activity-action/activity-action-separator.html.twig
new file mode 100644
index 0000000000..387bdc0505
--- /dev/null
+++ b/templates/base/layouts/activity-panel/activity-action/activity-action-separator.html.twig
@@ -0,0 +1,5 @@
+<span id="{{ oUIBlock.GetId() }}"
+      class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-activity-panel--activity-action-separator"
+      data-role="ibo-activity-panel--activity-action-separator"
+      data-uid="{{ oUIBlock.GetUID() }}">
+</span>
diff --git a/templates/base/layouts/activity-panel/activity-action/activity-action-url.html.twig b/templates/base/layouts/activity-panel/activity-action/activity-action-url.html.twig
new file mode 100644
index 0000000000..9564cd3629
--- /dev/null
+++ b/templates/base/layouts/activity-panel/activity-action/activity-action-url.html.twig
@@ -0,0 +1,27 @@
+<a href="{{ oUIBlock.GetUrl() }}"
+   id="{{ oUIBlock.GetId() }}"
+   class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-activity-panel--activity-action"
+   data-role="ibo-activity-panel--activity-action"
+   data-uid="{{ oUIBlock.GetUID() }}"
+   {% if oUIBlock.GetDataAttributes() %}
+   {% for sName, sValue in oUIBlock.GetDataAttributes() %}
+   data-{{ sName }}="{{ sValue }}"
+   {% endfor %}
+   {% endif %}
+   {% if oUIBlock.GetAriaAttributes() %}
+   {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+   aria-{{ sName }}="{{ sValue }}"
+   {% endfor %}
+   {% endif %}
+   {% if oUIBlock.GetTooltip() is not empty %}
+   data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+   {% endif %}
+>
+    {% if oUIBlock.GetIconClass() is not empty %}
+        <i class="{{ oUIBlock.GetIconClass() }}"></i>
+    {% endif %}
+{#    <span>{{ oUIBlock.GetLabel() }}</span>#}
+</a>
+{% if oUIBlock.HasPopoverMenu() %}
+    {{ render_block(oUIBlock.GetPopoverMenu()) }}
+{% endif %}
\ No newline at end of file
diff --git a/templates/base/layouts/activity-panel/caselog-entry-form/layout.html.twig b/templates/base/layouts/activity-panel/caselog-entry-form/layout.html.twig
index d37355314b..5bf2a71f95 100644
--- a/templates/base/layouts/activity-panel/caselog-entry-form/layout.html.twig
+++ b/templates/base/layouts/activity-panel/caselog-entry-form/layout.html.twig
@@ -14,9 +14,7 @@
     <div class="ibo-caselog-entry-form--actions">
         <div class="ibo-caselog-entry-form--action-buttons--extra-actions"
              data-role="ibo-caselog-entry-form--action-buttons--extra-actions">
-            {% for TextInputActionButton in oUIBlock.GetExtraActionButtons() %}
-                {{ render_block(TextInputActionButton, {aPage: aPage}) }}
-            {% endfor %}
+            {{ render_block(oUIBlock.GetExtraActionButtonBar(), {aPage: aPage}) }}
         </div>
         <div class="ibo-caselog-entry-form--action-buttons--main-actions" data-role="ibo-caselog-entry-form--action-buttons--main-actions">
             {% for FormActionButton in oUIBlock.GetMainActionButtons() %}
diff --git a/templates/base/layouts/activity-panel/layout.html.twig b/templates/base/layouts/activity-panel/layout.html.twig
index e8f12b14a4..dcfc7d776f 100644
--- a/templates/base/layouts/activity-panel/layout.html.twig
+++ b/templates/base/layouts/activity-panel/layout.html.twig
@@ -71,6 +71,13 @@
             </div>
         </div>
     </div>
+    {% if oUIBlock.HasActivityActions() %}
+        <div class="ibo-activity-panel--activity-actions" data-role="ibo-activity-panel--activity-actions">
+            {% for oActivityAction in oUIBlock.GetActivityActions() %}
+                {{ render_block(oActivityAction) }}
+            {% endfor %}
+        </div>
+    {% endif %}
     {% if oUIBlock.IsComposeButtonEnabled() %}
         <a href="#"
            id="ibo-activity-panel--add-caselog-entry-button"
diff --git a/templates/base/layouts/top-bar/layout.html.twig b/templates/base/layouts/top-bar/layout.html.twig
index 161ebff348..534159f5dc 100644
--- a/templates/base/layouts/top-bar/layout.html.twig
+++ b/templates/base/layouts/top-bar/layout.html.twig
@@ -6,6 +6,9 @@
 		{% if oUIBlock.HasGlobalSearch() %}
 			{{ render_block(oUIBlock.GetGlobalSearch(), {aPage: aPage}) }}
 		{% endif %}
+        {% for oAction in oUIBlock.GetQuickActions() %}
+            {{ render_block(oAction, {aPage: aPage}) }}
+        {% endfor %}
 	</div>
 	{% if oUIBlock.HasBreadcrumbs() %}
 		{{ render_block(oUIBlock.GetBreadcrumbs(), {aPage: aPage}) }}
diff --git a/templates/base/layouts/top-bar/top-bar-quick-action/layout.html.twig b/templates/base/layouts/top-bar/top-bar-quick-action/layout.html.twig
new file mode 100644
index 0000000000..eee34517ef
--- /dev/null
+++ b/templates/base/layouts/top-bar/top-bar-quick-action/layout.html.twig
@@ -0,0 +1,31 @@
+{% block iboTopBarQuickAction %}
+    <div id="{{ oUIBlock.GetId() }}"
+         class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}"
+         data-role="ibo-top-bar-quick-action">
+        <div class="ibo-top-bar-quick-action--head" data-role="ibo-top-bar-quick-action--head">
+            <a href="{{ oUIBlock.GetURL() }}" class="ibo-top-bar-quick-action--icon" data-role="ibo-top-bar-quick-action--icon"
+                    {% block iboTopBarQuickActionIconCustomAttributes %}{% endblock %}
+               data-uid="{{ oUIBlock.GetUID() }}"
+                    {% if oUIBlock.GetDataAttributes() %}
+                        {% for sName, sValue in oUIBlock.GetDataAttributes() %}
+                            data-{{ sName }}="{{ sValue }}"
+                        {% endfor %}
+                    {% endif %}
+                    {% if oUIBlock.GetAriaAttributes() %}
+                        {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+                            aria-{{ sName }}="{{ sValue }}"
+                        {% endfor %}
+                    {% endif %}
+                    {% block iboTopBarQuickActionIconTooltipAttributes %}
+                        data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
+                        data-tooltip-placement="bottom-start"
+                        data-tooltip-distance-offset="25"
+                    {% endblock %}
+            >
+                {% block iboTopBarQuickActionIcon %}
+                    <span class="{{ oUIBlock.GetIconClass() }}"></span>
+                {% endblock %}
+            </a>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js.html.twig b/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js.html.twig
new file mode 100644
index 0000000000..84aa63bc67
--- /dev/null
+++ b/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js.html.twig
@@ -0,0 +1 @@
+{% extends 'base/layouts/top-bar/top-bar-quick-action/layout.html.twig' %}
\ No newline at end of file
diff --git a/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js.js.twig b/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js.js.twig
new file mode 100644
index 0000000000..298b0f234e
--- /dev/null
+++ b/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-js.js.twig
@@ -0,0 +1,4 @@
+$('#{{ oUIBlock.GetId() }} [data-role="ibo-top-bar-quick-action--icon"]').on('click', function (event) {
+    event.preventDefault();
+    {{ oUIBlock.GetJsCode()|raw }}
+});
\ No newline at end of file
diff --git a/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-separator.html.twig b/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-separator.html.twig
new file mode 100644
index 0000000000..068fc9278d
--- /dev/null
+++ b/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-separator.html.twig
@@ -0,0 +1,16 @@
+<div id="{{ oUIBlock.GetId() }}"
+     class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-top-bar-quick-action-separator"
+     data-role="ibo-top-bar-quick-action-separator"
+     data-uid="{{ oUIBlock.GetUID() }}"
+     {% if oUIBlock.GetDataAttributes() %}
+         {% for sName, sValue in oUIBlock.GetDataAttributes() %}
+             data-{{ sName }}="{{ sValue }}"
+         {% endfor %}
+     {% endif %}
+     {% if oUIBlock.GetAriaAttributes() %}
+         {% for sName, sValue in oUIBlock.GetAriaAttributes() %}
+             aria-{{ sName }}="{{ sValue }}"
+         {% endfor %}
+     {% endif %}
+>
+</div>
diff --git a/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-url.html.twig b/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-url.html.twig
new file mode 100644
index 0000000000..f5fd4a197c
--- /dev/null
+++ b/templates/base/layouts/top-bar/top-bar-quick-action/top-bar-quick-action-url.html.twig
@@ -0,0 +1,5 @@
+{% extends 'base/layouts/top-bar/top-bar-quick-action/layout.html.twig' %}
+
+{% block iboTopBarQuickActionIconCustomAttributes %}
+    target="{{ oUIBlock.GetTarget() }}"
+{% endblock %}
\ No newline at end of file
diff --git a/tests/manual-visual-tests/Backoffice/RenderAllUiBlocks.php b/tests/manual-visual-tests/Backoffice/RenderAllUiBlocks.php
index c84bb8eabf..034efecd5e 100644
--- a/tests/manual-visual-tests/Backoffice/RenderAllUiBlocks.php
+++ b/tests/manual-visual-tests/Backoffice/RenderAllUiBlocks.php
@@ -22,636 +22,1346 @@
 
 namespace Combodo\iTop\Test\VisualTest\Backoffice;
 
-use Combodo\iTop\Application\Branding;
 use Combodo\iTop\Application\UI\Base\Component\Alert\AlertUIBlockFactory;
-use Combodo\iTop\Application\UI\Base\Component\Badge\Badge;
 use Combodo\iTop\Application\UI\Base\Component\Badge\BadgeUIBlockFactory;
-use Combodo\iTop\Application\UI\Base\Component\Button\Button;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonSeparator;
 use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\ButtonBar\ButtonBarUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroup;
 use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroupUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\CollapsibleSection\CollapsibleSection;
 use Combodo\iTop\Application\UI\Base\Component\DataTable\DataTableUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Field\FieldUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\FieldSet\FieldSet;
+use Combodo\iTop\Application\UI\Base\Component\FieldSet\FieldSetUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Html\Html;
+use Combodo\iTop\Application\UI\Base\Component\Html\HtmlFactory;
 use Combodo\iTop\Application\UI\Base\Component\Input\InputUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Input\Set\SetUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Input\Toggler;
-use Combodo\iTop\Application\UI\Base\Component\Panel\Panel;
 use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Pill\PillFactory;
 use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
 use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
 use Combodo\iTop\Application\UI\Base\Component\Title\TitleUIBlockFactory;
-use Combodo\iTop\Application\UI\Base\Layout\Extension\ExtensionDetails;
 use Combodo\iTop\Application\UI\Base\Layout\Extension\ExtensionDetailsUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Layout\iUIContentBlock;
 use Combodo\iTop\Application\UI\Base\Layout\MultiColumn\Column\Column;
 use Combodo\iTop\Application\UI\Base\Layout\MultiColumn\MultiColumn;
 use Combodo\iTop\Application\UI\Base\Layout\Object\ObjectFactory;
 use Combodo\iTop\Application\UI\Base\Layout\PageContent\PageContentFactory;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockUIBlockFactory;
-use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockWithJSRefreshCallback;
 use Combodo\iTop\Application\WebPage\iTopWebPage;
-use JSButtonItem;
 use LoginWebPage;
 use MetaModel;
+use URLPopupMenuItem;
 
 require_once '../../../approot.inc.php';
 require_once APPROOT.'application/startup.inc.php';
 
-LoginWebPage::DoLogin(); // Dependency for collapsible element with state saved, to get user pref
+class RenderAllUiBlocksPage extends iTopWebPage
+{
+	public function __construct()
+	{
+		parent::__construct('Blocks Components Library');
+		$this->InitLayout();
+		$this->InitAssets();
+		$this->BuildPageContent();
+	}
 
-$oPage = new iTopWebPage('Render all UI blocks');
-$oPageContentLayout = PageContentFactory::MakeStandardEmpty();
-$oPage->SetContentLayout($oPageContentLayout);
+	private function InitLayout(): void
+	{
+		$oPageMainLayout = PageContentFactory::MakeStandardEmpty();
+		$this->SetContentLayout($oPageMainLayout);
+	}
 
-$oPage->add_style(
-	<<<CSS
+	private function InitAssets(): void
+	{
+		$this->LinkStylesheetFromAppRoot('js/highlight/styles/github.min.css');
+		$this->LinkScriptFromAppRoot('js/highlight/highlight.min.js');
+		$this->add_ready_script(
+			<<<'JS'
+(function() {
+	if (!window.hljs) {
+		return;
+	}
+
+	const aCodeBlocks = document.querySelectorAll('.ibo-is-code pre, .ibo-is-code code');
+	aCodeBlocks.forEach((oBlock) => {
+		if (window.hljs.highlightElement) {
+			window.hljs.highlightElement(oBlock);
+			return;
+		}
+		if (window.hljs.highlightBlock) {
+			window.hljs.highlightBlock(oBlock);
+		}
+	});
+
+	const copyTextToClipboard = async (sText) => {
+		if (navigator.clipboard && window.isSecureContext) {
+			await navigator.clipboard.writeText(sText);
+			return;
+		}
+
+		const oTextArea = document.createElement('textarea');
+		oTextArea.value = sText;
+		oTextArea.style.position = 'fixed';
+		oTextArea.style.left = '-9999px';
+		document.body.appendChild(oTextArea);
+		oTextArea.focus();
+		oTextArea.select();
+		document.execCommand('copy');
+		document.body.removeChild(oTextArea);
+	};
+
+	aCodeBlocks.forEach((oBlock) => {
+		if (oBlock.dataset.copyButtonInjected === '1') {
+			return;
+		}
+
+		oBlock.dataset.copyButtonInjected = '1';
+		const oWrapper = document.createElement('div');
+		oWrapper.className = 'ibo-code-copy-wrapper';
+		oBlock.parentNode.insertBefore(oWrapper, oBlock);
+		oWrapper.appendChild(oBlock);
+
+		const oButton = document.createElement('button');
+		oButton.type = 'button';
+		oButton.className = 'ibo-code-copy-button ibo-button  ibo-block ibo-is-regular ';
+		oButton.textContent = 'Copier';
+		oButton.addEventListener('click', async () => {
+			try {
+				await copyTextToClipboard(oBlock.innerText || oBlock.textContent || '');
+				oButton.textContent = 'Copiee';
+			} catch (e) {
+				oButton.textContent = 'Echec';
+			}
+			setTimeout(() => {
+				oButton.textContent = 'Copier';
+			}, 1200);
+		});
+
+		oWrapper.appendChild(oButton);
+	});
+})();
+JS
+		);
+
+		$this->add_style(<<<CSS
+body{
+	color: var(--ibo-body-text-color);
+}
 hr {
 	background-color: var(--ibo-color-grey-950);
 }
-CSS
-);
+.ibo-code-copy-wrapper {
+	position: relative;
+}
+.ibo-code-copy-button {
+	position: absolute;
+	top: 0.4rem;
+	right: 0.4rem;
+	z-index: 1;
+}
+.ibo-code-copy-button:hover {
+	background: var(--ibo-color-grey-200);
+}
+.ibo-render-all--two-col-row {
+	margin-bottom: 1rem;
+}
+CSS);
+	}
 
-$oMainTitle = new Html('<h1>All UI blocks examples</h1>');
-$oPage->AddUiBlock($oMainTitle);
+	private function AddCreationCodeSnippet(iUIContentBlock $oBlock, string $sCode, string $sLanguage = 'language-php'): void
+	{
+		$oBlock->AddSubBlock(
+			UIContentBlockUIBlockFactory::MakeForPreformatted(trim($sCode))
+				->AddCSSClass($sLanguage)
+		);
+	}
 
-$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
-$oPage->add('<a href="#page_bottom">Go to bottom of the page</a>');
-/////////
-// Alerts
-/////////
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Alerts examples', 2, 'title-alert'));
-$sContent = <<<HTML
+	private function AddElementWithSnippet(iUIContentBlock $oBlock, $oElement, string $sCode, string $sLanguage = 'language-php'): void
+	{
+		$oBlock->AddSubBlock($oElement);
+		$this->AddCreationCodeSnippet($oBlock, $sCode, $sLanguage);
+	}
+
+	private function BuildPageContent(): void
+	{
+		// panel
+		$oPanel = PanelUIBlockFactory::MakeForInformation($this->s_title, 'This page is a visual test for all the UI blocks available in iTop. It is not meant to be used in production.');
+		$this->AddSubBlock($oPanel);
+
+		// tabs host
+		$oTabsHost = UIContentBlockUIBlockFactory::MakeStandard('render-all-tabs-host');
+		$this->AddTabContainer('render-all-tabs', '', $oTabsHost);
+		$this->SetCurrentTabContainer('render-all-tabs');
+		$oPanel->AddSubBlock($oTabsHost);
+
+		// titles
+		$this->SetCurrentTab('tab-titles', 'Titles');
+		$this->RenderTitleSizeSection();
+		$this->RenderTitleAlternativeSection();
+
+		// pills
+		$this->SetCurrentTab('tab-pills', 'Pills');
+		$this->RenderPillSection();
+
+		// badges
+		$this->SetCurrentTab('tab-badges', 'Badges');
+		$this->RenderBadgesSection();
+
+		// buttons
+		$this->SetCurrentTab('tab-buttons', 'Buttons');
+		$this->RenderButtonsSection();
+		$this->RenderTogglerSection();
+		$this->RenderButtonGroupsSection();
+		$this->RenderButtonBarsSection();
+
+		// panels
+		$this->SetCurrentTab('tab-panels', 'Panels');
+		$this->RenderPanelsSection();
+		$this->RenderMultiColumns();
+		$this->RenderCollapsibleSection();
+		$this->RenderFieldsetSection();
+
+		// alerts
+		$this->SetCurrentTab('tab-alerts', 'Alerts');
+		$this->RenderAlertsBasicSection();
+		$this->RenderAlertsBrandingSection();
+		$this->RenderAlertsBehaviourSection();
+
+		// sets
+		$this->SetCurrentTab('tab-sets', 'Sets');
+		$this->RenderSetSection();
+
+		// tables
+		$this->SetCurrentTab('tab-tables', 'Tables');
+		$this->RenderDatatableSection();
+
+		// code
+		$this->SetCurrentTab('tab-codes', 'CodeBlocks');
+		$this->RenderCodeSection();
+
+		// functional
+		$this->SetCurrentTab('tab-functional', 'Functional');
+		$this->RenderObjectDetailsSection();
+		$this->RenderExtensionsSection();
+	}
+
+	private function RenderAlertsBasicSection(): void
+	{
+		$oFieldsSet = FieldSetUIBlockFactory::MakeStandard('Basic');
+
+		$sContent = <<<HTML
+<div>The content text is made of raw HTML, therefore it must be sanitized before being injected into the component.</div>
+<div>Here we put an hyperlink (<a href="#">link</a>) and a smiley (😻), just to see if it renders correctly</div>
+HTML;
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeNeutral(sTitle: 'Neutral alert', sContent: $sContent),
+			<<<'PHP'
+AlertUIBlockFactory::MakeNeutral(sTitle: 'Neutral alert', sContent: $sContent);
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeForInformation(sTitle: 'Alert for information', sContent: $sContent),
+			<<<'PHP'
+AlertUIBlockFactory::MakeForInformation(sTitle: 'Alert for information', sContent: $sContent);
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeForSuccess(sTitle: 'Alert for success', sContent: $sContent),
+			<<<'PHP'
+AlertUIBlockFactory::MakeForSuccess(sTitle: 'Alert for success', sContent: $sContent);
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeForWarning(sTitle: 'Alert for warning', sContent: $sContent),
+			<<<'PHP'
+AlertUIBlockFactory::MakeForWarning(sTitle: 'Alert for warning', sContent: $sContent);
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeForDanger(sTitle: 'Alert for danger', sContent: $sContent),
+			<<<'PHP'
+AlertUIBlockFactory::MakeForDanger(sTitle: 'Alert for danger', sContent: $sContent);
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeForFailure(sTitle: 'Alert for failure', sContent: $sContent),
+			<<<'PHP'
+AlertUIBlockFactory::MakeForFailure(sTitle: 'Alert for failure', sContent: $sContent);
+PHP
+		);
+		$this->AddUiBlock($oFieldsSet);
+	}
+
+	private function RenderAlertsBrandingSection(): void
+	{
+		$oFieldsSet = FieldSetUIBlockFactory::MakeStandard('Basic');
+
+		$sContent = <<<HTML
 <div>The content text is made of raw HTML, therefore it must be sanitized before being injected into the component.</div>
 <div>Here we put an hyperlink (<a href="#">link</a>) and a smiley (😻), just to see if it renders correctly</div>
 HTML;
 
-$oPageContentLayout->AddMainBlock(AlertUIBlockFactory::MakeNeutral('Neutral alert', $sContent));
-$oPageContentLayout->AddMainBlock(AlertUIBlockFactory::MakeForInformation('Alert for information', $sContent));
-$oPageContentLayout->AddMainBlock(AlertUIBlockFactory::MakeForSuccess('Alert for success', $sContent));
-$oPageContentLayout->AddMainBlock(AlertUIBlockFactory::MakeForWarning('Alert for warning', $sContent));
-$oPageContentLayout->AddMainBlock(AlertUIBlockFactory::MakeForDanger('Alert for danger', $sContent));
-$oPageContentLayout->AddMainBlock(AlertUIBlockFactory::MakeForFailure('Alert for failure', $sContent));
-$oPageContentLayout->AddMainBlock(AlertUIBlockFactory::MakeWithBrandingPrimaryColor('Alert with branding primary color', $sContent));
-$oPageContentLayout->AddMainBlock(AlertUIBlockFactory::MakeWithBrandingSecondaryColor('Alert with branding secondary color', $sContent));
-$oAlertNonClosable = AlertUIBlockFactory::MakeNeutral('Alert not closable, not collapsable', $sContent)
-	->SetIsClosable(false)
-	->SetIsCollapsible(false);
-$oPageContentLayout->AddMainBlock($oAlertNonClosable);
-$oAlertCollapsibleNotClosable = AlertUIBlockFactory::MakeNeutral('Alert collapsible but nos closable', $sContent)
-	->SetIsClosable(false);
-$oPageContentLayout->AddMainBlock($oAlertCollapsibleNotClosable);
-$oAlertSaveCollapsibleState = AlertUIBlockFactory::MakeNeutral('Alert with collapsible state saving', $sContent)
-	->EnableSaveCollapsibleState('RenderAllUiBlocks-alert');
-$oPageContentLayout->AddMainBlock($oAlertSaveCollapsibleState);
+		$oFieldsSet = FieldSetUIBlockFactory::MakeStandard('Branding colors');
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeWithBrandingPrimaryColor(sTitle: 'Alert with branding primary color', sContent: $sContent),
+			<<<'PHP'
+AlertUIBlockFactory::MakeWithBrandingPrimaryColor(sTitle: 'Alert with branding primary color', sContent: $sContent);
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeWithBrandingSecondaryColor(sTitle: 'Alert with branding secondary color', sContent: $sContent),
+			<<<'PHP'
+AlertUIBlockFactory::MakeWithBrandingSecondaryColor(sTitle: 'Alert with branding secondary color', sContent: $sContent);
+PHP
+		);
+		$this->AddUiBlock($oFieldsSet);
+	}
 
-$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
+	private function RenderAlertsBehaviourSection(): void
+	{
+		$oFieldsSet = FieldSetUIBlockFactory::MakeStandard('Behaviors');
+		$this->AddUiBlock($oFieldsSet);
 
-//////////
-// Buttons
-//////////
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('ButtonsJS examples', 2, 'title-buttonsjs'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeNeutral('Neutral'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeNeutral('Neutral dis.', 'neutral')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForPrimaryAction('Primary'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForPrimaryAction('Primary dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForSecondaryAction('Secondary'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForSecondaryAction('Secondary dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForPositiveAction('Validation'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForPositiveAction('Validation dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForDestructiveAction('Destructive'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForDestructiveAction('Destructive dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeAlternativeNeutral('Alt. neutral'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeAlternativeNeutral('Alt. neutral dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativePrimaryAction('Alt. primary'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativePrimaryAction('Alt. primary dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeSecondaryAction('Alt. secondary'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeSecondaryAction('Alt. secondary dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeValidationAction('Alt. validation'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeValidationAction('Alt. validation dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeDestructiveAction('Alt. destructive'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeDestructiveAction('Alt. destructive dis.')->SetIsDisabled(true));
+		$sContent = <<<HTML
+<div>The content text is made of raw HTML, therefore it must be sanitized before being injected into the component.</div>
+<div>Here we put an hyperlink (<a href="#">link</a>) and a smiley (😻), just to see if it renders correctly</div>
+HTML;
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('ButtonsURL examples', 2, 'title-buttonsurl'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeLinkNeutral('#', 'Link neutral'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeIconLink('fas fa-thumbs-up', 'Icon link button', '#'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeLinkNeutral('#', 'Link primary')->SetColor(Button::ENUM_COLOR_SCHEME_PRIMARY));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeIconLink('fas fa-thumbs-up', 'Icon link button primary', '#')->SetColor(Button::ENUM_COLOR_SCHEME_PRIMARY));
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeNeutral(sTitle: 'Alert not closable, not collapsable', sContent: $sContent)->SetIsClosable(false)->SetIsCollapsible(false),
+			<<<'PHP'
+AlertUIBlockFactory::MakeNeutral(sTitle: 'Alert not closable, not collapsable', sContent: $sContent)
+		->SetIsClosable(false)
+		->SetIsCollapsible(false);
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeNeutral(sTitle: 'Alert collapsible but nos closable', sContent: $sContent)->SetIsClosable(false),
+			<<<'PHP'
+AlertUIBlockFactory::MakeNeutral(sTitle: 'Alert collapsible but nos closable', sContent: $sContent)
+		->SetIsClosable(false);
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldsSet,
+			AlertUIBlockFactory::MakeNeutral(sTitle: 'Alert with collapsible state saving', sContent: $sContent)->EnableSaveCollapsibleState('RenderAllUiBlocks-alert'),
+			<<<'PHP'
+	AlertUIBlockFactory::MakeNeutral(sTitle: 'Alert with collapsible state saving', sContent: $sContent)
+		->EnableSaveCollapsibleState('RenderAllUiBlocks-alert');
+PHP
+		);
+	}
 
-$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
+	private function RenderButtonsSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Basic');
 
-//////////////
-// ButtonGroup
-//////////////
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonUIBlockFactory::MakeNeutral(sLabel: 'Neutral'),
+			<<<'PHP'
+ButtonUIBlockFactory::MakeNeutral(sLabel: 'Neutral');
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonUIBlockFactory::MakeForPrimaryAction(sLabel: 'Primary'),
+			<<<'PHP'
+ButtonUIBlockFactory::MakeForPrimaryAction(sLabel: 'Primary');
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonUIBlockFactory::MakeForSecondaryAction(sLabel: 'Secondary'),
+			<<<'PHP'
+ButtonUIBlockFactory::MakeForSecondaryAction(sLabel: 'Secondary');
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonUIBlockFactory::MakeForPositiveAction(sLabel: 'Validation'),
+			<<<'PHP'
+ButtonUIBlockFactory::MakeForPositiveAction(sLabel: 'Validation');
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonUIBlockFactory::MakeForDestructiveAction(sLabel: 'Destructive'),
+			<<<'PHP'
+ButtonUIBlockFactory::MakeForDestructiveAction(sLabel: 'Destructive');
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonUIBlockFactory::MakeAlternativeNeutral(sLabel: 'Alt. neutral'),
+			<<<'PHP'
+ButtonUIBlockFactory::MakeAlternativeNeutral(sLabel: 'Alt. neutral');
+PHP
+		);
+		$this->AddUiBlock($oFieldSet);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('ButtonGroups examples: button + menu', 2, 'title-button-groupsmenu'));
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Links');
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonUIBlockFactory::MakeLinkNeutral(sURL: '#', sLabel: 'Link neutral'),
+			<<<'PHP'
+ButtonUIBlockFactory::MakeLinkNeutral(sURL: '#', sLabel: 'Link neutral');
+PHP
+		);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonUIBlockFactory::MakeIconLink(sIconClasses: 'fas fa-thumbs-up', sTooltipText: 'Icon link button', sURL:'#'),
+			<<<'PHP'
+ButtonUIBlockFactory::MakeIconLink(sIconClasses:'fas fa-thumbs-up', sTooltipText: 'Icon link button', sURL: '#');
+PHP
+		);
+		$this->AddUiBlock($oFieldSet);
+	}
 
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeNeutral('Neutral with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeForPrimaryAction('Primary with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeForSecondaryAction('Secondary with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeForPositiveAction('Validation with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeForDestructiveAction('Destructive with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeAlternativeNeutral('Alt. neutral with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeForAlternativePrimaryAction('Alt. primary with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeForAlternativeSecondaryAction('Alt. secondary with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeForAlternativeValidationAction('Alt. validation with options'),
-	new PopoverMenu()
-));
-$oPageContentLayout->AddMainBlock(ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
-	ButtonUIBlockFactory::MakeForAlternativeDestructiveAction('Alt. destructive with options'),
-	new PopoverMenu()
-));
+	private function RenderButtonGroupsSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Popover Menu');
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('ButtonGroups examples: button + button + button', 2, 'title-button-groupsh'));
+		$oPopoverMenu = new PopoverMenu();
+		$oPopoverMenu->AddItems(sSectionId: 'Section', aItems: [
+			PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(new URLPopupMenuItem('option1', 'Option 1', '#')),
+			PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(new URLPopupMenuItem('option2', 'Option 2', '#')),
+			PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(new URLPopupMenuItem('option3', 'Option 3', '#')),
+		]);
 
-$oPageContentLayout->AddMainBlock(new ButtonGroup(
-	[
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(
+				ButtonUIBlockFactory::MakeNeutral('Button With Options'),
+				$oPopoverMenu
+			),
+			<<<'PHP'
+$oPopoverMenu = new PopoverMenu();
+$oPopoverMenu->AddItems(sSectionId: 'Section 1', aItems: [
+	PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(new URLPopupMenuItem('option1', 'Option 1', '#')),
+	PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(new URLPopupMenuItem('option2', 'Option 2', '#')),
+	PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(new URLPopupMenuItem('option3', 'Option 3', '#')),
+]);
+ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu(ButtonUIBlockFactory::MakeNeutral('Neutral with options'), new PopoverMenu());
+PHP
+		);
+		$this->AddUiBlock($oFieldSet);
+
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Button Group');
+
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			new ButtonGroup(
+				aButtons: [
+					ButtonUIBlockFactory::MakeNeutral('Three'),
+					ButtonUIBlockFactory::MakeNeutral('neutral'),
+					ButtonUIBlockFactory::MakeNeutral('button'),
+				]
+			),
+			<<<'PHP'
+new ButtonGroup(aButtons: [
 		ButtonUIBlockFactory::MakeNeutral('Three'),
 		ButtonUIBlockFactory::MakeNeutral('neutral'),
 		ButtonUIBlockFactory::MakeNeutral('button'),
 	]
-));
-$oPageContentLayout->AddMainBlock(new ButtonGroup(
-	[
-		ButtonUIBlockFactory::MakeForPrimaryAction('Three'),
-		ButtonUIBlockFactory::MakeForPrimaryAction('primary'),
-		ButtonUIBlockFactory::MakeForPrimaryAction('button'),
-	]
-));
-$oPageContentLayout->AddMainBlock(new ButtonGroup(
-	[
-		ButtonUIBlockFactory::MakeAlternativeNeutral('Three'),
-		ButtonUIBlockFactory::MakeAlternativeNeutral('primary'),
-		ButtonUIBlockFactory::MakeAlternativeNeutral('alt. button'),
-	]
-));
+);
+PHP
+		);
+		$this->AddUiBlock($oFieldSet);
+	}
 
-$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
+	private function RenderButtonBarsSection(): void
+	{
+		$this->add_style(<<<CSS
+.btn-bar-710{
+	max-width: 710px;
+}
+CSS);
 
-/////////
-// Panels
-/////////
-///
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Panels examples', 2, 'title-panels'));
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Buttons Bar With Overflow (710px max)');
 
-$aSubBlocks = [
-	new Html('<div>Panel body, can contain anything from simple text to rich text, forms, images, <a href="#">links</a>, graphs or tables.</div>'),
-	new Html('<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>'),
-];
-$sClassIconUrl = MetaModel::GetClassIcon('Organization', false);
+		$oBtn1 = ButtonUIBlockFactory::MakeNeutral('Action 1');
+		$oBtn1->SetIconClass('fas fa-thumbs-up');
 
-$oPanel = PanelUIBlockFactory::MakeNeutral('Neutral panel');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oBtn5 = ButtonUIBlockFactory::MakeNeutral('Action 5');
+		$oBtn5->SetIconClass('fas fa-thumbs-down');
 
-$oPanel = PanelUIBlockFactory::MakeForInformation('Panel for information');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oBtn11 = ButtonUIBlockFactory::MakeNeutral('Action 11');
+		$oBtn11->SetIconClass('fas fa-bomb');
 
-$oPanel = PanelUIBlockFactory::MakeForSuccess('Panel for success');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oBtnJS = ButtonUIBlockFactory::MakeNeutral('Action JS');
+		$oBtnJS->SetOnClickJsCode('alert("Hello World!");console.log(this);');
+		$oBtnJS->SetIconClass('fas fa-bolt');
 
-$oPanel = PanelUIBlockFactory::MakeForWarning('Panel for warning');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oButtonBar = ButtonBarUIBlockFactory::MakeStandard(
+			aItems: [
+				$oBtn1,
+				ButtonUIBlockFactory::MakeNeutral('Action 2'),
+				ButtonUIBlockFactory::MakeNeutral('Action 3'),
+				ButtonUIBlockFactory::MakeNeutral('Action 4'),
+				new ButtonSeparator(),
+				$oBtn5,
+				ButtonUIBlockFactory::MakeNeutral('Action 6'),
+				ButtonUIBlockFactory::MakeNeutral('Action 7'),
+				ButtonUIBlockFactory::MakeNeutral('Action 8'),
+				ButtonUIBlockFactory::MakeNeutral('Action 9'),
+				ButtonUIBlockFactory::MakeNeutral('Action 10'),
+				new ButtonSeparator(),
+				$oBtnJS,
+				$oBtn11,
+				ButtonUIBlockFactory::MakeNeutral('Action 12'),
+				ButtonUIBlockFactory::MakeNeutral('Action 13'),
+				ButtonUIBlockFactory::MakeLinkNeutral('https://www.combodo.com', 'Combodo.com'),
+				ButtonUIBlockFactory::MakeNeutral('Action 15'),
+				ButtonUIBlockFactory::MakeNeutral('Action 16'),
+			],
+			sMoreButtonTooltipText: 'See overflow actions',
+			sId: 'button-bar-test1'
+		);
+		$oButtonBar->AddCSSClass('btn-bar-710');
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oButtonBar,
+			<<<'PHP'
+$oButtonBar = ButtonBarUIBlockFactory::MakeStandard(aItems: [
+		ButtonUIBlockFactory::MakeNeutral('Action 1'),
+		ButtonUIBlockFactory::MakeNeutral('Action 2'),
+		ButtonUIBlockFactory::MakeNeutral('Action 3'),
+		...
+	],
+	sMoreButtonTooltipText: 'tooltip text for overflow actions',
+	sId: 'button-bar-id'
+);
+PHP
+		);
+		$this->AddUiBlock($oFieldSet);
 
-$oPanel = PanelUIBlockFactory::MakeForDanger('Panel for danger');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Buttons Bar With Fixed elements (3 items)');
 
-$oPanel = PanelUIBlockFactory::MakeForFailure('Panel for failure');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oButtonBar = ButtonBarUIBlockFactory::MakeWithCountOverflow(
+			aItems: [
+				ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-up', sTooltipText: 'Promote this entry'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-down', sTooltipText: 'Demote this entry'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-bomb', sTooltipText: 'Explode this entry'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-wrench', sTooltipText: 'Fix this entry'),
+			],
+			iOverflowCount: 3,
+			sMoreButtonTooltipText: 'See overflow actions',
+			sId: 'button-bar-test4'
+		);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oButtonBar,
+			<<<'PHP'
+$oButtonBar = ButtonBarUIBlockFactory::MakeWithCountOverflow(aItems: [
+		ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-up', sTooltipText: 'Promote this entry'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-down', sTooltipText: 'Demote this entry'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-bomb', sTooltipText: 'Explode this entry'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-wrench', sTooltipText: 'Fix this entry'),
+	],
+	iOverflowCount: 3,
+	sMoreButtonTooltipText: 'See overflow actions',
+	sId: 'button-bar-test4'
+);
+PHP
+		);
+		$this->AddUiBlock($oFieldSet);
 
-$oPanel = PanelUIBlockFactory::MakeWithBrandingPrimaryColor('Panel with branding primary color');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Buttons Bar With Marker');
+		$oButtonBar = ButtonBarUIBlockFactory::MakeWithAfterMarkerOverflow(
+			sOverflowStartAfterButtonId: 'pivot-button',
+			aItems: [
+				ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-up', sTooltipText: 'Promote this entry'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-down', sTooltipText: 'Demote this entry'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-search', sTooltipText: 'Search this entry'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-tag', sTooltipText: 'Tag this entry', sId: 'pivot-button'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-tasks', sTooltipText: 'Assign this entry'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-bomb', sTooltipText: 'Explode this entry'),
+				new ButtonSeparator(),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-trash-alt', sTooltipText: 'Delete this entry'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-swimming-pool', sTooltipText: 'Je ne peux pas j\'ai Piscine'),
+				ButtonUIBlockFactory::MakeIconAction('fas fa-wrench', sTooltipText: 'Fix this entry'),
+			],
+			sMoreButtonTooltipText:  'tooltip text for overflow actions',
+			sId:'button-bar-id'
+		);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oButtonBar,
+			<<<'PHP'
+$oButtonBar = ButtonBarUIBlockFactory::MakeWithAfterMarkerOverflow(sOverflowStartAfterButtonId: 'pivot-button',
+	aItems: [
+		ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-up', sTooltipText: 'Promote this entry'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-down', sTooltipText: 'Demote this entry'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-search', sTooltipText: 'Search this entry'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-tag', sTooltipText: 'Tag this entry', sId: 'pivot-button'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-tasks', sTooltipText: 'Assign this entry'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-bomb', sTooltipText: 'Explode this entry'),
+		new ButtonSeparator(),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-trash-alt', sTooltipText: 'Delete this entry'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-swimming-pool', sTooltipText: 'Je ne peux pas j\'ai Piscine'),
+		ButtonUIBlockFactory::MakeIconAction('fas fa-wrench', sTooltipText: 'Fix this entry'),
+	],
+	sMoreButtonTooltipText:  'tooltip text for overflow actions',
+	sId:'button-bar-id'
+);
+PHP
+		);
+		$this->AddUiBlock($oFieldSet);
+	}
 
-$oPanel = PanelUIBlockFactory::MakeWithBrandingSecondaryColor('Panel with branding secondary color');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+	private function RenderPanelsSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Basic');
+		$this->AddUiBlock($oFieldSet);
 
-$oPanel = PanelUIBlockFactory::MakeNeutral('Panel with title only');
-$oPanel->SetSubBlocks($aSubBlocks);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$aSubBlocks = [
+			new Html('<div>Panel body, can contain anything from simple text to rich text, forms, images, <a href="#">links</a>, graphs or tables.</div>'),
+			new Html('<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>'),
+		];
 
-$oPanel = PanelUIBlockFactory::MakeNeutral('')
-	->SetSubBlocks($aSubBlocks)
-	->SetSubTitle('Panel with subtitle only');
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oPanel = PanelUIBlockFactory::MakeNeutral(sTitle: 'Neutral panel');
+		$oPanel->SetSubBlocks($aSubBlocks);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanel,
+			<<<'PHP'
+PanelUIBlockFactory::MakeNeutral(sTitle: 'Neutral Panel');
+PHP
+		);
 
-$oPanel = PanelUIBlockFactory::MakeNeutral('Panel with title and subtitle')
+		$oPanel = PanelUIBlockFactory::MakeForInformation('Panel for information');
+		$oPanel->SetSubBlocks($aSubBlocks);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanel,
+			<<<'PHP'
+PanelUIBlockFactory::MakeForInformation(sTitle: 'Panel for information');
+PHP
+		);
+
+		$oPanel = PanelUIBlockFactory::MakeForSuccess('Panel for success');
+		$oPanel->SetSubBlocks($aSubBlocks);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanel,
+			<<<'PHP'
+PanelUIBlockFactory::MakeForSuccess(sTitle: 'Panel for success');
+PHP
+		);
+
+		$oPanel = PanelUIBlockFactory::MakeForWarning('Panel for warning');
+		$oPanel->SetSubBlocks($aSubBlocks);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanel,
+			<<<'PHP'
+PanelUIBlockFactory::MakeForWarning(sTitle: 'Panel for warning');
+PHP
+		);
+
+		$oPanel = PanelUIBlockFactory::MakeForDanger('Panel for danger');
+		$oPanel->SetSubBlocks($aSubBlocks);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanel,
+			<<<'PHP'
+PanelUIBlockFactory::MakeForDanger(sTitle: 'Panel for danger');
+PHP
+		);
+
+		$oPanel = PanelUIBlockFactory::MakeForFailure('Panel for failure');
+		$oPanel->SetSubBlocks($aSubBlocks);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanel,
+			<<<'PHP'
+PanelUIBlockFactory::MakeForFailure(sTitle: 'Panel for failure');
+PHP
+		);
+
+		// title and subtitle
+		$oPanel = PanelUIBlockFactory::MakeNeutral('Panel with title and subtitle')
+			->SetSubBlocks($aSubBlocks)
+			->SetSubTitle('Subtitle');
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanel,
+			<<<'PHP'
+PanelUIBlockFactory::MakeNeutral('Panel with title and subtitle')
 	->SetSubBlocks($aSubBlocks)
 	->SetSubTitle('Subtitle');
-$oPageContentLayout->AddMainBlock($oPanel);
+PHP
+		);
 
-$oPanel = PanelUIBlockFactory::MakeNeutral('Panel with title and icon')
+		// title and icon
+		$sClassIconUrl = MetaModel::GetClassIcon('Person', false);
+		$oPanel = PanelUIBlockFactory::MakeNeutral('Panel with title and icon')
+			->SetSubBlocks($aSubBlocks)
+			->SetIcon($sClassIconUrl);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanel,
+			<<<'PHP'
+PanelUIBlockFactory::MakeNeutral('Panel with title and icon')
 	->SetSubBlocks($aSubBlocks)
 	->SetIcon($sClassIconUrl);
-$oPageContentLayout->AddMainBlock($oPanel);
+PHP
+		);
 
-$oPanel = PanelUIBlockFactory::MakeNeutral('')
-	->SetSubBlocks($aSubBlocks)
-	->SetSubTitle('Panel with subtitle and icon')
-	->SetIcon($sClassIconUrl);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oButtonBar = ButtonBarUIBlockFactory::MakeWithCountOverflow(
+			aItems: [
+			ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-up', sTooltipText: 'Promote this entry'),
+			ButtonUIBlockFactory::MakeIconAction('fas fa-thumbs-down', sTooltipText: 'Demote this entry'),
+			ButtonUIBlockFactory::MakeIconAction('fas fa-bomb', sTooltipText: 'Explode this entry'),
+			ButtonUIBlockFactory::MakeIconAction('fas fa-wrench', sTooltipText: 'Fix this entry'),
+		],
+			iOverflowCount: 3,
+			sMoreButtonTooltipText: 'See overflow actions',
+			sId: 'button-bar-test5'
+		);
 
-$oPanel = PanelUIBlockFactory::MakeNeutral('Panel with title, subtitle and icon')
-	->SetSubBlocks($aSubBlocks)
-	->SetSubTitle('Subtitle')
-	->SetIcon($sClassIconUrl);
-$oPageContentLayout->AddMainBlock($oPanel);
+		$oPanelButton = PanelUIBlockFactory::MakeNeutral(sTitle: 'Panel With Button Bar');
+		$oPanelButton->AddToolbarBlock($oButtonBar);
+		$oPanel->SetSubBlocks([HtmlFactory::MakeHtmlContent('<div>Panel body, can contain anything from simple text to rich text, forms, images, <a href="#">links</a>, graphs or tables.</div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>')]);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oPanelButton,
+			<<<'PHP'
+$oButtonBar = ButtonBarUIBlockFactory::MakeWithCountOverflow(...);
+$oPanelButton = PanelUIBlockFactory::MakeNeutral(sTitle: 'Panel With Button Bar');
+$oPanelButton->AddToolbarBlock($oButtonBar);
+PHP
+		);
+	}
 
-$oPanel = PanelUIBlockFactory::MakeNeutral('Panel with title, subtitle and icon as a medallion')
-	->SetSubBlocks($aSubBlocks)
-	->SetSubTitle('Subtitle')
-	->SetIcon($sClassIconUrl, Panel::ENUM_ICON_COVER_METHOD_ZOOMOUT, true);
-$oPageContentLayout->AddMainBlock($oPanel);
-
-$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
-
-/////////
-// ObjectDetails
-/////////
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('ObjectDetails examples', 2, 'title-object-details'));
+	private function RenderObjectDetailsSection(): void
+	{
+		$this->add_style(<<<CSS
+.ibo-object-details{
+  margin-bottom: 0!important;
+}
+CSS);
 
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Object Details');
+		$oOrgObject = MetaModel::NewObject('Organization');
+		$oOrgObject->Set('name', 'Object Container With Tabs');
+		$oOrgObject->Set('status', 'active');
+		$oObjectDetails = ObjectFactory::MakeDetails($oOrgObject);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oObjectDetails,
+			<<<'PHP'
 $oOrgObject = MetaModel::NewObject('Organization');
 $oOrgObject->Set('name', 'Stub, no tab container. Just to see how the header is displayed');
 $oOrgObject->Set('status', 'active');
-
 $oObjectDetails = ObjectFactory::MakeDetails($oOrgObject);
-$oPageContentLayout->AddMainBlock($oObjectDetails);
-$oPage->AddTabContainer(OBJECT_PROPERTIES_TAB, '', $oObjectDetails);
-$oPage->SetCurrentTabContainer(OBJECT_PROPERTIES_TAB);
-$oPage->SetCurrentTab('First');
-$oPage->add('Extra tabs icon is normal as there is no JS widget instantiated here.');
-$oPage->SetCurrentTab('Second');
-$oPage->SetCurrentTab('Third');
-$oPage->SetCurrentTab('Fourth');
-$oPage->SetCurrentTab('Fifth');
-$oPage->SetCurrentTab('Sixth');
-$oPage->SetCurrentTab('Seventh');
-$oPage->SetCurrentTabContainer();
+PHP
+		);
+		$this->AddUiBlock($oFieldSet);
+		$this->AddTabContainer(OBJECT_PROPERTIES_TAB, '', $oObjectDetails);
+		$this->SetCurrentTabContainer(OBJECT_PROPERTIES_TAB);
+		$this->SetCurrentTab('First');
+		$this->SetCurrentTab('Second');
+		$this->SetCurrentTab('Third');
+		$this->SetCurrentTabContainer('render-all-tabs');
+		$this->SetCurrentTab('tab-functional', 'Functional');
+	}
 
-$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
+	private function RenderCollapsibleSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Collapsible Sections');
+		$this->AddUiBlock($oFieldSet);
 
-/////////
-// Collapsible Section
-/////////
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Collapsible Sections examples', 2, 'title-collapsible'));
+		// collapsible section
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			new CollapsibleSection(sTitle: 'Section title', aSubBlocks: [
+				new Html('This is the section content !'),
+			]),
+			<<<'PHP'
+new CollapsibleSection(sTitle: 'Section title', aSubBlocks: [
+	new Html('This is the section content !'),
+]),
+PHP
+		);
+	}
 
-$sSectionContent = 'This is the section content !';
-$oCollapsibleSection = new CollapsibleSection('Section title', [new Html($sSectionContent)]);
-$oPage->AddUiBlock($oCollapsibleSection);
+	private function RenderFieldsetSection(): void
+	{
+		$this->add_style(<<<CSS
+fieldset{
+	min-inline-size: 0;
+}
+CSS);
 
-$oCollapsibleSectionSaveState = new CollapsibleSection('Section save state', [new Html($sSectionContent)]);
-$oCollapsibleSectionSaveState->EnableSaveCollapsibleState('RenderAllUiBlocks__section');
-$oPage->AddUiBlock($oCollapsibleSectionSaveState);
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Fieldsets');
+		$this->AddUiBlock($oFieldSet);
 
-/////////
-// Fieldset
-/////////
+		// field set
+		$oFieldset = new FieldSet(sLegend: 'Grouped fields');
+		$oFieldset->AddSubBlock(FieldUIBlockFactory::MakeStandard('Field A'));
+		$oFieldset->AddSubBlock(InputUIBlockFactory::MakeStandard('text', 'input1', 'Input 1'));
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oFieldset,
+			<<<'PHP'
+$oFieldset = FieldSetUIBlockFactory::MakeStandard(sLegend: 'Grouped fields');
+$oFieldset->AddSubBlock(FieldUIBlockFactory::MakeStandard('Field A'));
+$oFieldset->AddSubBlock(InputUIBlockFactory::MakeStandard('text', 'input1', 'Input 1'));
+$oFieldSet->AddSubBlock($oFieldset);
+PHP
+		);
+	}
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Fieldset/field examples', 2));
+	private function RenderCodeSection(): void
+	{
+		$this->add_style(<<<CSS
+.ibo-is-code{
+	padding: 12px 0 24px;
+	background-color: transparent;
+}
+CSS);
 
-$oDashletFieldset1 = new FieldSet('Fieldset 1');
-$oDashletField1 = FieldUIBlockFactory::MakeStandard('Field A');
-$oDashletInput1 = InputUIBlockFactory::MakeStandard('text', 'input1', 'Input 1');
-$oDashletField2 = FieldUIBlockFactory::MakeStandard('Field B (with a description in a tooltip)')
-	->SetDescription('Description for the field B');
-$oDashletInput2 = InputUIBlockFactory::MakeStandard('text', 'input2', 'Input 2');
-$oDashletField3 = FieldUIBlockFactory::MakeStandard('Field C');
-$oDashletInput3 = InputUIBlockFactory::MakeStandard('text', 'input3', 'Input 3');
-$oDashletFieldset2 = new FieldSet('Fieldset 2');
-$oDashletField4 = FieldUIBlockFactory::MakeStandard('Field D');
-$oDashletField5 = FieldUIBlockFactory::MakeStandard('Field E');
-$oDashletField6 = FieldUIBlockFactory::MakeStandard('Field F');
-$oPage->AddUiBlock($oDashletFieldset1);
-$oPage->AddUiBlock($oDashletFieldset2);
-$oDashletFieldset1->AddSubBlock($oDashletField1);
-$oDashletFieldset1->AddSubBlock($oDashletInput1);
-$oDashletFieldset1->AddSubBlock($oDashletField2);
-$oDashletFieldset1->AddSubBlock($oDashletInput2);
-$oDashletFieldset1->AddSubBlock($oDashletField3);
-$oDashletFieldset1->AddSubBlock($oDashletInput3);
-$oDashletFieldset2->AddSubBlock($oDashletField4);
-$oDashletFieldset2->AddSubBlock($oDashletField5);
-$oDashletFieldset2->AddSubBlock($oDashletField6);
+		$sCode = <<<'PHP'
+function mean(int $a, int $b)
+{
+	return ($a + $b)/2;
+}
+PHP;
 
-/////////
-// Code
-/////////
+		// basic
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Basic');
+		$this->AddUiBlock($oFieldSet);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			UIContentBlockUIBlockFactory::MakeForCode(sCode:$sCode)->AddCSSClass('language-php'),
+			<<<'PHP'
+UIContentBlockUIBlockFactory::MakeForCode(sCode: 'function mean(int $a, int $b) {\n\treturn ($a + $b)/2\n}')->AddCSSClass('language-php'));
+PHP
+		);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Code examples (MakeForCode)', 2));
-$oCode1 = UIContentBlockUIBlockFactory::MakeForCode('function mean(int $a, int $b) {
-	return ($a + $b)/2
-}');
-$oPage->AddUiBlock($oCode1);
+		// code preformatted
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Preformatted');
+		$this->AddUiBlock($oFieldSet);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			UIContentBlockUIBlockFactory::MakeForPreformatted($sCode)->AddCSSClass('language-php'),
+			<<<'PHP'
+UIContentBlockUIBlockFactory::MakeForPreformatted('function mean(int $a, int $b) {\n\treturn ($a + $b)/2\n}')->AddCSSClass('language-php'));
+PHP
+		);
+	}
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Code examples (MakeForPreformatted)', 2));
-$oCode2 = UIContentBlockUIBlockFactory::MakeForPreformatted('function mean(int $a, int $b) {
-	return ($a + $b)/2
-}');
-$oPage->AddUiBlock($oCode2);
+	private function RenderPillSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Basic');
+		$this->AddUiBlock($oFieldSet);
 
-/////////
-// Pill
-/////////
+		$sHtml = '<span class="ibo-dashlet-header-dynamic--count">8</span><span class="ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis">:state</span>';
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Pill examples', 2));
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			PillFactory::MakeForState(sClass: 'Person', sStateCode: 'active')->AddHtml(str_replace(':state', 'Active', $sHtml)),
+			<<<'PHP'
+PillFactory::MakeForState(sClass: 'Person', sStateCode: 'active')->AddHtml($sHtml);
+PHP
+		);
 
-$oBlock = new UIContentBlockWithJSRefreshCallback(null, ["ibo-dashlet-header-dynamic--container"]);
-$oPage->AddUiBlock($oBlock);
-$oPill1 = PillFactory::MakeForState('Person', 'active')->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">8</span><span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">active</span>");
-$oPill2 = PillFactory::MakeForState('Person', 'inactive')->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">8</span><span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">inactive</span>");
-$oPill3 = PillFactory::MakeForState('Person', 'closed')->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">8</span><span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">closed</span>");
-$oPill4 = PillFactory::MakeForState('Person', 'new')->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">8</span><span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">new</span>");
-$oPill5 = PillFactory::MakeForState('Person', 'waiting')->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">8</span><span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">waiting</span>");
-$oPill6 = PillFactory::MakeForState('Person', 'escalated')->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">8</span><span class=\"ibo-dashlet-header-dynamic--label ibo-text-truncated-with-ellipsis\">escalated</span>");
-$oBlock->AddSubBlock($oPill1);
-$oBlock->AddSubBlock($oPill2);
-$oBlock->AddSubBlock($oPill3);
-$oBlock->AddSubBlock($oPill4);
-$oBlock->AddSubBlock($oPill5);
-$oBlock->AddSubBlock($oPill6);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			PillFactory::MakeForState(sClass: 'Person', sStateCode: 'inactive')->AddHtml(str_replace(':state', 'Inactive', $sHtml)),
+			<<<'PHP'
+PillFactory::MakeForState(sClass: 'Person', sStateCode: 'inactive')->AddHtml($sHtml);
+PHP
+		);
 
-/////////
-// Title
-/////////
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			PillFactory::MakeForState(sClass: 'Person', sStateCode: 'new')->AddHtml(str_replace(':state', 'New', $sHtml)),
+			<<<'PHP'
+PillFactory::MakeForState(sClass: 'Person', sStateCode: 'new')->AddHtml($sHtml);
+PHP
+		);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Title examples', 2));
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Title example 1', 1));
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Title example 2', 2));
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Title example 3', 3));
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Title example 4', 4));
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeForPageWithIcon('Title example 5', MetaModel::GetClassIcon('Organization', false)));
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeForPageWithIcon('Title example 6', Branding::GetFullMainLogoAbsoluteUrl()));
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			HtmlFactory::MakeHtmlContent('<span>🧑‍💻 HTML Content</span>'),
+			<<<HTML
+<span class="ibo-dashlet-header-dynamic--count">:count</span>
+<span class="ibo-dashlet-header-dynamic--label">:state</span>
+HTML
+			,
+			'language-html'
+		);
+	}
 
-/////////
-// DataTable
-/////////
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Datatable examples', 2));
+	private function RenderTitleSizeSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Sizes');
+		$this->AddUiBlock($oFieldSet);
 
-$oPage->AddUiBlock(DataTableUIBlockFactory::MakeForStaticData(
-	'Static datatable',
-	[
+		// title
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 1'),
+			<<<'PHP'
+TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 1');
+PHP
+		);
+
+		// title 2
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 2', iLevel: 2),
+			<<<'PHP'
+TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 2', iLevel: 2);
+PHP
+		);
+
+		// title 3
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			TitleUIBlockFactory::MakeNeutral(sTitle: 'Title ', iLevel: 3),
+			<<<'PHP'
+TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 3', iLevel: 3);
+PHP
+		);
+
+		// title 4
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 4', iLevel: 4),
+			<<<'PHP'
+TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 4', iLevel: 4);
+PHP
+		);
+
+		// title 5
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 5', iLevel: 5),
+			<<<'PHP'
+TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 5', iLevel: 5);
+PHP
+		);
+
+		// title 6
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 6', iLevel: 6),
+			<<<'PHP'
+TitleUIBlockFactory::MakeNeutral(sTitle: 'Title 6', iLevel: 6);
+PHP
+		);
+
+	}
+
+	private function RenderTitleAlternativeSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Alternatives');
+		$this->AddUiBlock($oFieldSet);
+
+		// title image
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			TitleUIBlockFactory::MakeForPageWithIcon(sTitle: 'Title with image', sIconUrl: MetaModel::GetClassIcon('Organization', false)),
+			<<<'PHP'
+TitleUIBlockFactory::MakeForPageWithIcon(sTitle: 'Title with image', sIconUrl: MetaModel::GetClassIcon('Organization', false));
+PHP
+		);
+
+	}
+
+	private function RenderDatatableSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Static');
+		$this->AddUiBlock($oFieldSet);
+
+		// data table
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			DataTableUIBlockFactory::MakeForStaticData(
+				sTitle: 'Static datatable',
+				aColumns: [
+					'a' => ['label' => 'a'],
+					'b' => ['label' => 'b'],
+				],
+				aData: [
+					['a' => 'A1', 'b' => 'B1'],
+					['a' => 'A2', 'b' => 'B2'],
+				]
+			),
+			<<<'PHP'
+DataTableUIBlockFactory::MakeForStaticData(
+	sTitle: 'Static datatable',
+	aColumns: [
 		'a' => ['label' => 'a'],
 		'b' => ['label' => 'b'],
-		'c' => ['label' => 'c'],
-		'd' => ['label' => 'd'],
 	],
-	[
-		[
-	'a' => 'A1', 'b' => 'B1', 'c' => 'C1', 'd' => 'D1',
-	], [
-	'a' => 'A2', 'b' => 'B2', 'c' => 'C2', 'd' => 'D2',
-	], [
-	'a' => 'A3', 'b' => 'B3', 'c' => 'C3', 'd' => 'D3',
-	], [
-			'a' => 'A4',
-			'b' => 'B4',
-			'c' => 'C4',
-			'd' => 'D4',
-		],
-		[
-			'@class' => 'ibo-is-red',
-			'a'      => 'A5 (Red highlighting)',
-			'b'      => 'B5',
-			'c'      => 'C5',
-			'd'      => 'D5',
-		],
-		[
-			'@class' => 'ibo-is-danger',
-			'a'      => 'A6 (Danger highlighting)',
-			'b'      => 'B6',
-			'c'      => 'C6',
-			'd'      => 'D6',
-		],
-		[
-			'@class' => 'ibo-is-orange',
-			'a'      => 'A7 (Orange highlighting)',
-			'b'      => 'B7',
-			'c'      => 'C7',
-			'd'      => 'D7',
-		],
-		[
-			'@class' => 'ibo-is-warning',
-			'a'      => 'A8 (Warning highlighting)',
-			'b'      => 'B8',
-			'c'      => 'C8',
-			'd'      => 'D8',
-		],
-		[
-			'@class' => 'ibo-is-blue',
-			'a'      => 'A9 (Blue highlighting)',
-			'b'      => 'B9',
-			'c'      => 'C9',
-			'd'      => 'D9',
-		],
-		[
-			'@class' => 'ibo-is-info',
-			'a'      => 'A10 (Info highlighting)',
-			'b'      => 'B10',
-			'c'      => 'C10',
-			'd'      => 'D10',
-		],
-		[
-			'@class' => 'ibo-is-green',
-			'a'      => 'A11 (Green highlighting)',
-			'b'      => 'B11',
-			'c'      => 'C11',
-			'd'      => 'D11',
-		],
-		[
-			'@class' => 'ibo-is-success',
-			'a'      => 'A12 (Success highlighting)',
-			'b'      => 'B12',
-			'c'      => 'C12',
-			'd'      => 'D12',
-		],
+	aData: [
+		['a' => 'A1', 'b' => 'B1'],
+		['a' => 'A2', 'b' => 'B2'],
 	]
-));
+);
+PHP
+		);
+	}
 
-/////////
-// Set
-/////////
+	private function RenderSetSection(): void
+	{
+		$this->add_style(<<<CSS
+.demo_set{
+	color:red;
+}
+.simple-option-renderer--container{
+	display: flex;
+    gap: 5px;
+}
+CSS);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Set examples', 2));
+		$aOptions = [
+			[
+				'label' => 'Chien',
+				'value' => 'dog',
+				'icon'  => 'fas fa-dog',
+				'group' => 'Domestique',
+			],
+			[
+				'label' => 'Chat',
+				'value' => 'cat',
+				'icon'  => 'fas fa-cat',
+				'group' => 'Domestique',
+			],
+			[
+				'label' => 'Cheval',
+				'value' => 'horse',
+				'icon'  => 'fas fa-horse',
+				'group' => 'Domestique',
+			],
+			[
+				'label' => 'Araignée',
+				'value' => 'spider',
+				'icon'  => 'fas fa-spider',
+				'class' => 'demo_set',
+				'group' => 'Sauvage',
+			],
+			[
+				'label' => 'Otarie',
+				'value' => 'otter',
+				'icon'  => 'fas fa-otter',
+				'group' => 'Sauvage',
+			],
+			[
+				'label' => 'Poisson',
+				'value' => 'fish',
+				'icon'  => 'fas fa-fish',
+				'group' => 'Domestique',
+			],
+			[
+				'label' => 'Grenouille',
+				'value' => 'frog',
+				'icon'  => 'fas fa-frog',
+				'group' => 'Sauvage',
+			],
+			[
+				'label' => 'Hippopotame',
+				'value' => 'hippo',
+				'icon'  => 'fas fa-hippo',
+				'group' => 'Sauvage',
+			],
+		];
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Simple', 4));
+		// simple set
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Basic');
+		$this->AddUiBlock($oFieldSet);
 
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			SetUIBlockFactory::MakeForSimple(sId: 'SetSimple', aOptions: $aOptions, sLabelFields: 'label', sValueField: 'value', aSearchFields: ['label'], sGroupField: null, sTooltipField: null, sName: 'SimpleSetBlock'),
+			<<<'PHP'
 $aOptions = [
-	[
-		'label' => 'Chien',
-		'value' => 'dog',
-		'icon'  => 'fas fa-dog',
-		'group' => 'Domestique',
-	],
-	[
-		'label' => 'Chat',
-		'value' => 'cat',
-		'icon'  => 'fas fa-cat',
-		'group' => 'Domestique',
-	],
-	[
-		'label' => 'Cheval',
-		'value' => 'horse',
-		'icon'  => 'fas fa-horse',
-		'group' => 'Domestique',
-	],
-	[
-		'label' => 'Araignée',
-		'value' => 'spider',
-		'icon'  => 'fas fa-spider',
-		'class' => 'demo_set',
-		'group' => 'Sauvage',
-	],
-	[
-		'label' => 'Otarie',
-		'value' => 'otter',
-		'icon'  => 'fas fa-otter',
-		'group' => 'Sauvage',
-	],
-	[
-		'label' => 'Poisson',
-		'value' => 'fish',
-		'icon'  => 'fas fa-fish',
-		'group' => 'Domestique',
-	],
-	[
-		'label' => 'Grenouille',
-		'value' => 'frog',
-		'icon'  => 'fas fa-frog',
-		'group' => 'Sauvage',
-	],
-	[
-		'label' => 'Hippopotame',
-		'value' => 'hippo',
-		'icon'  => 'fas fa-hippo',
-		'group' => 'Sauvage',
-	],
+	['label' => 'Chien', 'value' => 'dog'],
+	['label' => 'Chat', 'value' => 'cat'],
+	...
 ];
-$oPage->add_style('.demo_set{color:red;}');
+SetUIBlockFactory::MakeForSimple(sId: 'SetSimple', aOptions: $aOptions, sLabelFields: 'label', sValueField: 'value', aSearchFields: ['label'], sGroupField: null, sTooltipField: null, sName: 'SimpleSetBlock');
+PHP
+		);
 
-$oSimpleSetBlock = SetUIBlockFactory::MakeForSimple('SetSimple', $aOptions, 'label', 'value', ['label'], null, null, 'SimpleSetBlock');
-$oPage->AddUiBlock($oSimpleSetBlock);
+		// add option button
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Add Option Button');
+		$this->AddUiBlock($oFieldSet);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Add Option Button', 3));
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			SetUIBlockFactory::MakeForSimple(sId: 'SetWithAddOption', aOptions: $aOptions, sLabelFields: 'label', sValueField: 'value', aSearchFields: ['label'], sGroupField: null, sTooltipField: null, sName: 'SetWithAddOption')
+				->SetHasAddOptionButton(true),
+			<<<'PHP'
+$aOptions = [
+	['label' => 'Chien', 'value' => 'dog'],
+	['label' => 'Chat', 'value' => 'cat'],
+	...
+];
+SetUIBlockFactory::MakeForSimple('SetWithAddOption', $aOptions, 'label', 'value', ['label'], null, null, 'SetWithAddOption')
+	->SetHasAddOptionButton(true);
+PHP
+		);
 
-$oSimpleAddSetBlock = SetUIBlockFactory::MakeForSimple('SetWithAddOption', $aOptions, 'label', 'value', ['label'], null, null, 'SetWithAddOption');
-$oSimpleAddSetBlock->SetHasAddOptionButton(true);
-$oPage->AddUiBlock($oSimpleAddSetBlock);
+		// renderer
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Renderer');
+		$this->AddUiBlock($oFieldSet);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Renderer', 3));
+		$oSimpleSetBlockRenderer = SetUIBlockFactory::MakeForSimple(sId: 'SetRenderer', aOptions: $aOptions, sLabelFields: 'label', sValueField: 'value', aSearchFields: ['label'], sGroupField: null, sTooltipField: null, sName: 'SimpleSetBlockWithRenderer');
+		$oSimpleSetBlockRenderer->SetOptionsTemplate('base/components/input/set/simple_option_renderer.html.twig');
+		$oSimpleSetBlockRenderer->SetItemsTemplate('base/components/input/set/simple_option_renderer.html.twig');
 
-$oSimpleSetBlockRenderer = SetUIBlockFactory::MakeForSimple('SetRenderer', $aOptions, 'label', 'value', ['label'], null, null, 'SimpleSetBlockWithRenderer');
-$oSimpleSetBlockRenderer->SetOptionsTemplate('base/components/input/set/simple_option_renderer.html.twig');
-$oSimpleSetBlockRenderer->SetItemsTemplate('base/components/input/set/simple_option_renderer.html.twig');
-$oPage->AddUiBlock($oSimpleSetBlockRenderer);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oSimpleSetBlockRenderer,
+			<<<'PHP'
+$aOptions = [
+	['label' => 'Chien', 'value' => 'dog', 'icon' => 'fas fa-dog'],
+	['label' => 'Chat', 'value' => 'cat', 'icon' => 'fas fa-cat'],
+	...
+];
+	$oSet = SetUIBlockFactory::MakeForSimple(sId: 'SetRenderer', aOptions: $aOptions, sLabelFields: 'label', sValueField: 'value', aSearchFields: ['label'], sGroupField: null, sTooltipField: null, sName: 'SimpleSetBlockWithRenderer');
+	$oSet->SetOptionsTemplate('base/components/input/set/simple_option_renderer.html.twig');
+	$oSet->SetItemsTemplate('base/components/input/set/simple_option_renderer.html.twig');
+PHP
+		);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Grouping', 3));
+		// group
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Group');
+		$this->AddUiBlock($oFieldSet);
 
-$oSimpleSetBlockGroup = SetUIBlockFactory::MakeForSimple('SetGroup', $aOptions, 'label', 'value', ['label'], 'group', null, 'SimpleSetBlockWithGroup');
-$oPage->AddUiBlock($oSimpleSetBlockGroup);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			SetUIBlockFactory::MakeForSimple(sId: 'group', aOptions: $aOptions, sLabelFields: 'label', sValueField: 'value', aSearchFields: ['label'], sGroupField: 'group', sTooltipField: null, sName: 'SimpleSetBlockWithRenderer'),
+			<<<'PHP'
+$aOptions = [
+	['label' => 'Chien', 'value' => 'dog', 'group' => 'Domestique'],
+	['label' => 'Chat', 'value' => 'cat', 'group' => 'Domestique'],
+	...
+];
+SetUIBlockFactory::MakeForSimple(sId: 'group', aOptions: $aOptions, sLabelFields: 'label', sValueField: 'value', aSearchFields: ['label'], sGroupField: 'group', sTooltipField: null, sName: 'SimpleSetBlockWithRenderer');
+PHP
+		);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('OQL', 3));
+		// oql
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('OQL Persons');
+		$this->AddUiBlock($oFieldSet);
 
-$oSimpleSetBlockOql = SetUIBlockFactory::MakeForOQL('SetOql', 'Person', 'SELECT Person', null, [], null, 'OqlSet');
-$oPage->AddUiBlock($oSimpleSetBlockOql);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			SetUIBlockFactory::MakeForOQL(sId:  'SetOql', sObjectClass: 'Person', sOql: 'SELECT Person', sWizardHelperJsVarName: null, aFieldsToLoad: [], sGroupField: null, sName: 'OqlSet'),
+			<<<'PHP'
+SetUIBlockFactory::MakeForOQL(sId: 'SetOql', sObjectClass:'Person', sOql: 'SELECT Person', sWizardHelperJsVarName: null, aFieldsToLoad: [], sGroupField: null, sName: 'OqlSet');
+PHP
+		);
 
-$oSimpleSetBlockOql2 = SetUIBlockFactory::MakeForOQL('SetOql2', 'Location', 'SELECT Location', null, [], null, 'OqlSet2');
-$oPage->AddUiBlock($oSimpleSetBlockOql2);
+		// oql2
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('OQL Locations');
+		$this->AddUiBlock($oFieldSet);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Toggler', 3));
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			SetUIBlockFactory::MakeForOQL(sId: 'SetOql2', sObjectClass: 'Location', sOql: 'SELECT Location', sWizardHelperJsVarName: null, aFieldsToLoad: [], sGroupField: null, sName: 'OqlSet2'),
+			<<<'PHP'
+SetUIBlockFactory::MakeForOQL(sId: 'SetOql2', sObjectClass: 'Location', sOql:'SELECT Location', sWizardHelperJsVarName: null, aFieldsToLoad: [], sGroupField: null, sName: 'OqlSet2');
+PHP
+		);
+	}
 
-$oToggler = new Toggler();
-$oToggler->SetName('SampleToggler');
-$oPage->AddUiBlock($oToggler);
+	private function RenderTogglerSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Toggler');
+		$this->AddUiBlock($oFieldSet);
 
-$oTogglerActivated = new Toggler();
-$oTogglerActivated->SetName('SampleTogglerActivated');
-$oTogglerActivated->SetIsToggled(true);
-$oPage->AddUiBlock($oTogglerActivated);
+		// toggler
+		$oToggler = new Toggler(sId: 'SampleToggler', sTooltip: 'Sample toggler');
+		$oToggler->SetName(sName: 'SampleToggler');
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oToggler,
+			<<<'PHP'
+		$oToggler = new Toggler(sId: 'SampleToggler', sTooltip: 'Sample toggler');
+		$oToggler->SetName(sName: 'SampleToggler');
+PHP
+		);
 
-$oTogglerDisabled = new Toggler();
-$oTogglerDisabled->SetName('SampleTogglerDisabled');
-$oTogglerDisabled->SetIsDisabled(true);
-$oPage->AddUiBlock($oTogglerDisabled);
+	}
 
-$oTogglerActivatedDisabled = new Toggler();
-$oTogglerActivatedDisabled->SetName('SampleTogglerDisabled');
-$oTogglerActivatedDisabled->SetIsToggled(true);
-$oTogglerActivatedDisabled->SetIsDisabled(true);
-$oPage->AddUiBlock($oTogglerActivatedDisabled);
+	private function RenderBadgesSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Basic');
+		$this->AddUiBlock($oFieldSet);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Badges', 3));
+		// badge neutral
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakeNeutral(sLabel: 'Badge Neutral', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakeNeutral(sLabel: 'badge neutral', sTooltip: 'Tooltip');
+PHP
+		);
 
-$oSampleBadgeNeutral = BadgeUIBlockFactory::MakeNeutral('badge neutral', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgeNeutral);
-$oSampleBadgeCyan = BadgeUIBlockFactory::MakeCyan('badge cyan', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgeCyan);
-$oSampleBadgeGreen = BadgeUIBlockFactory::MakeGreen('badge green', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgeGreen);
-$oSampleBadgeGrey = BadgeUIBlockFactory::MakeGrey('badge grey', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgeGrey);
-$oSampleBadgeOrange = BadgeUIBlockFactory::MakeOrange('badge orange', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgeOrange);
-$oSampleBadgeRed = BadgeUIBlockFactory::MakeRed('badge red', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgeRed);
-$oSampleBadgePink = BadgeUIBlockFactory::MakePink('badge pink', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgePink);
-$oSampleBadgePurple = BadgeUIBlockFactory::MakePurple('badge purple', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgePurple);
-$oSampleBadgeBlue = BadgeUIBlockFactory::MakeBlue('badge blue', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgeBlue);
-$oSampleBadgeYellow = BadgeUIBlockFactory::MakeYellow('badge yellow', 'Tooltip');
-$oPage->AddUiBlock($oSampleBadgeYellow);
+		// badge cyan
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakeCyan(sLabel: 'Badge Cyan', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakeCyan(sLabel: 'badge Cyan', sTooltip: 'Tooltip');
+PHP
+		);
 
-$oPage->AddUiBlock(TitleUIBlockFactory::MakeNeutral('Extensions details layout', 3));
+		// badge green
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakeGreen(sLabel: 'Badge Green', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakeGreen(sLabel: 'Badge Green', sTooltip: 'Tooltip');
+PHP
+		);
 
+		// badge grey
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakeGrey(sLabel: 'Badge Grey', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakeGrey(sLabel: 'Badge Grey', sTooltip: 'Tooltip');
+PHP
+		);
+
+		// badge orange
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakeOrange(sLabel: 'Badge Orange', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakeOrange(sLabel: 'Badge Orange', sTooltip: 'Tooltip');
+PHP
+		);
+
+		// badge red
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakeRed(sLabel: 'Badge Red', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakeRed(sLabel: 'Badge Red', sTooltip: 'Tooltip');
+PHP
+		);
+
+		// badge pink
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakePink(sLabel: 'Badge Pink', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakePink(sLabel: 'Badge Pink', sTooltip: 'Tooltip');
+PHP
+		);
+
+		// badge purple
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakePurple(sLabel: 'Badge Purple', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakePurple(sLabel: 'Badge Purple', sTooltip: 'Tooltip');
+PHP
+		);
+
+		// badge blue
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakeBlue(sLabel: 'Badge Blue', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakeBlue(sLabel: 'Badge Blue', sTooltip: 'Tooltip');
+PHP
+		);
+
+		// badge yellow
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			BadgeUIBlockFactory::MakeYellow(sLabel: 'Badge Yellow', sTooltip: 'Tooltip'),
+			<<<'PHP'
+BadgeUIBlockFactory::MakeYellow(sLabel: 'Badge Yellow', sTooltip: 'Tooltip');
+PHP
+		);
+	}
+
+	private function RenderMultiColumns(): void
+	{
+		$this->add_style(
+			<<<CSS
+.column-center{
+	background-color: #f6f6f6;
+}
+CSS
+		);
+
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Multi Columns');
+		$this->AddUiBlock($oFieldSet);
+
+		$oMultiCol = new MultiColumn();
+		$oColumnLeft = new Column('multi-column-left', ['column-left']);
+		$oColumnLeft->AddSubBlock(new Html('<div>Left column</div>'));
+		$oColumnCenter = new Column('multi-column-center', ['column-center']);
+		$oColumnCenter->AddSubBlock(new Html('<div>Center column</div>'));
+		$oColumnRight = new Column('multi-column-right', ['column-right']);
+		$oColumnRight->AddSubBlock(new Html('<div>Right column</div>'));
+		$oMultiCol->AddColumn($oColumnLeft);
+		$oMultiCol->AddColumn($oColumnCenter);
+		$oMultiCol->AddColumn($oColumnRight);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oMultiCol,
+			<<<'PHP'
 $oMultiCol = new MultiColumn();
-$oColumnLeft = new Column();
-$oColumnRight = new Column();
+$oColumnLeft = new Column('multi-column-left', ['column-left']);
+$oColumnLeft->AddSubBlock(new Html('<div>Left column</div>'));
+$oColumnCenter = new Column('multi-column-center', ['column-center']);
+$oColumnCenter->AddSubBlock(new Html('<div>Center column</div>'));
+$oColumnRight = new Column('multi-column-right', ['column-right']);
+$oColumnRight->AddSubBlock(new Html('<div>Right column</div>'));
 $oMultiCol->AddColumn($oColumnLeft);
+$oMultiCol->AddColumn($oColumnCenter);
 $oMultiCol->AddColumn($oColumnRight);
-$oPage->AddUiBlock($oMultiCol);
+PHP
+		);
+	}
 
-$oExtensionDetailInstalledFromFactory = ExtensionDetailsUIBlockFactory::MakeInstalled('itop-sample', 'My extension v2', 'This is for test only', ['v1.1.1', 'Designer', '12/12/2012'], ['uninstallable' => false,'missing' => true]);
-$oColumnLeft->AddSubBlock($oExtensionDetailInstalledFromFactory);
+	private function RenderExtensionsSection(): void
+	{
+		$oFieldSet = FieldSetUIBlockFactory::MakeStandard('Extensions details layout');
+		$this->AddUiBlock($oFieldSet);
 
-$oExtensionDetailInstalledFromFactory = ExtensionDetailsUIBlockFactory::MakeInstalled('itop-not-uninstallable', 'You cannot uninstall me', 'Click force uninstall to uninstall me', ['v9.9.9', 'Void', '12/12/2012'], ['uninstallable' => false,'missing' => false]);
-$oColumnLeft->AddSubBlock($oExtensionDetailInstalledFromFactory);
+		$oExtension = ExtensionDetailsUIBlockFactory::MakeInstalled('itop-sample', 'My extension v2', 'This is for test only', ['v1.1.1', 'Designer', '12/12/2012'], ['uninstallable' => false, 'missing' => true]);
+		$this->AddElementWithSnippet(
+			$oFieldSet,
+			$oExtension,
+			<<<'PHP'
+ExtensionDetailsUIBlockFactory::MakeInstalled('itop-sample', 'My extension v2', 'This is for test only', ['v1.1.1', 'Designer', '12/12/2012'], ['uninstallable' => false, 'missing' => true]);
+PHP
+		);
+	}
+}
 
-$oExtensionDetailInstalledWithLongTitle = ExtensionDetailsUIBlockFactory::MakeNotInstalled('itop-sample', 'My extension with a very long title', 'This is for test only', ['v1.1.1', 'Designer', '12/12/2012'], ['uninstallable' => false]);
-$oColumnRight->AddSubBlock($oExtensionDetailInstalledWithLongTitle);
-$oPage->add('<hr id="page_bottom"/>');
+LoginWebPage::DoLogin();
+$oPage = new RenderAllUiBlocksPage();
+$oPage->SetCurrentTab();
+$oPage->SetCurrentTabContainer();
 
 $oPage->output();