Help:Sidebar Navigation

Why Include a Sidebar Navigation Menu?

Just look at the Microsoft.com wikipage. Adding a Sidebar Navigation Menu allows users to browse all of your websites and products from all of your wikipages and it does it in a clean, elegant format. You can customize the Sidebar to your needs until it truly reflects your organization.

How to Create a Sidebar Navigation Menu

  • First create a page entitled: Template:YourSiteNav

So if your website is the Economist.com, you would type Template:EconomistNav into the Seach bar and then create the page.

  • Now copy this into the new page
{| cellpadding="10px" cellspacing="0px" align="left" style="background-color:#DCDCDC; border:20px solid #FFFFFF" frame="rhs"
|-
|align="left" width="154px" |
<center>{{{Logo}}}</center>
 
----
 
<center>'''[[OrganizationPage|Organization Name]]:'''</center>
*[[Page1|Page1 Text]]
**[[SubPage1|SubPage1 Text]]
**[[SubPage2|SubPage2 Text]]
*[[Page2|Page2 Text]]
* Header text
**[[Article 1|Article1 Text]]
**[[Article 2|Article2 Text]]
|}

This is a basic template for a Sidebar Navigation bar. Replace "OrganizationPage" with your company's website and type its name in place of "Oganization Name". Now you can customize the template to your needs. Do you need more large categories? simply add them in the same bulleted format. They do not need to be links, for instance, where it says "Header text," you might write Products and then proceed to link your project pages into the template.

Once you have finished the template, you can go to the pages you would like to include it on and type:

{{YourSiteNav|
Logo = [[Image:YourImage|150px]] |
}}

Replace "YourSiteNav" with the name of the template and include a image of your choosing, this image can be different for each of the pages linked to by your sidebar. (If you would rather not include images, remove the line <center>{{{Logo}}}</center> from the template, and the line Logo = [[Image:YourImage|150px]] | from the template call.)

Tips and Tricks

  • If you would like your sidebar to align in the center or the right hand side of the screen, go to the template page and replace "align="left"" with "align="center"" or "align="right"".
  • To change the color of your sidebar, edit the template section
style="background-color:#DCDCDC; border:20px solid #FFFFFF"

and replace "DCDCDC" and "FFFFFF" with a color of your choice using a color-code that can be found here.