diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink - left.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink - left.png deleted file mode 100644 index cea6609c10..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink - left.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink - right.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink - right.png deleted file mode 100644 index 94f5bd1a7e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink - right.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink-left.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink-left.png deleted file mode 100644 index cea6609c10..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink-left.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink-right.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink-right.png deleted file mode 100644 index 94f5bd1a7e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/Jumplink-right.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-expandable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-expandable.svg new file mode 100644 index 0000000000..f026310436 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-expandable.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-mobile.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-mobile.png deleted file mode 100644 index a6ed52886a..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-mobile.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-subsection.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-subsection.png deleted file mode 100644 index 7a194a7ec1..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-subsection.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-vertical.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-vertical.png deleted file mode 100644 index 4e09d5f3fb..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-vertical.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md index 729b172c6d..a1f8dbb127 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md @@ -13,25 +13,15 @@ import '../components.css'; 1. **Label (optional):** A descriptive header for a list of jump links. -2. **Active section:** current section of the page the user is on. +2. **Active section:** The current section of the page the user is on. -3. **Inactive section:** other sections of the page that the user is not currently on. Clicking on an inactive section will bring the user to the selected section and make the section active. +3. **Inactive section:** The other sections of the page that the user is not currently on. Clicking on an inactive section will bring the user to the selected section and make the section active. ## Usage Jump links provide a way to navigate through section headings on a page without scrolling. The highlighted active section changes as the user scrolls to the next section. -### Placement -Vertical jump links can be placed either to the left or the right of the content on the page. It is recommended to place the jump links on the left side of the content and remain consistent with the application you are working on. Only use jump links on the right when space allows and when there is an extensive nav on the left; otherwise, consider reverting to the left of the page. In both placements, the visual system is identical, including jump links with subsections. So use either according to your application’s needs. - -
-![Example of jump links placed on the left of the page.](./img/jump-links-placement-left.svg) -
-
-![Example of jump links placed on the right of the page.](./img/jump-links-placement-right.svg) -
- ### Jump links on mobile -On smaller screen sizes, jump links collapse into an expandable component that is shown above the content. This component can be expanded to display the jump links. +On smaller screen sizes, use [expandable jump links](#expandable-jump-links). This collapses a list of jump links into one component, which can be expanded to display the list of jump links.
![Example of expandable jump links on mobile.](./img/jump-links-mobile.svg) @@ -48,7 +38,7 @@ As the user scrolls down the page, the active sections are highlighted from top
### Horizontal jump links -As the user scrolls down the page, the active sections are highlighted from left to right. A jump link can be displayed left aligned or center aligned and with an optional label. +As the user scrolls down the page, the active sections are highlighted from left to right. A jump link can be displayed left-aligned or center-aligned, and can display an optional label.
![Example of horizontal jump links.](./img/jump-links-horizontal.svg) @@ -61,5 +51,25 @@ If the page has subsections, they are shown as indented jump links under the par ![Example of jump links with subsections.](./img/jump-links-subsections.svg)
+### Expandable jump links +Expandable jump links hide the list of links within a collapsed section by default. Once users expand the section, they will see the full list of links, which they can then interact with. + +
+![A collapsed section with a "jump to section" link, followed by the expanded version of the section, with sub-items nested in the section.](./img/jump-links-expandable.svg) +
+ +## Placement +Vertical jump links can be placed either to the left or the right of the content on the page. In both placements, the visual system is identical, including jump links with subsections. + +We recommended placing jump links on the left side of the content and remaining consistent with the application you are working on. Only use jump links on the right when space allows and when there is an extensive nav on the left; otherwise, consider reverting to the left of the page. + +
+![Example of jump links placed on the left of the page.](./img/jump-links-placement-left.svg) +
+ +
+![Example of jump links placed on the right of the page.](./img/jump-links-placement-right.svg) +
+ ## Accessibility -For information regarding accessibility, visit the [jump links accessibility](/components/jump-links/accessibility) tab. +For information regarding accessibility, visit the [jump links accessibility](/components/jump-links/accessibility) tab. \ No newline at end of file