How to add new dropdown in Navbar near the Help dropdown?

ERPNext
,
1

Hello Guys,

I need new dropdown in navbar.

In Navbar settings, Under Dropdowns only 2 tables are present. How to add new table?

image
image1422Ă—924 84.4 KB

Thank you

1 Like
2

@crazy_explorer I hope that this helps…

  1. Create a custom field in the Navbar Settings doctyp
fieldname: 'custom_dropdown' or something else
fieldtype: 'Table'
options: 'Navbar Item'
insert_after: 'help_dropdown'
  1. Modify the navbar html file frappe/public/js/frappe/ui/toolbar/navbar.html then add the following.
<li class="nav-item dropdown dropdown-custom dropdown-mobile d-none d-lg-block">
	<a class="nav-link" data-toggle="dropdown" href="#" onclick="return false;">
		<!-- Label -->
		{{ __("Custom") }}
		<span>
		    <!-- Icon -->
			<svg class="icon icon-xs"><use href="#icon-custom"></use></svg>
		</span>
	</a>
	<div class="dropdown-menu dropdown-menu-right" id="toolbar-custom" role="menu">
		<div id="help-links"></div>
		<div class="dropdown-divider documentation-links"></div>
		<!-- Dropdown Fieldname -->
		{% for item in navbar_settings.custom_dropdown %}
			{% if (!item.hidden) { %}
				{% if (item.route) { %}
					<a class="dropdown-item" href="{{ item.route }}">
						{%= __(item.item_label) %}
					</a>
				{% } else if (item.action) { %}
					<a class="dropdown-item" onclick="return {{ item.action }}">
						{%= __(item.item_label) %}
					</a>
				{% } else { %}
					<div class="dropdown-divider"></div>
				{% } %}
			{% } %}
		{% endfor %}
	</div>
</li>

After…

<li class="nav-item dropdown dropdown-help dropdown-mobile d-none d-lg-block">
...
</li>
  1. Modify the word custom and Custom with the icon name, label, navbar settings fieldname and css class if there is any…
2 Likes
3

Hi @kid1194,

How to create a custom field in the Navbar Settings doctype?
There is a Doctype called Custom Fields.
image
Inside new custom field there is no Doctype called Navbar Settings

image
image1338Ă—541 37.8 KB

1 Like
4

@crazy_explorer In the Custom Field doctype there are filters applied when selecting a doctype and that’s why you can’t find it…

How about you go to DocType doctype and find Navbar Settings then customize the whole doctype…

5

Bad idea, @kid1194
It’s not advisable to touch the core code. Better override it with a custom app.

1 Like
6

@rtdany10 I do agree with you but my solution was what popped up in my head at that time :sweat_smile:

@crazy_explorer Please also note that the best way to achieve what you want is by overriding the navbar js & html files using a custom plugin…

1 Like
7

Hi @kid1194 and @rtdany10 ,

Thanks for your support. I’ll check and let you know.

1 Like
8

@rtdany10 @kid1194
Hello ,
How to override the navbar js & html files , in custom app
thanks

1 Like
9

Hey bro…

You can override the js file by creating a custom plugin that extends and modifies the main js file…

For html, I’m not really sure how…

I hope that I was helpful…

2 Likes
10

Thank You Very Much bro

2 Likes
11

Add hook in your custom app → hook.py
app_include_js = “/assets/your_cus_app_name/js/desk/custom_nav_items.js”

And in you custom_nav_items.js use below script to add items as per your requirements:

// Configuration object
const config = {
items: [
{
targetSelector: “.navbar-nav li.dropdown-notifications”,
html: <li class="nav-item dropdown-reload"> <button class="btn-reset nav-link" onclick="frappe.ui.toolbar.clear_cache();"> <span> <svg class="es-icon icon-sm"> <use href="#es-line-reload"></use> </svg> </span> </button> </li>
},
// Add more items here
]
};

$(document).ready(function () {
// Loop through each configured item
config.items.forEach((item) => {
// Find the target element for the current item
const targetElement = $(item.targetSelector);

    // Exit if the target element is not found
    if (targetElement.length === 0) return;

    // Append the item's HTML right after the target element
    targetElement.after(item.html);
});

});

1 Like