Customize Top Navigation Menu

[AlexGurovich]

Hi, I'm new to Hubspot. The Top Navigation Menu has the header level options "Contacts", "Conversations", "Marketing", "Sales", "Service", "Automation" and "Reports".

I want to:

1. Remove some of them

2. Position the remaining ones differently to where they are by default.

3. Rename "Contacts" to "Patients"

How can I do that?

[JStamm]

I also would love to be able to customize the navigation/menu. As Hubspot continues to grow and expand, there are becoming many tools that we simply do not use. For example, we do not use Payments, Invoices, Quotes, etc... because we use our ERP system for those things. I would like to remove them from visibility to simplify the system and keep users focused on what we want them to be using. This would also help avoid confusion when onboarding new Hubspot users. 

[warrendavey]

If you have a chrome browser then you can use this tool to customize -
https://apps.pearagon.com/

[JStamm]

Thank you… I am looking for something that would change the navigation for all users within our instance regardless of browser used.

[CarlosM]

I would also like to be able to do this. The old menu was much better before they grouped 'contacts' and 'companies' together on the Sales menu - which was totally pointless! Please make this happen HS.

[EUnaas]

Ok, this decides that I will not choose Hubspot as my CRM system for my company.

....I am sure that the amount you miss out on by not having me as a customer would cover the cost of developing a customisable menu.

[warrendavey]

You can add this functionality now for part of what you want.  

You can now change your HubSpot Navigation with our Chrome extension:

https://youtu.be/hi9NHoSSk_Y

Purchase here for an access key:

https://apps.pearagon.com/sign-in

[SaaSSolutions]

Hi Davey,

Does this tool only work with Chrome? 

Thanks

[warrendavey]

Currently, that is the only solution. Is there a browser you would prefer
to use?

[ACiastoń]

I would say that it would be absolutely crucial for HubSpot to make navigation menu customizable.  I have a very similar situation and it is possible the inability to customize nav-menu will stop me from purchasing Professional package of the system 😞

[mgeorgieva]

Hello there - Thanks so much for your feedback! Can you give a couple of examples of what doesn't disappear for you when you use permissions to restrict access to items in the nav? Or were you more interested in the reordering/renaming items?

Thanks,
Maggie Georgieva

[TTimes]

I agree 100% but I found that you can build nearly anything you'd like with custom modules so you can build your own custom header with custom navigation which works however you'd like.

[ACiastoń]

But HOW?

[TTimes]

What I did was following the Custom Module guide here and created a global custom module:

https://knowledge.hubspot.com/design-manager/create-and-edit-modules

From there I created the fields that I needed and made sure whatever I put in as values in the different fields was working (just adding the module radomly into the boilerplate template and seeing if it would output the values I entered in Hubspot).

Once that was working I cleared partials/header.html so it now looks like this:

<!--
  templateType: global_partial
  label: Website header
-->
<header class="header">
    {# Custom header module #}
    {% module "site_header" path="/my-website-theme/modules/site-header.module" %}
</header>

And my custom header module currently looks like this (yours can be structured however you'd like):

<!-- module html  -->
<div class="header__container content-container">
    {# Logo #}
    <div class="header__logo">
        {% if module.header_logo_field %}
            <a href="/">    
                <img src="{{ module.header_logo_field.src }}" alt="{{ module.header_logo_field.alt }}">
            </a>
        {% endif %}
    </div>
    {# Navigation #}
    <div class="header__navigation">            
        {% menu "dotlegal_menu" id={{ module.header_menu_field }}, site_map_name="Default", overrideable=False, root_type="site_root", flyouts="true", max_levels="2", flow="horizontal", label="Dot Legal Menu" %}
    </div>
    {# Actions #}
    <div class="header__actions">
        {% if module.header__buttons != '' %}
            {# List #}
            <ul class="header__buttons">
                {# Loop #}
                {% for button in module.header_buttons %}
                    {# Items #}
                    <li>                                                   
                        <a href="{{ button.button_link.url.href }}" title="{{ button.btn_link_text }}" class="header__button btn btn--icon {% if button.button_reverse_icon %} btn--default btn--icon-reverse{% elif button.button_reverse_icon is none %} btn--ghost{% endif %}">
                            {# Icon #}
                            {% if button.button_icon %}    
                                <img src="{{ button.button_icon.src }}" alt="{{ button.button_icon.alt }}">
                            {% endif %}
                            {# Text #}
                            <span>{{ button.button_link_text }}</span>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>

Basically it contains an image picker for the logo + a link. Then a menu seletor to pick the primary navigation and lastly a repeater element where the client can add 1 or more buttons (two in this case) - which in turn outputs a header with a left-aligned logo, a centered main nav and two right-aligned buttons (on desktop).

Don't know if that helps at all, but i hope it will shed some light on the process we chose. All in all I'm very fond of the custom module approach since it resembles building custom Gutenberg Blocks with ACF in Wordpress.

[AlexanderData]

Hi.

Do you need to change some links and add others?

Here I share a 45-second video of how it can be done.

Keep in mind that it depends on the account you have, you will have access to make some changes or not

https://www.loom.com/share/9882a5cf9b3349169110339b955ca434

[AlexGurovich]

I dont see you were able to remove  existing or add new top navigation bar menus from the CRM itself, such as "Contacts", "Conversations", "Marketing", "Sales", "Service", "Automation" and "Reports" 

Is that possible at all?

[AlexanderData · Accepted solution]

Ok, now I understand what you really want to do, no that is not possible.
You cannot modify that navigation menu

[MFrankJohnson]

You cannot modify the HubSpot main navigation menu within the UI. However, some items will display as locked for users without access.