From 194d073533aba2908d79415de9b56fe02203ce2a Mon Sep 17 00:00:00 2001
From: Carlos Valverde <cvs@odoo.com>
Date: Wed, 26 Feb 2025 12:15:43 +0000
Subject: [PATCH] [IMP] howto/website: update navigation page

This commit updates current navigation page, by adding new anchor links
to the sections and by adding updated information.

Task-4316611

closes odoo/documentation#12434

X-original-commit: a548d85da8e11e6dc308fefa8e4914affc6bba9f
Signed-off-by: Carlos Valverde (cvs) <cvs@odoo.com>
---
 .../howtos/website_themes/navigation.rst      | 89 +++++++++++++++----
 1 file changed, 74 insertions(+), 15 deletions(-)

diff --git a/content/developer/howtos/website_themes/navigation.rst b/content/developer/howtos/website_themes/navigation.rst
index 454910397..1535b53c5 100644
--- a/content/developer/howtos/website_themes/navigation.rst
+++ b/content/developer/howtos/website_themes/navigation.rst
@@ -10,6 +10,8 @@ In this chapter, you will learn how to:
 - Create a dropdown menu.
 - Create a mega menu.
 
+.. _website_themes/navigation/default:
+
 Default
 =======
 
@@ -30,6 +32,8 @@ Delete default menu items.
    <delete model="website.menu" search="[('url','in', ['/', '/shop']),
    ('website_id', '=', 1)]"/>
 
+.. _website_themes/navigation/menu:
+
 Menu item
 =========
 
@@ -66,6 +70,8 @@ Menu item
    * - sequence
      - Defines the link's position in the top menu.
 
+.. _website_themes/navigation/menu/new_window:
+
 New window
 ----------
 
@@ -77,6 +83,8 @@ Open the link's URL in a new tab.
        <field name="new_window" eval="True"/>
    </record>
 
+.. _website_themes/navigation/menu/external_links:
+
 External Links
 --------------
 
@@ -88,6 +96,8 @@ Add a link to an external website.
        <field name="url">https://www.odoo.com</field>
    </record>
 
+.. _website_themes/navigation/menu/anchor:
+
 Anchor
 ------
 
@@ -99,6 +109,8 @@ Link to a specific section of a page.
        <field name="url">/about-us#our-team</field>
    </record>
 
+.. _website_themes/navigation/dropdown:
+
 Dropdown menu
 =============
 
@@ -138,31 +150,72 @@ Add an item to a dropdown menu.
    * - parent_id
      - The dropdown in which the item will be added.
 
+.. _website_themes/navigation/mega_menu:
+
 Mega menu
 =========
 
 A mega menu is a dropdown menu with additional possibilities and not just a list of links. In a
 mega menu, you can use any kind of content (text, images, icons, ...).
 
+In Odoo, you can select a mega-menu template in the list. If you don't need a custom layout, you
+can re-use the template structure in the `mega_menu_content` field like any static content.
+
 **Declaration**
 
 .. code-block:: xml
    :caption: ``/website_airproof/data/menu.xml``
 
-   <record id="menu_mega_menu" model="website.menu">
-       <field name="name">Mega Menu</field>
-       <field name="url">/mega-menu</field>
-       <field name="parent_id" search="[
-           ('url', '=', '/default-main-menu'),
-           ('website_id', '=', 1)]"/>
-       <field name="website_id">1</field>
-       <field name="sequence" type="int">..</field>
-       <field name="is_mega_menu" eval="True"/>
-       <field name="mega_menu_classes">...</field>
-       <field name="mega_menu_content" type="html">
-           <!-- Content -->
-       </field>
-   </record>
+    <record id="menu_mega_menu" model="website.menu">
+        <field name="name">Mega Menu</field>
+        <field name="parent_id" search="[
+            ('url', '=', '/default-main-menu'),
+            ('website_id', '=', 1)]"/>
+        <field name="website_id">1</field>
+        <field name="sequence" type="int">..</field>
+        <field name="is_mega_menu" eval="True"/>
+        <field name="mega_menu_classes">...</field>
+        <field name="mega_menu_content" type="html">
+            <section class="s_mega_menu_multi_menus py-4 o_colored_level o_cc o_cc1">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-12 col-sm py-2 text-center">
+                            <h4 class="o_default_snippet_text">First Menu</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 1</a>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 2</a>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 3</a>
+                            </nav>
+                        </div>
+                        <div class="col-12 col-sm py-2 text-center">
+                            <h4 class="o_default_snippet_text">Second Menu</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 1</a>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 2</a>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 3</a>
+                            </nav>
+                        </div>
+                        <div class="col-12 col-sm py-2 text-center">
+                            <h4 class="o_default_snippet_text">Third Menu</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 1</a>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 2</a>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 3</a>
+                            </nav>
+                        </div>
+                        <div class="col-12 col-sm py-2 text-center">
+                            <h4 class="o_default_snippet_text">Last Menu</h4>
+                            <nav class="nav flex-column">
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 1</a>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 2</a>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item">Menu Item 3</a>
+                            </nav>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </field>
+    </record>
 
 .. list-table::
    :header-rows: 1
@@ -178,6 +231,12 @@ mega menu, you can use any kind of content (text, images, icons, ...).
    * - mega_menu_content
      - The default content of the mega menu
 
+Beside that, you might need to create something more visually advanced with a custom template.
+Feel free to check how the `standard templates <{GITHUB_PATH}/addons/website/views/snippets/s_mega_menu_odoo_menu.xml>`_
+are built in the Odoo source code.
+
+.. _website_themes/navigation/mega_menu/custom:
+
 Custom template
 ---------------
 
@@ -205,7 +264,7 @@ Use the following code to add an option for your new custom mega menu on the Web
        <xpath expr="//*[@data-name='mega_menu_template_opt']/*" position="before">
            <t t-set="_label">Airproof</t>
            <we-button t-att-data-select-label="_label"
-               data-select-template="website_website_airproof.s_mega_menu_airproof"
+               data-select-template="website_airproof.s_mega_menu_airproof"
                data-img="/website_airproof/static/src/img/builder/header_opt.svg"
                t-out="_label"/>
        </xpath>