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
- Open the ArcGIS Hub site in edit mode. Refer to ArcGIS Hub: Open a site in edit mode for instructions.
- On the site editor page, if necessary, click Customize Toggle
to open the side panel. - In the Customize pane, click Header.
- Under Appearance, check the Custom HTML/CSS option. Seven navigation bars are added to the header by default.
- In the Custom HTML/CSS section, for HTML, click the Open HTML code-editor
button. - Follow the steps below to add a drop-down menu to the header.
- 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>
- Repeat Step 6a to add more drop-down menus if necessary.
- To customize the text of the navigation bars and drop-down menu list, replace the text between the <a> tags with the desired text.
- 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.
- Click Apply to save the changes. A customized drop-down menu is added to the navigation header.
- On the site editor page, click Save to save the modifications.
- Click the down arrow next to Save, and click Publish Draft to replace the live site with the current draft.