"Tabs" as Main Site Navigation or?

www.philwilson.ca
Reference, www.oma.eu

Hello,
I am trying to mimic the navigation on the OMA website.

First I made a navigation bar as a symbol out of text links. I was able to make them layer and scale correctly with mobile or desktop using VW on the text size. OK.

Then I noticed on the OMA site that when a nav link is clicked a new page does not load but rather the information just appears and is more seamless - this seems more inline with the “tabs” feature with webflow. OK.

I remade my nav bar using the “tabs” feature and got it layered correctly / scaling correctly. I added some content in the “tabs content” but feel quite restricted by not being able to have a section inside a section… however the content does load immediately …

Am I using tabs correctly? What would be the best method to use to mimic the OMA website main navigation? Is there something I am missing entirely?

No, don’t use tabs for navigation, use a list. That’s what OMA use.
You can always use the Inspect on Chrome to look at the code on another site to see how things are built. (right click, Inspect or ctrl shift i)

On the WORK page, there’s another list too for Projects, Lectures etc.

Don’t forget your skip link :wink: https://a11y.webflow.io/post/skip-links

Thankyou for your reply - it sets me on the right track.

I don’t use inspect enough. However - when I use inspect on the OMA home page and hover their navigation I do not see “list” how can I understand that they have used list (other than you telling me) by observing through inspect.

1 Like

Was also just reviewing your page on accessibility. I was most interested in the contrasting link color (for my now-list nav bar) so that it will switch to black and white depending on the background (as the nav bar is transparant) is this why you had sent the link along? I do not fully understand “skip links” or why more precisely my site will need them. I can imagine in the case of the OMA website (my prime example) That the content loads vertically and is read in the same way. If a user was visiting the OMA website and listening to it rather then looking at it - would content not both load and be consumed in a similar fashion - what or why would they need to skip?

That’s a very good question, so I added Lists to NoCodetoKnowCode.com
Thanks for the nudge!

If you any more questions, let me know

Another great question!

The skip link is for screen readers to skip over long and repetitive content, such as the menu.
As you browse the website, you will see the menu at the top of every page. But you don’t LOOK at it, you ignore it, and start reading the page.
Skip links give Screen reader people the chance to skip over the menu and get right into the content.