Vertical Navigation

Vertical navigation creates a sidebar along the left side of the page. You can add 2^nd, 3^rd, and 4^th levels of navigation if necessary. Each sub-level is indented from the previous level.

Difficulty: 3 out of 5 stars

View this Page with Vertical Navigation

Notes about implementing Vertical Navigation

• You can implement up to 4 levels of vertical navigation
• Wrap the vertical navigation in a div with id="vNav"
• Wrap the rest of the content on your page in a div with id="vNavContent
• When there is a sublist underneath a navigation item, the parent li of the sublist gets class="isLB"
• ONLY the active navigation li is to receive class="here"
  • NOTE: in some cases, your li will have 2 classes. For example: <li class="isLB here">

Why use Vertical Navigation?

Making the decision to use vertical navigation instead of horizontal navigation is mostly a cosmetic choice. However, keep in mind that:

• If you need more levels of navigation, vertical is best since is supports up to 4 levels (as compared to 2 levels for horizontal)
• Horizontal navigation is the primary page navigation scheme for FAA websites
• If your application does not need to expand the full width of the page, implement vertical navigation

IMPORTANT: no pages should contain both types of navigation at the same time.