100 lines
4.0 KiB
Markdown
100 lines
4.0 KiB
Markdown
# 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.
|
||
|