I’m kind of stuck on what the best option would be for the navigation on my site. I like things like the updating ones found here, but they’ve used Javascript and I’ve seen people talking about disabling Javascript entirely. I’m just annoyed by having to manually update everything each time I want to add a page! What do you prefer when you visit sites? What do you do on your own site?
The current version of my website has a “/menu” page to which every page and post links. That way, if I add more pages, I need only link to them in one place.
2 Likes
my site navigation from the homepage is inconvenient on purpose because it’s fun 
generally speaking my site navigation style on my site is like hubs n spokes. dunno if there’s a word for it. but like the main page links to sections, and a section page links to the pages in that section.
there’s mooostly no navigation bar or menu or anything, but i do have some in some places. zonelets, which uses javascript, for my blog for example. i don’t especially care about making it useable to noscripters so i dont worry about it.
for the cover art museum i just copy and pasted the nav bar along with the rest of the page template for every page
i don’t have much of a preference when it comes to other sites! i like em all. dropdown menu, sidebar, top bar, menus, hubs, imgmaps, iframes, whatever haha.
you could do the javascript one you linked with an iframe instead if you don’t want to use javascript! iframes are useful for that sort of thing. instead of doing the <script></script>on every page just do an <iframe src="navigation.html"></iframe> instead. iframes are a bit of a pain to format and position sometimes but you can usually browbeat them into cooperating with enough fiddling and container divs
Thank you both for your input!
@xixxii Oh yeah, I know about iframes! My concern is that they might be harder to format so they’ll look consistent across devices. I could be wrong but they seem harder to pull off.
I use a static site generator (specifically Eleventy) to build my website, so I can set it up to automatically update my navigation bar with a link to a new page. On mobile view, my navigation bar becomes a navigation menu that I made by using the HTML popover attribute).
That said, as the number of links I want to add to my navigation bar grew, I decided to make an Explore page to list the top level links on my websites, to give visitors a page to navigate my website with those links.
1 Like
Like Leilukin, I use a static site generator so that I can edit my menus in one place and have them appear on every page. It’s very handy!
Other ways to achieve this (aside from JavaScript) include PHP and I think server side includes, but since I use hosting for static sites those aren’t really an option.
1 Like
I actually use a completely static site with no iframes or generation or javascript at all; I just use my coding app (notepad++ lol) to do a mass find+replace when I want to edit it across all my pages :)
2 Likes
This actually sounds really practical!
A big thanks to everyone who’s replied. I feel a bit more reassured about using a javascript navbar and will probably do that since it sounds like more practical option for me right now. That said, I always enjoy reading about how people make choices for their sites, so feel free to keep those replies coming 
1 Like
I used an accessible menu made by someone else which handles dropdowns as well that can be navigated by keyboard too :] … it is using javascript though, but either way I use javascript on my site to put my header, footer, and sidebar specifically so I don’t need to re-do them for every page
2 Likes
I’ve been thinking recently about how sites are organized and visualized and how to add things like menus and footers to every page. I wrote two pages, one about site maps and visualizations and the other about the different methods I know of for adding menus and reusing other pages.
2 Likes
@sylviegirly does this need to be updated on each page or is it one of those setups where you only need to change it on one file when you add stuff? I like the accessibility aspect.
@brisray thank you for those links! I’m struggling with organising my site so this is very helpful, I’ll go read them now.
i have all my nav/sidebar stuff to be initiated in JS file so it’s just a single one you need to edit w/the content (i can say it was a little annoying integrating it into my JS file, but this is just a sample of my header JS)
document.addEventListener("DOMContentLoaded", function () {
// Page has finished loading. Now, do things.
new NavHeader();
});
const content = `
<nav>
<button id="toggle-0" aria-label="Toggle main menu">☰</button>
<ul id="menu-0">
<li id="item-1-0-0"><a id="link-1-0-0" href="/index.html">Home</a></li>
<li id="item-2-0-0"><a id="link-2-0-0" href="/about.html">About Me</a></li>
<li id="item-3-0-0" class="dropdown">
<a id="link-3-0-0" href="#">Personal</a>
<ul id="menu-3">
<li id="item-3-1-0"><a id="link-3-1-0" href="/gallery.html">Artwork</a></li>
<li id="item-3-2-0"><a id="link-3-2-0" href="/blog.html">Blog</a></li>
<li id="item-3-3-0"><a id="link-3-3-0" href="/listfauxgraphy">Listography</a></li>
<li id="item-3-4-0"><a id="link-3-4-0" href="/manifesto.html">Manifesto</a></li>
<li id="item-3-5-0"><a id="link-3-5-0" href="/now.html">Now</a></li>
<li id="item-3-6-0"><a id="link-3-6-0" href="/to-do.html">To-Do List</a></li>
</ul>
</li>
<li id="item-4-0-0" class="dropdown">
<a id="link-4-0-0" href="#">OCs / Shrines</a>
<ul id="menu-4">
<li id="item-4-1-0"><a id="link-4-1-0" href="/oc/sylvie.html">Sylvie</a></li>
<li id="item-4-2-0"><a id="link-4-2-0" href="/oc/yadyra.html">Yadyra</a></li>
<li id="item-4-3-0"><a id="link-4-3-0" href="/oc/nameless.html">Nameless</a></li>
<li id="item-4-4-0"><a id="link-4-4-0" href="/ocs.html">Other OCs</a></li>
<li id="item-4-5-0" class="dropdown">
<a id="link-4-5-0" href="#">Shrines</a>
<ul id="menu-4-5">
<li id="item-4-5-1"><a id="link-4-5-1" href="/shrines/zhongli.html">Zhongli</a></li>
<li id="item-4-5-2"><a id="link-4-5-2" href="/shrines/zhongvie.html">Zhongvie (🌿🔶)</a></li>
<li id="item-4-5-3"><a id="link-4-5-3" href="/shrines/ukitake.html">Jushiro Ukitake</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
`;
class NavHeader extends HTMLElement {
constructor() {
super();
this.innerHTML = content;
}
}
customElements.define("nav-header", NavHeader);
the accessibility navbar comes with its own JS files, so it’d be just initiating those in each page + your header, otherwise any changes can be done in a single file. this isn’t the full file for my header, but just as a rough idea of what it looks like :]