nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

HubNavigation Question

MatthewKalcich

Hi All,

Just a quick question... Is there an easy way to navigate through a HUB site? For example create book marks for specific sections and reference those book marks in a drop down at the top of the screen to quick navigate through a page? Just curious if this functionality exists

Thanks,

Matt

Encontre mais publicações marcadas com

Accepted answers

Anonymous User

You can look up how to do "anchor linking" on a site.

Boils down to...

Put some HTML somewhere with the "anchor" using the HTML element's ID attribute.... `<div id="destination"></div>
Then make a link using your dropdown or custom HTML or the menu bar Katie links above...like <a href="#destination">My link</a>

These folks from Pennsylvania have done this on their main site

Bucks County

All comments

Samuel_McAuley

Hi, I was trying to achieve exactly this and after a little trial and error this is how I got it to work. My use case is I added an FAQ to my site and want to jump to sections of that FAQ where it is grouped by theme.

Immediately above the section that you want to be able to quickly jump to add this into your html code:

You can give your own "Id" value to suit your page content.

Then to insert a link to that section, use this syntax:

<a href="#Troubleshooting">Troubleshooting</a>

And voila!

BrettShaver

Hi @Anonymous User - is there any better documentation around how to do this? Similar to StoryMap Navigation. I'd probably be able to follow your ideas easily if I knew HTML. This seems like it should be an easy out of the box concept to implement (again similar to story maps nav bar). thanks!

Anonymous User

offset for the height of the header is the way!

JenniferSherry

Hello-

I've begun to implement these anchor tags on our internal Hub site. I'm finding when I click the link to the anchor, the beginning of the section that I'm jumping to is hidden behind the fixed site header. I've dug around for a solution that would involve some sort of anchor padding that's equal to the height of the header, but I'm pretty new to this, so I haven't found something that works yet.

Any thoughts? I notice in the Bucks County example provided, the same thing happens.

Thanks in advance!

Jennifer

Anonymous User

You can look up how to do "anchor linking" on a site.

Boils down to...

Put some HTML somewhere with the "anchor" using the HTML element's ID attribute.... `<div id="destination"></div>
Then make a link using your dropdown or custom HTML or the menu bar Katie links above...like <a href="#destination">My link</a>

These folks from Pennsylvania have done this on their main site

Bucks County

KatelynThompson

Hi Matt,

Here are some resources on how to add menu links to a site's header:
Configure global navigation and menu links—ArcGIS Hub | Documentation
Global Navigation: New Ways to Get Around and Brand your Sites with ArcGIS Hub and ArcGIS Enterprise Sites

Note that any links, branding, etc added to your site's header will automatically be applied to any hub pages added to your site. This is useful for creating consistency between your site and any pages you may wish to add.

You may also find the Navbar Dropdown section of this guide useful for creating dropdown menus with HTML:

Coronavirus Response - Code Samples

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.