Storing partial HTML elements in separate files?

As a learning experience, I've been working on a side bar for a website I am creating with just HTML, CSS, and JavaScript.

I want to display a different side menu depending on what icon the user clicks on. This morning I added the hover highlighting and the click functionality to expand the side bar. However I want to render some new

elements to the space that the side bar creates.

What is the best practice in this case? My non-webdev instincts tell me to separate out the html into different files for readability.