Skip navigation button
Hello guys!
I have a skip navigation button in my website like many websites do, but the problem is that when clicking on it, the #content gets added to the url: localhost:3000/home#content
how can i take it off? I saw a video of a person taking it off with javascript but it still appeared for a brief second and i also think it is not a great solution, im sure there is an actual way of doing it but i just could not find anything about it. an example website that has this button without the #content is https://nextjs.org.
Thanks very much!
Next.js by Vercel - The React Framework
Next.js by Vercel is the full-stack React framework for the web.
32 Replies
They probably used a button and a scrollTo in Javascript to stop it from appending. I recommend keeping it as an anchor and letting it append just like you have it, since it sounds like you want to have a link to a specific piece of content.
no because i looked with devtools and their website had an a tag with an href of #something so like that is how they are doing it
Which button on nextjs.org are you talking about that shows this behavior?
Then they're overriding the default html functionality which I don't recommend
when you use tab, there is a skip to content button that shows when you tab
Is there a reason you don't want it to add the hashtag? Like Vince said, no harm in that at all. It's a simple solution that works.
In the video you saw where it did appear, then was removed, what's the problem with that, if you really want to avoid it?
Honestly, not having it is such horrible UX I can't even. Why do you insist on making it hard for the end user to link directly to your content? What is the reasoning behind obfuscating it and forcing people to start at the top of the page and scroll down to find what they're looking for?
Like, are you trying to push people away from your site? Do you not like being nice to your users?
You're forcing your users to open their dev tools and inspect element in order to get a link to a place on your webpage. Why do you feel the need to have your end users do your work for you? What about mobile users who can't open up the dev tools? What about non-devs who don't know that option exists?
You, as the web dev, should be making it easier for your end users to navigate and use your site. This "prettification" makes it harder to use.
/end rant
just looked ugly to be honest, couldn't find a site that had the # in the url so i thought it was a bad thing
No one cares about your ugly url
Just facts... It's only us
yeah i really think you are right. normal people do not even look at the url
Look, dad, no URL bar!
Also URL === best state... You are going to find passing search params is the way the end worked for decades.
So a silly #content anchor will seem trivial
i hate those too lmao but i guess you are right. no one cares
Hate... It's what we got so lol
Unless you live in spa react land 🤢
mh yes
Which then you have bigger problems 😂
Honestly, a lot of complexity has been added to websites to make the URL prettier. And like b1 said: no one but the dev gives a rat's rear-end. It works. It doesn't involve any added complexity, and the browser does it all for you!
this expression is new to me 🤣
Leverage the browser always
Take a second to think about what SPAs do: they literally re-invent the browser…but in JS…which can break…and that breaks your site
btw thanks guys i think i forgot that not everyone is a dev and going to look at the url saying: "looks ugly with the #"
Changing "pages" in a SPA? JS does that…but so does the browser. Want the
BACK button to work? The browser knows how…but now the SPA framework needs to figure that out
Want the SPA to send identifcation info to the backend? That's what cookies are for! Oh, wait, no, JS can't read secure, safe cookies. Now the SPA framework needs to do that tooyeah yeah that sucks
do not use single page applications
It's exhausting just thinking about it! I'll just be over here making "MPAs" (I mean, websites)
lmao it is
Anchors are great for a single page too just tossing that out there 😂
https://benmyers.dev/blog/skip-links/ also one my fav a11y folks has a article about skip links I just wanted to share.
Ben Myers
Implement a Skip Link for Navigation-Heavy Sites
Add a link to the beginning of your page to help keyboard navigators skip over repeated links.
Heck, if you really want to "SPA" it up without using JS…you can do something like this:
Then have each
.content be a "page" and URLs that point to # anchors
MDN on :targetnice ill read it
Forward/back buttons work out of the box. Secure, JS-hidden cookies work. It all just works.
I think I invented the first CSS front-end, state based framework 🤣
If you think the
# looks ugly you can always replace it with a query param ? and then have the browser check for that query param, and then scrollTo the correct element
(i was joking please don't take that seriously 😂)