Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Juliana Correa
Juliana Correa
1,808 Points

Including navbar in multiple pages

Hi! What is the best way to include the same navbar in different pages without having to repeat the content?

I've seen this post about HTML includes, but it seems like not every browser supports it.

http://blog.teamtreehouse.com/introduction-html-imports

I've also seen this thread, but it's ASP.NET specific and it wasn't answered

https://teamtreehouse.com/community/how-to-include-common-content-like-navbars-on-multiple-pages

Finally, I've read suggestions in stackoverflow to use a tool called grunt-bake.

Isn't there a simple and prefered way to do this? Am I mising some point here? I don't really want to follow the long page with multiple divs pattern that seems to be ubiquitous with bootstrap websites, because some of the pages may include sensitive content that is exclusive to specific users.

Thanks!!

Damien Richcreek
Damien Richcreek
5,527 Points

I'm still learning myself but if you look into Node.JS, Express and EJS... that seems like the best route to go because it's based off of JavaScript, which is supported by all the mainstream browsers.

Cloud9 is a great site that you can use to try out your app without fear or the hassle of installing the frameworks on your computer.

1 Answer

Austin Whipple
Austin Whipple
29,847 Points

If you're building an application, you're probably better off using the templating techniques of the chosen language. For instance, PHP allows you to create a page the includes numerous other files that can be reused all over the place. All other server-side languages (Python, Node.JS, etc) can help you achieve this as well.

If you're sticking with HTML, you can use server-side includes thanks to Apache. You could create a nav.shtml or header.shtml file and include it in your index.shtml and other files. These pages are then generated by the server before being delivered to the site visitor.

Juliana Correa
Juliana Correa
1,808 Points

Thank you, Austin! Until HTML imports are fully supported, I'll follow these options! :)