Odoo 19 comes with several improvements that make PoS customization easier and more flexible. Updating icons to the navbar helps the interface look cleaner and easier to use. This blog explains how to add an icon to the pos navbar in Odoo 19.
We can create a custom module by adding XML files inside the static/src/xml directory.
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<!-- Extend POS Navbar -->
<t t-inherit="point_of_sale.Navbar"
t-inherit-mode="extension">
<!-- Add icon before right header -->
<xpath expr="//div[hasclass('pos-rightheader')]"
position="before">
<button class="btn btn-light mx-2"
t-on-click="onNavbarIconClick"
title="Custom Action">
<i class="fa fa-bell"/>
</button>
</xpath>
</t>
</templates>
The above XML file explains how to add a custom icon to the existing POS Navbar.
To create the functionality for the custom icon, we need to add js file
/** @odoo-module **/
import { patch } from "@web/core/utils/patch";
import { Navbar } from "@point_of_sale/app/components/navbar/navbar";
patch(Navbar.prototype, {
onNavbarIconClick() {
alert("Button Clicked");
},
});
The code above explains the action of the icon. The alert box is shown when the icon is clicked.
Finally, add all the files to the manifest so the customisations work properly in odoo
'assets': {
'point_of_sale._assets_pos': [
'/Module_name/static/src/**/*',
],
},Adding an icon to the PoS navbar in Odoo is a simple way to improve the look and usability of the PoS screen. Using QWeb templates and JavaScript, you can customize the navbar based on your business requirements.
By following these steps, you can add useful shortcuts, custom actions, or extra features directly to the PoS interface, making it easier and more convenient for users.
To read more about How to Add an Icon to the POS Navbar in Odoo 18, refer to our blog How to Add an Icon to the POS Navbar in Odoo 18.