d6e2f157f7
taskid-3414667
closes odoo/documentation#5737
X-original-commit: 0433155eab
Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>
Co-authored-by: Toaa <toaa@odoo.com>
Co-authored-by: Auva <auva@odoo.com>
97 lines
4.1 KiB
ReStructuredText
97 lines
4.1 KiB
ReStructuredText
=====
|
||
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.
|