Navigation on the page using anchors, and links to other pages, combined?

Question

I'm building a website where the index page acts like a "landing" page, with several sections of interest and call to actions throughout, the website also has 2 to 3 other pages.

Now I'm wondering, because I haven't seen any examples of this, if it is clear to the user if those two navigations are combined?

This is what I came up with, where the home page has nav items that have slightly less opacity, referencing to the anchor tags (scrollTo) on the page, and a secondary navigation to the right for the other pages.

Logo is hidden for privacy reasons

Would this be considered a good practice? Or is it confusing to the user? This would also mean that the navigation with "referenties" and "team", is hidden on the other pages, since those anchor tags won't exist there.

Edit, from my research

I've seen that a lot of designers that work in a similar style just don't have the one-page navigation for the homepage. I'm not sure if it's good to assume that the user will scroll instead of navigating away from the landing/home page straight away, but I find very few examples of this double-navigation case.

Answer 1

I dont think this is good practice. You pointed out yourself that the anchor links would not exist on the other pages which definitely is confusing. The distinction with different color does not help either. It looks more like the anchor links are inactive.

The hierarchy should be represented in the navigation. You try to achieve the opposite. You bring all information blocks into the same navigation level although this does not correspond to the actual hierarchy at all. So first I would reconsider the hierarchy. Why is «references» and «team» not an separate page like «process» or «careers»?

If you come to the conclusion that it is right to have them on home I would visually separate the anchor links from the site navigation. There are several ways to achieve this depending on your page design.

• have the anchor links in a second line, make it clear that they are a submenu of «Home»
• if you use a stage image, show the anchor links below that stage image, if it is fullscreen maybe even as part of the stage

Either way the goal is, to visualize that the anchor links belong to the page rather then to the navigation.

Answer 2

I agree with the other comments, the hierarchy isn't clear here and you're going to run into issues if your navigation options grow over time.

Try creating a navbar with the product logo, page navigation (Home, Cases, One process) and any global actions (Talk to an expert, Sign in, Search etc). Check out some examples on Tailwind UI for inspiration.

Then, you could use another navigation patter for the page navigation (Referenties, Team etc). This could be a sidebar (if you anticipate lots of items) or a horizontal layout below the Page title or main navbar. Again, check out Tailwind UI for some ideas on how this could work.

Play around with colour and contrast to help reinforce the hierarchy. For example, the navbar could use the purple in your example and the scondary nav could be more integrated with the page layout, e.g. using a subtle dividing line.

I hope that helps!

Answer 3

I agree with what Bruno said, specially:

I dont think this is good practice.

You bring all information blocks into the same navigation level although this does not correspond to the actual hierarchy at all.

Now, I think you could still have them both as methods of navigation in the same page, but you should clearly separate their hierarchy levels.

One way to do this would be to have a floating menu, either on the left or at the bottom to clearly give them a lower hierarchy and getting them closer to the content which will it have an effect on. You can also make it so these items appear as active (more brightness and/or saturation) when going through specific breakpoints to showcase which area of the page you are currently viewing.

I'd even go as far as to say that if you do this properly and you clearly define the interactions, you can reuse the same anchor component.