Vertical Navigation is a ul of class ux-vnav. The ul has a default width of 12T, but you can add any of the utility width classes between ux-width-13t and ux-width-17t to override the default. Each navigation item should go in its own li and be wrapped in a link (even if that link is empty). If a navigation item has its own sub-navigation that should be placed in another ul immediately following the linked navigation item. A disabled list item should get a class of ux-vnav-disabled.
If there is a selected list item in your navigation the li should get the class ux-vnav-selected.
ux.js handles hover, click, and touch events for this pattern. Parent list items should indicate that they have sub-navigation by getting a class of either ux-vnav-submenu-open or ux-vnav-submenu-closed. If you do not add one of these ux.js sets a default state of open for selected items (or items whose sub-navigation contains the selected item) or closed for everything else.
© Optum 2015 - Matt Lavallee - Senior UI/UX Designer, Inc. - All Rights Reserved