View on GitHub

oVirt Design

Masthead and Vertical Navigation

Masthead and Vertical Navigation Overview

The PatternFly 4 designs for the masthead and vertical navigation feature an updated visual design based off of PatternFly 4 components. masthead-and-vertical-navigation-1

Hamburger Menu

If the user clicks on the hamburger menu, the vertical navigation can be fully collapsed or expanded. masthead-and-vertical-navigation-2

Expanded Section

To expand a section the user can click on the caret and the sub menu items appear below the expanded caret. masthead-and-vertical-navigation-3

Multiple Subsections Expanded

The user can have multiple sub menus expanded at the same time. masthead-and-vertical-navigation-4

Highlighted Section

If a user selects a menu item, the item and the sub menu section become highlighted. The content area reflects the menu selection as well. masthead-and-vertical-navigation-5