diff --git a/developer_manual/design/navigation.rst b/developer_manual/design/navigation.rst
index 5b048365b..cb6d8047f 100644
--- a/developer_manual/design/navigation.rst
+++ b/developer_manual/design/navigation.rst
@@ -22,11 +22,12 @@ We implemented various essential functions and provide easy way of using them.
.. figure:: ../images/navigation.png
:alt: Navigation screenshot
+ :align: right
Basic layout
=============
-.. code-block:: html
+.. code:: html
@@ -48,12 +49,13 @@ Each entry is allowed to have a counter and/or a button for user interaction.
* The ``app-navigation-entry-utils`` snippet need to be placed right next to the main link of your entry.
* Maximum **two** items are allowed into the utils section. You can have:
- * Two buttons
- * One button and one counter
+ * Two :ref:`buttons `
+ * One :ref:`button ` and one :ref:`button `
* You **can't** have more than two buttons, if you need more, you need to add a menu.
* The order of the button and the counter are **not** interchangeable. You need to put the counter before the menu.
-.. code-block:: html
+.. code:: html
+ :class: with-figure
@@ -67,7 +69,7 @@ Each entry is allowed to have a counter and/or a button for user interaction.
.. _navigation_menu:
Menu
-^^^^^
+^^^^^^
If you need to add a few interactions for your entry, you can put everything in a popover menu.
The menu needs to be placed after the ``app-navigation-entry-utils``.
@@ -76,8 +78,9 @@ For the global rules and/or layout, you can check the dedicated :ref:`popover me
.. figure:: ../images/navigation-menu.png
:alt: Navigation menu
+ :align: right
-.. code-block:: html
+.. code:: html
+.. _navigation_counter:
+
Counter
^^^^^^^^
@@ -110,18 +115,46 @@ Do not change the alignment of the text. If you're using
.. figure:: ../images/navigation-counter.png
:alt: Navigation entry with counter
+ :align: right
-.. code-block:: html
+.. code:: html
- 1
+.. _navigation_buttons:
+
+Buttons
+^^^^^^^^^
+
+The same way we display the menu three-dot-icon button, you're allowed to use up to 2 buttons in a single entry.
+
+* The icon class goes directly on the ``button`` element.
+* If no class is set, the three-dot-icon will be used by default
+
+.. figure:: ../images/navigation-buttons.png
+ :alt: Navigation entry with counter
+ :align: right
+
+.. code:: html
+
+
+
Drag and drop
==============
The class which should be applied to a first level element **li** that hosts or can host a second level is **drag-and-drop**.
This will cause the hovered entry to slide down giving a visual hint that it can accept the dragged element.
In case of jQuery UI's droppable feature, the **hoverClass** option should be set to the **drag-and-drop** class.
-.. code-block:: html
+.. code:: html
diff --git a/developer_manual/design/popovermenu.rst b/developer_manual/design/popovermenu.rst
index 5e9a30759..a8b4572b5 100644
--- a/developer_manual/design/popovermenu.rst
+++ b/developer_manual/design/popovermenu.rst
@@ -18,7 +18,7 @@ This is exactly the same as the :ref:`navigation menu `. The on
Basic layout
=============
-.. code-block:: html
+.. code:: html