How to Create New Odoo Page, Menu and Mega Menu

/
Odoo Theme/
How to Create New Odoo Page, Menu and Mega Menu

In this tutorial, you will learn how to create new Odoo page, new menu and new mega submenu. We will make our menu bar dynamic so that it will show the links saved in the database.

Before continuing in this tutorial, make sure you have done our previous tutorials about Odoo theme Development Open .

Creating new Odoo page

Inside your views folder "theme_yourhome/views", create a new file and name it services_page.xml. There's already existing code in Odoo so go under addons folder "odoo-server/addons/website/data" and open website_data.xml. Search "contactus_thanks" because this is a good example that we can copy.

Copy the code and paste it in services_page.xml and change the details based on the page we will create.

custom-addons/theme_yourhome/views/services_page.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <data>
        <record id="theme_yourhome.service_page" model="website.page">
            <field name="name">Services</field>
            <field name="type">qweb</field>
            <field name="url">/service</field>
            <field name="is_published">True</field>
            <field name="key">theme_yourhome.service_page</field>
            <field name="arch" type="xml">
                <t name="Services" t-name="theme_yourhome.service_page">
                    This is our services
                </t>
            </field>
        </record>
    </data>
</odoo>

Add it in services_page.xml to manifest.py file under data key so that our the record will be save in the database.

Restart Odoo and go to backend Settings -> Website -> Pick a Theme and click Update Theme. Go to browser and open link http://localhost:8069/service. You should see an empty page with the text.

Adding Odoo default website layout with header and footer

Adding a new page without default layout is not ideal. Luckily, we can use default Odoo website template called "website.layout" to easily add header and footer across all website pages. We can do that by just calling website.layout template and add our template or design inside it.

Go back to the browser and reload the page. You will notice that website header and footer are showing on services page.

Create Odoo page layout using bootstrap

Since Odoo already use bootstrap css framework by default, we can use this to build our services page. Copy the code below.

custom-addons/theme_yourhome/views/services_page.xml

xml

<section class="s_cover parallax bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
    <span class="s_parallax_bg oe_img_bg" style="background-image: url('/theme_yourhome/static/src/img/service-bg.jpg');"/>
    <div class="container s_allow_columns">
        <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Buy Your Dream House</font></h1>
        <p class="lead" style="text-align: center;">Lorem ipsum is placeholder text commonly used in the graphic, print, 
            and publishing industries for <br/>previewing layouts and visual mockups.</p>
        <p style="text-align: center;">
            <a t-att-href="cta_btn_href" class="btn btn-primary mb-2 mt-3 rounded-circle px-5 font-weight-medium">
                <t t-esc="cta_btn_text">Learn More</t>
            </a>
        </p>
    </div>
</section>

<section class="our-services py-5">
    <div class="container">
        <div class="text-center py-5">
            <h2 class="h1">Our Services</h2>
            <p>Lorem ipsum is placeholder text commonly used in the graphic, print, 
                and publishing industries for <br/>previewing layouts and visual mockups.</p>
        </div>

        <div class="row pb-5 text-center">
            <div class="col-lg-4">
                <div class="bg-white border rounded p-4">
                    <div class="icon d-flex align-items-center justify-content-center bg-primary mx-auto rounded-circle mb-3">
                        <i class="fa fa-gear text-light"/>
                    </div>
                    <h3>Service Header 1</h3>
                    <p>Lorem ipsum is placeholder text commonly used in the graphic, print, 
                        and publishing industries for previewing layouts.</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="bg-white border rounded p-4">
                    <div class="icon d-flex align-items-center justify-content-center bg-primary mx-auto rounded-circle mb-3">
                        <i class="fa fa-gear text-light"/>
                    </div>
                    <h3>Service Header 2</h3>
                    <p>Lorem ipsum is placeholder text commonly used in the graphic, print, 
                        and publishing industries for previewing layouts.</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="bg-white border rounded p-4">
                    <div class="icon d-flex align-items-center justify-content-center bg-primary mx-auto rounded-circle mb-3">
                        <i class="fa fa-gear text-light"/>
                    </div>
                    <h3>Service Header 3</h3>
                    <p>Lorem ipsum is placeholder text commonly used in the graphic, print, 
                        and publishing industries for previewing layouts.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Add styles to our services page in "theme_yourhome/static/src/scss/styles.scss".

Then add background image to services page hero image. Download the image here Open and save it in "theme_yourhome/static/src/img/". Restart Odoo and go back to browser and refresh the page.

Making Odoo menubar dynamic

After creating a new page, we still have issue to the menu bar since it is still static. If you click any link, it doesn't go to that page. In order to make the menubar dynamic, we need to copy some code in Odoo website default header template.

Go to Odoo addons folder "addons/website/views" and open website_template.xml to PyCharm. Search header templates and copy the code like below:

Go to "theme_yourhome/views/header.xml" and paste it inside ul with class navbar-nav.

Go back to the browser and refresh the page.

Since we already added the dynamic menubar, we can remove all other static navigation links. As mentioned earlier, when installing Odoo website module, home and contact us page were automatically created. Copy the code below for updated navbar code.

Go to browser and refresh the page and you will see only two links, Home and Contact Us.

Going back to website_data.xml file, search website.menu and copy the existing code for homepage menu or contact us page menu. Create a new file inside views folder "theme_yourhome/views/" and name it as menus.xml. Copy the code below.

custom-addons/theme_yourhome/views/menus.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <data>
        <record id="menu_service" model="website.menu">
            <field name="name">Services</field>
            <field name="url">/service</field>
            <field name="parent_id" ref="website.main_menu"/>
            <field name="sequence" type="int">20</field>
        </record>
    </data>
</odoo>

Add this file into manifest file and restart Odoo.

