[ADD] website: menus page

taskid-3414667

closes #5736

X-original-commit: 0433155
Signed-off-by: Audrey Vandromme (auva) <[email protected]>
Co-authored-by: Toaa <[email protected]>
Co-authored-by: Auva <[email protected]>

Author: 2 people

content/applications/websites/website/pages.rst

@@ -113,7 +113,7 @@ Duplicating pages
 To duplicate a page, access the page, then go to :menuselection:`Site --> Properties` and click
 :guilabel:`Duplicate Page`. Enter a :guilabel:`Page Name`, then click :guilabel:`OK`. By default,
 the new page is added after the duplicated page in the menu, but you can remove it from the menu or
-change its position using the menu editor.
+change its position using the :doc:`menu editor <pages/menus>`.
 
 .. _website/delete-page:
 
@@ -190,4 +190,5 @@ Toggle the :guilabel:`Activate` switch to deactivate the redirection.
 .. toctree::
    :titlesonly:
 
+   pages/menus
    pages/seo

content/applications/websites/website/pages/menus.rst

@@ -0,0 +1,96 @@
+=====
+Menus
+=====
+
+Menus are used to organize your website’s content and help visitors navigate through your web pages
+effectively. User-friendly and well-structured website menus also play a crucial role in improving
+:doc:`search engine rankings <seo>`.
+
+Odoo allows you to customize the content and appearance of your website's menu to your needs.
+
+Menu editor
+===========
+
+The menu editor allows you to edit your website's menu and add :ref:`regular menu items
+<website/regular-menus>` and :ref:`mega menus <website/mega-menus>`.
+
+To edit your website's menu, go to :menuselection:`Website --> Site --> Menu Editor`. From there,
+you can:
+
+- **rename** a menu item or change its URL using the :guilabel:`Edit Menu Item` icon;
+- **delete** a menu item using the :guilabel:`Delete Menu Item` icon;
+- **move** a menu item by dragging and dropping it to the desired place in the menu;
+- **create a regular drop-down menu** by dragging and dropping the sub-menu items to the right,
+  underneath their parent menu.
+
+.. image:: menus/menu-editor.png
+   :alt: Menu editor with sub-menus
+
+.. note::
+
+  You can also access the menu editor by clicking :guilabel:`Edit`, selecting any menu item and
+  clicking the :guilabel:`Edit Menu` icon.
+
+  .. image:: menus/edit-menu-icon.png
+     :alt: Access the Menu editor while in Edit mode.
+
+.. _website/regular-menus:
+
+Adding regular menu items
+-------------------------
+
+By default, pages are added to the menu as regular menu items when :doc:`they are created
+<../pages>`. You can also add regular menu items from the menu editor by clicking :guilabel:`Add
+Menu Item`. Enter the :guilabel:`Name` and URL of the related page in the pop-up window that appears
+on the screen and click :guilabel:`OK`.
+
+.. tip::
+   In the :guilabel:`URL or Email` field, you can type `/` to search for a page on your website or
+   `#` to search for an existing custom anchor.
+
+.. _website/mega-menus:
+
+Adding mega menus
+-----------------
+
+Mega menus are similar to drop-down menus, but instead of a simple list of sub-menus, they display a
+panel divided into groups of navigation options. This makes them suitable for websites with large
+amounts of content, as they can help include all of your web pages in the menu while still making
+all menu items visible at once. Mega menus can also be structured more visually than regular
+drop-down menus, for example, through layout, typography, and icons.
+
+.. image:: menus/mega-menu.png
+   :alt: Mega menu in the navigation bar.
+
+To create a mega menu, go to :menuselection:`Website --> Site --> Menu Editor` and click
+:guilabel:`Add Mega Menu Item`. Enter the :guilabel:`Name` of the mega menu in the pop-up, click
+:guilabel:`OK`, then :guilabel:`Save`.
+
+To adapt the options and layout of the mega menu, click it in the navigation bar, then click
+:guilabel:`Edit`. Mega menus are composed of building blocks, which means you can customize each
+component individually using inline formatting, as well as the options available in the
+:guilabel:`Customize` tab in the website builder. For example, you can:
+
+- edit the text directly in the building block;
+- edit a menu item's URL by selecting the menu item, then clicking the :guilabel:`Edit link` button
+  in the small preview pop-up. Type `/` to search for a page on your website, or `#` to search for
+  an existing custom anchor.
+
+  .. image:: menus/mega-menu-option.png
+     :alt: Edit a mega menu option.
+
+- move a menu item by dragging and dropping the related block to the desired position in the mega
+  menu;
+- delete a menu item by deleting the related block.
+
+.. tip::
+   You can adapt the general layout of the mega menu by selecting the desired :guilabel:`Template`
+   and :guilabel:`Size` in the :guilabel:`Mega menu` section in the :guilabel:`Customize` tab in the
+   website builder.
+
+Header and navigation bar appearance
+====================================
+
+To customize the appearance of your website's menu, click :guilabel:`Edit`, then select the
+navigation bar or any menu item. You can then adapt the fields in the :guilabel:`Header` and
+:guilabel:`Navbar` sections in the :guilabel:`Customize` tab in the website builder.