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

Summary

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.

Procedure

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 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.

5. In the Custom HTML/CSS section, for HTML, click the Open HTML code-editor button.
6. 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">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="dropdown-header">Nav header</li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>

2. Repeat Step 6a to add more drop-down menus if necessary.
3. To customize the text of the navigation bars and drop-down menu list, replace the text between the <a> tags with the desired text.
4. 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.

5. Click Apply to save the changes. A customized drop-down menu is added to the navigation header.

7. On the site editor page, click Save to save the modifications.
8. Click the down arrow next to Save, and click Publish Draft to replace the live site with the current draft.