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

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…
1 Like
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

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.

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…

7

Hi @kid1194 and @rtdany10 ,

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

8

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

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…

1 Like
10

Thank You Very Much bro

1 Like