Go to browser backend "Settings -> Website -> Pick a theme and click Update Theme. Go to Odoo frontend and refresh the page.

Take note that once you added the menu, you can not edit it so you need to delete or comment the code, update theme and add or uncomment the code and update again the theme. But if you don't want to do this, you can still edit it by clicking in Pages and Edit Menu.

Now let's finish all the navigation links by fixing Sign In button on the right side of the menu bar. In the same file where we copy the code for the menubar, copy the code below and paste it to header.xml file - one for Sign In and another for logged in user.

community_edition/addons/website/website_template.xml

xml

<!-- Sign In -->
<t t-call="portal.placeholder_user_sign_in">
    <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
    <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
</t>
<!-- User Dropdown -->
<t t-call="portal.user_dropdown">
    <t t-set="_user_name" t-value="true"/>
    <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
    <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
</t>

Replace the current code of Sign In to the above code.

custom-addons/theme_yourhome/views/header.xml

xml

<div class="d-none d-lg-block">
    <ul class="navbar-nav mr-auto">
        <!-- Sign In -->
        <t t-call="portal.placeholder_user_sign_in">
            <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
            <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
        </t>
        <!-- User Dropdown -->
        <t t-call="portal.user_dropdown">
            <t t-set="_user_name" t-value="true"/>
            <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
            <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
        </t>
    </ul>
</div>

Go back to the browser and reload the page and notice the new dropdown link for logged in user.

Do the same think for mobile version. The complete header code will now be same like the below.

custom-addons/theme_yourhome/views/header.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <template id="custom_header" inherit_id="website.layout" name="Custom Header">
        <xpath expr="//header" position="replace">
            <header>
                <nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
                    <div class="container">
                        <a class="navbar-brand" href="#">
                            <img style="height:50px; widht:auto;" src="/theme_yourhome/static/src/img/logo.png"/>
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <t t-foreach="website.menu_id.child_id" t-as="submenu">
                                    <t t-call="website.submenu">
                                        <t t-set="item_class" t-valuef="nav-item"/>
                                        <t t-set="link_class" t-valuef="nav-link font-weight-medium"/>
                                    </t>
                                </t>
                            </ul>
                            <div class="d-block d-lg-none">
                                <ul class="navbar-nav mr-auto">
                                    <!-- Sign In -->
                                    <t t-call="portal.placeholder_user_sign_in">
                                        <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
                                        <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
                                    </t>
                                    <!-- User Dropdown -->
                                    <t t-call="portal.user_dropdown">
                                        <t t-set="_user_name" t-value="true"/>
                                        <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
                                        <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
                                    </t>
                                </ul>
                            </div>
                        </div>

                        <div class="d-none d-lg-block">
                            <ul class="navbar-nav mr-auto">
                                <!-- Sign In -->
                                <t t-call="portal.placeholder_user_sign_in">
                                    <t t-set="_item_class" t-valuef="nav-item ml-lg-auto"/>
                                    <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
                                </t>
                                <!-- User Dropdown -->
                                <t t-call="portal.user_dropdown">
                                    <t t-set="_user_name" t-value="true"/>
                                    <t t-set="_item_class" t-valuef="nav-item dropdown ml-lg-auto"/>
                                    <t t-set="_link_class" t-valuef="nav-link font-weight-bold"/>
                                </t>
                            </ul>
                        </div>
                    </div>
                </nav>
            </header>
        </xpath>
    </template>
</odoo>

Creating Odoo mage submenu

To add Odoo mega submenu, the code is the same for normal menus, except that we will add two fields - is_mega_menu and mega_menu_content. Copy the code below and add it in "theme_yourhome/views/menus.xml" file.

custom-addons/theme_yourhome/views/menus.xml

xml

<record id="menu_rent" model="website.menu">
    <field name="name">Property for Rent</field>
    <field name="url">/rent</field>
    <field name="parent_id" ref="website.main_menu"/>
    <field name="sequence" type="int">15</field>
    <field name="is_mega_menu">True</field>
    <field name="mega_menu_content" type="html">
        <section class="o_cc5">
            <div class="container">
                <div class="row py-5">
                    <div class="col-lg-3">
                        <div class="pb-2 my-2 border-bottom"><a href="/" class="h4">Apartment for Rent</a></div>
                        <ul class="list-unstyled">
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Apartment Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Apartment Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Apartment Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Apartment Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Apartment Number 1</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3">
                        <div class="pb-2 my-2 border-bottom"><a href="/" class="h4">Villa/House for Rent</a></div>
                        <ul class="list-unstyled">
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Villa/House Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Villa/House Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Villa/House Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Villa/House Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Villa/House Number 1</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3">
                        <div class="pb-2 my-2 border-bottom"><a href="/" class="h4">Rooms for Rent</a></div>
                        <ul class="list-unstyled">
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Room Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Room Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Room Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Room Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Room Number 1</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-3">
                        <div class="pb-2 my-2 border-bottom"><a href="/" class="h4">Commercial for Rent</a></div>
                        <ul class="list-unstyled">
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Commercial Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Commercial Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Commercial Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Commercial Number 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="text-white d-flex align-items-center text-decoration-none">
                                    <span class="fa fa-caret-right mr-2"/>
                                    <span>Commercial Number 1</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </field>
</record>

Go to odoo backend and update the them then go to frontend and reload the page. You now have a new mega submenu.

Congratulations, you have now successfully added a new page, a new menu and a new mega submenu. For more details, please check the video below.

How to Create New Odoo Page, Menu and Mega Menu

Creating new Odoo page

Adding Odoo default website layout with header and footer

Create Odoo page layout using bootstrap

Making Odoo menubar dynamic

Creating new website page menu

Creating Odoo mage submenu

Read next article

How to Create Odoo Snippets with Options