Context / Full nav

The sidebar nav. This can be "ou-context-nav" or "ou-full-nav".

div.ou-context-nav or div.ou-full-nav.

The difference between the two is that the full nav is a fully expanding and collapsing tree relative to the home page of the site. The context-nav recognises that large sites could end up with a huge side bar nav and enables site designers more flexability.

Note that the title in both cases must be an H2 element.

li.ou-expanded signifies the parent of the currently active page.

Another way of thinking about the difference between the two navs:

Consider this site map:

• Supermarket Home
  • Groceries
    • Fruit
      • Apples
      • Oranges
      • Bananas
    • Vegetables
      • Potatoes
      • Leeks
      • Onions
  • Electrical
    • Televisions
    • Radios
    • Irons

The "full nav" would represent the entire site structure in the expanding and contracting sidebar nav.

The "context nav" would represent the "department" you were in and that only.

So let's imagine we're on the "Radios" page..

Full nav version..

• Supermarket Home
  • Groceries
  • Electrical
    • Televisions
    • Radios
    • Irons

Context nav version..

Electrical

• Televisions
• Radios
• Irons

This page was last updated on Wednesday November 13, 2019