Create a template that contains a header, left side, and main content area as shown below.
You do not need to modify the template file.
Create another file called navigation.xhtml. This will be used to contain links
Home
Products
Contact Us
Inside these tags create a div tag with a class that matches the name of the div in the template where the navigation will appear which is called left.
Inside the div tag create the links using the < h:commandLink> tag.
The links must be enclosed in < h:form> tags.
Next create the pages for the links with names such as home.xhtml, products.xhtml, and contactus.xhtml based on the template.
All three pages will use < ui:include> tags to place the navigation in the left div. And for all three pages place "Welcome to Our Company" in the top area and change the content to say what page it is.
Below is how your pages should look. see image.
Clicking the Products link shows this: see image.
From the Products page, clicking the Contact Us links displays this:
Note: the address bar does not display the correct page. So for the Contact Us page, it displays in the address bar products.xhtml since I clicked the link from that page. It displays the last page that was displayed.