Be The First To Get Support Updates
Want to know about the latest technical content and software updates?

How To: Add a drop-down menu to the navigation header in ArcGIS Hub


In an ArcGIS Hub site, navigation bars can be added to the header to improve the user experience on navigating the site. Drop-down menus can also be added to organize related links or sections under a main navigation bar. The workflow to add a drop-down menu to the navigation header in an ArcGIS Hub site is demonstrated in this article.


  1. Open the ArcGIS Hub site in edit mode. Refer to ArcGIS Hub: Open a site in edit mode for instructions.
  2. On the site editor page, if necessary, click Customize Toggle The Customize Toggle icon. to open the side panel.
  3. In the Customize pane, click Header.
  4. Under Appearance, check the Custom HTML/CSS option. Seven navigation bars are added to the header by default.
The Customize pane and the Header section on the site editor page.
  1. In the Custom HTML/CSS section, for HTML, click the Open HTML code-editor The Open HTML code-editor expand button. button.
  2. Follow the steps below to add a drop-down menu to the header.
    1. In the code-editor, navigate to the <div class="navbar"> section, highlight the whole row of one of the <li> tags, and replace the row with the code below. In this example, the first <li> tag for 'Contact' is replaced with the code below.
<li class="dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
              <a href="#">Action</a>
              <a href="#">Another action</a>
              <a href="#">Something else here</a>
            <li class="divider" role="separator"></li>
            <li class="dropdown-header">Nav header</li>
              <a href="#">Separated link</a>
              <a href="#">One more separated link</a>
The HTML code section of the navbar class.
  1. Repeat Step 6a to add more drop-down menus if necessary.
  2. To customize the text of the navigation bars and drop-down menu list, replace the text between the <a> tags with the desired text.
  3. To add a custom link to the navigation bars and drop-down menu list, replace the # in the href attribute in the <a> tags with a link.
The HTML code section of an <a> tag for the drop-down menu.
  1. Click Apply to save the changes. A customized drop-down menu is added to the navigation header.
The ArcGIS Hub site's navigation header and the drop-down menu.
  1. On the site editor page, click Save to save the modifications.
  2. Click the down arrow next to Save, and click Publish Draft to replace the live site with the current draft.

Related Information

Last Published: 1/25/2023

Article ID: 000029095

Software: Other Product Other ArcGIS Online Current