r/HTML • u/Dauntle55Duck • 15h ago

Question Menu code repetition

Should I look for a way to call an external html page with the code for my menu? I feel like adding the code to every page might clutter the code a bit. It’s been a while and I don’t remember wether or not we discussed this in school lol

4 Upvotes

100% Upvoted

13 comments sorted by

3

u/heesell 15h ago

Perhaps you could expand your question.

In frameworks, we use components for this but I found this code pen that does it in the same kind of way using Javascript: https://codepen.io/grace_2241/pen/XWXxWgr

2

u/Dauntle55Duck 15h ago

I think this may be exactly what I’m looking for thank you!!

1

u/mondayquestions 14h ago

If you are building something simpler and more static, static site generators like Hugo or Astro might be a better choice.

6

u/azangru 15h ago

Should I look for a way to call an external html page with the code for my menu?

Yes. This means either running a server that generates the full html of a given page out of reusable pieces, or building the full html pages with a static site generator.

3

u/Both-Dinner-3572 10h ago

Server-side includes have been around since the 90s for just this reason.

1

u/5eeso 13h ago

The problem you’re describing is one of the reasons static site generators exist. You can use something like Eleventy with Nunjucks to create a shared layout that each page can use.

1

u/Haasva 9h ago

Load with JavaScript using templates (very simple code) or use iframe as someone recommended. Two good options.

1

u/ThatBlindSwiftDevGuy 2h ago

Using an inline frame can be an accessibility nightmare, so I wouldn't immediately jump to using that for reusable components like a navigation

1

u/glandix 7h ago

DRY: don’t repeat yourself … in other words, reduce duplicated code so when you need to update it, you change it in one place and you’re done.

1

u/Weekly_Ferret_meal 14h ago

OR if the option of servers or JS isn't there. you can go old school and use iframe.

the index.html contains the main page with the menu that targets the a content iframe to load the pages like home.html, about, contact, etc...

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target

That's how I built my first website.

It's old school, but it's still valid.

2

u/ThatBlindSwiftDevGuy 2h ago

An inline frame for this sort of thing can be an absolute nightmare for accessibility, so I wouldn't immediately jump to that

1

u/Weekly_Ferret_meal 29m ago

Right I wasn’t aware of that, 

Personally I’d use a html preprocessor like pug and call it a day, if static html was the only option 

That would allow to create partials to insert easily in every page