From 95eb7ca28d8e8b85149f7ea21a33d97e9c8ecece Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Fri, 13 Jun 2025 15:22:35 -0400 Subject: [PATCH 1/2] docs(navigation): Updates images for v6. --- .../navigation/img/nav-elements.svg | 124 ++++++++++++++++++ .../navigation/img/nav-horizontal.svg | 69 ++++++++++ .../components/navigation/img/nav-mobile.svg | 90 +++++++++++++ .../img/nav-secondary-horizontal.svg | 87 ++++++++++++ .../navigation/img/nav-secondary-vertical.svg | 81 ++++++++++++ .../img/nav-vertical-drilldown-flyout.svg | 78 +++++++++++ ...-vertical-drilldown-tertiary-expansion.svg | 70 ++++++++++ .../navigation/img/nav-vertical-drilldown.svg | 54 ++++++++ .../navigation/img/nav-vertical-expand1.svg | 28 ++++ .../navigation/img/nav-vertical-expand2.svg | 25 ++++ .../img/nav-vertical-expansion-drilldown.svg | 63 +++++++++ .../navigation/img/nav-vertical-flyout.svg | 66 ++++++++++ .../navigation/img/nav-vertical-grouped.svg | 33 +++++ .../navigation/img/nav-vertical-simple.svg | 31 +++++ .../components/navigation/navigation.md | 60 ++++++--- 15 files changed, 943 insertions(+), 16 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-elements.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-horizontal.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-mobile.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-secondary-horizontal.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-secondary-vertical.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown-flyout.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown-tertiary-expansion.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expand1.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expand2.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expansion-drilldown.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-flyout.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-grouped.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-simple.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-elements.svg new file mode 100644 index 0000000000..cb3a942394 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-elements.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-horizontal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-horizontal.svg new file mode 100644 index 0000000000..a6eda0e510 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-horizontal.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-mobile.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-mobile.svg new file mode 100644 index 0000000000..d743b076fb --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-mobile.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-secondary-horizontal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-secondary-horizontal.svg new file mode 100644 index 0000000000..8c73cd9567 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-secondary-horizontal.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-secondary-vertical.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-secondary-vertical.svg new file mode 100644 index 0000000000..b742a62f73 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-secondary-vertical.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown-flyout.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown-flyout.svg new file mode 100644 index 0000000000..c754830da5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown-flyout.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown-tertiary-expansion.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown-tertiary-expansion.svg new file mode 100644 index 0000000000..b2089182f4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown-tertiary-expansion.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown.svg new file mode 100644 index 0000000000..83e7657260 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-drilldown.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expand1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expand1.svg new file mode 100644 index 0000000000..ccff05f3bd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expand1.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expand2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expand2.svg new file mode 100644 index 0000000000..14ddefbf4b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expand2.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expansion-drilldown.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expansion-drilldown.svg new file mode 100644 index 0000000000..ebcf789c48 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-expansion-drilldown.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-flyout.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-flyout.svg new file mode 100644 index 0000000000..941b8ea257 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-flyout.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-grouped.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-grouped.svg new file mode 100644 index 0000000000..3e3c4083d6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-grouped.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-simple.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-simple.svg new file mode 100644 index 0000000000..7cdfee9ddf --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/img/nav-vertical-simple.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/navigation.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/navigation.md index c81c55f2d7..21146a1b39 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/navigation.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/navigation.md @@ -4,9 +4,13 @@ section: components related: ['Page', 'Breadcrumb', 'Tabs'] --- +import '../components.css'; + ## Elements -Examples of different navigations offered by PatternFly +
+![Elements of the different navigations offered by PatternFly.](./img/nav-elements.svg) +
1. **Masthead** 2. [**Horizontal navigation**](#horizontal-navigation) @@ -33,8 +37,6 @@ There are two main variations of the navigation component each of which contain ### Vertical navigation -Example of simple vertical navigation - Vertical navigation is hierarchical global navigation that displays navigation options from top to bottom on the left side of a screen. PatternFly vertical navigation can be collapsed to provide additional screen real estate by using a menu icon button at the top left. #### When to use @@ -48,31 +50,41 @@ Patternfly vertical navigation system includes several variants as described bel When you only have one level of navigation to display, use a simple, single-level vertical navigation. -Example of simple vertical navigation +
+![Example of simple vertical navigation.](./img/nav-vertical-simple.svg) +
### Grouped navigation When you have a small amount of secondary navigation items, you can group your items and display them persistently beneath the primary navigation items. -Example of grouped vertical navigation +
+![Example of grouped vertical navigation.](./img/nav-vertical-grouped.svg) +
### Expandable two-level navigation When you have a large number of secondary navigation items, you can use an expandable navigation to collapse and expand options as needed. -Example of expandable vertical navigation +
+![Example of expandable vertical navigation.](./img/nav-vertical-expand1.svg) +
### Expandable three-level navigation When you have three levels of navigation items, you can use a three-level expandable navigation to expose tertiary navigation items. Expansion works well when there are small numbers of items at the current level and the entire page hierarchy can be visualized at the same time. -Example of expandable tertiary vertical navigation +
+![Example of expandable tertiary vertical navigation.](./img/nav-vertical-expand2.svg) +
### Fly-out navigation Fly-out navigation exposes navigation items nested within a parent node in an overlay panel that appears to the right of the parent item on hover or click. Fly-out menus can be used to expose secondary or tertiary levels of navigation. While fly-out menus can be cascaded to display two or more levels of hierarchy below the parent page, this is not recommended as the mouse interaction required to navigate a multi-tiered flyout menu can be difficult for some users. -Example of fly-out navigation +
+![Example of vertical navigation with a fly-out.](./img/nav-vertical-flyout.svg) +
The advantage of fly-out menus is that they allow a user to easily scan through secondary menu items. When using fly-out menus, keep in mind that the page in view may not be exposed as a selected menu item at the top level. Therefore, when using fly-outs, we strongly recommend use of [breadcrumbs](/components/breadcrumb) to help users understand where they are currently working within the site hierarchy. @@ -82,7 +94,9 @@ Also, consider how likely it is that your application will be used on a mobile p Drill-down menus replace the current navigation menu with the next set of child items in the page hierarchy when the user clicks on a parent item to drill down. A back link is provided at the top of the menu to return to the parent level. -Example of drill-down navigation +
+![Example of drill-down navigation.](./img/nav-vertical-drilldown.svg) +
Using drill-down navigation, only the navigation items for the current page and its siblings will be visible at any given time. This pattern is very mobile-friendly as it minimizes the need for scrolling to see the entire menu. However, it should be avoided if you expect users to frequently move between levels. @@ -101,24 +115,32 @@ Here are some examples of hybrid navigation patterns that you may find useful. #### Fly-outs with tertiary drill-down By using fly-outs to expose secondary navigation items and then drilling into third level items, you can keep the current page and its siblings visible as the user works. This is a good pattern to use when you expect users to spend most of their time working within the same section of the application. -Example of composable navigation with fly-out and drill-down menus +
+![Example of vertical navigation with fly-out and drill-down menus.](./img/nav-vertical-drilldown-flyout.svg) +
#### Two-level expansion with drill-downs You can use expanded menus to expose the first two or three levels of page hierarchy and then drill-down to the lowest level. This pattern is preferred to using fly-outs with a drill-down when there are fewer secondary level items and/or you require a mobile friendly solution. -Example of composable navigation with expansion and drill-down menus +
+![Example of vertical navigation with expansion and drill-down menus.](./img/nav-vertical-expansion-drilldown.svg) +
#### Drill-down with tertiary expansion Consider using a drill-down menu at the primary level and expansion to expose levels two and three when you want to make it easy for users to move between items at levels two and three without the need to frequently move back to the primary level to explore other branches. -Example of composable navigation with drill-down and expansion menus +
+![Example of vertical navigation with drill-downs and tertiary expansion.](./img/nav-vertical-drilldown-tertiary-expansion.svg) +
### Horizontal navigation Horizontal navigation is global navigation that displays navigation items from left to right in the application's masthead. -Example of horizontal navigation +
+![Example of horizontal navigation.](./img/nav-horizontal.svg) +
#### When to use * You have less than 5 primary navigation items @@ -130,15 +152,21 @@ Use secondary horizontal navigation when you want to provide more granular navig Secondary horizontal navigation can be paired with vertical or horizontal navigation. It provides deeper nesting to the vertical navigation, which may help prevent the navigation from becoming too long. -Example of secondary horizontal navigation +
+![Example of secondary horizontal navigation.](./img/nav-secondary-vertical.svg) +
**Selected nav item:** The title of the page should reflect the selected horizontal navigation item. You can provide further nested information by using tabs. We recommend either using horizontal navigation OR vertical navigation as your primary. The secondary horizontal navigation can be added to either and contains similar styling to the primary navigation either way. -Example of secondary horizontal navigation as primary navigation +
+![Example of horizontal primary and secondary navigation.](./img/nav-secondary-horizontal.svg) +
Secondary horizontal navigation follows a similar responsive design as our other horizontal navigation types. Overflow items can be navigated to by using horizontal scroll or the arrows. -Example of secondary navigation mobile responsiveness +
+![Example of horizontal navigation on a mobile screen.](./img/nav-mobile.svg) +
From 3e5f4aee789cd229523ffbab41d95e5b78a308a6 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Fri, 13 Jun 2025 15:27:02 -0400 Subject: [PATCH 2/2] Rearranging images and content. --- .../design-guidelines/components/navigation/navigation.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/navigation.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/navigation.md index 21146a1b39..e0e484ca3a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/navigation.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/navigation/navigation.md @@ -150,20 +150,17 @@ Horizontal navigation is global navigation that displays navigation items from l Use secondary horizontal navigation when you want to provide more granular navigation specific to a particular page or window in your application. This differs from [tabs](/components/tabs), since tabs would allow you to switch perspective on the same page, while each secondary horizontal navigation item would be sending you to a distinct URL. For example, a user might use global navigation to get to a settings page, and then use local navigation to access privacy and general user settings. -Secondary horizontal navigation can be paired with vertical or horizontal navigation. It provides deeper nesting to the vertical navigation, which may help prevent the navigation from becoming too long. +Secondary horizontal navigation can be paired with vertical or horizontal navigation. It provides deeper nesting to the vertical navigation, which may help prevent the navigation from becoming too long. The title of the page should reflect the selected horizontal navigation item. You can provide further nested information by using tabs.
![Example of secondary horizontal navigation.](./img/nav-secondary-vertical.svg)
-**Selected nav item:** The title of the page should reflect the selected horizontal navigation item. You can provide further nested information by using tabs. - -We recommend either using horizontal navigation OR vertical navigation as your primary. The secondary horizontal navigation can be added to either and contains similar styling to the primary navigation either way. -
![Example of horizontal primary and secondary navigation.](./img/nav-secondary-horizontal.svg)
+ Secondary horizontal navigation follows a similar responsive design as our other horizontal navigation types. Overflow items can be navigated to by using horizontal scroll or the arrows.