Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Navigation Overview

Matt Carrano edited this page Aug 2, 2018 · 1 revision

PatternFly Navigation System

PatternFly supports a flexible navigation approach that can accommodate simple applications with only a few primary items to larger complex applications with up to three levels of primary navigation.

Usage

When there are only a small number of primary nav items (less than 5) and no secondary items, a simple horizontal nav is the best choice.

single level horizontal

When needed, a context selector can be added.

single level horizontal with context selector

When there are 5 or more primary items, a vertical menu is recommended.

single level vertical

If there are secondary items, a vertical menu is recommended even if there are only a small number of primary items. In this configuration, you may mix items that require one or two levels. Primary items with two levels may be collapsed.

two level vertical

A third level can be exposed by adding an interior horizontal menu for local navigation. This approach keeps the working level visible at all times. This option is versatile enough to appear in any container.

three level vertical

Note here that a context Selector can be added to the header area at any time to apply context to the global navigation.

Content

(optional) Provide content standards and writing suggestions for this component or pattern to help designers and developers deliver consistent and thoughtful content. You can include guidelines, messaging standards, or similar best practices specific to this component or pattern.This will extend any general terminology and wording best practices to provide component specific guidance.

  • Editorial guidelines for labeling and message text
  • Length restrictions and/or what to do if text overflows
  • Localization considerations

Clone this wiki locally