Jump links
Style
Jump links are a list of links located near content that act as persistent navigation. This list can be vertical or horizontal and a title is always included on top.
Anatomy
- Title
- Inactive section
- Active section border
- Active section
- Section with nested jump links
Color scheme
Vertical and horizontal jump links are available in both light and dark color schemes.
Light scheme
The light scheme disclosure includes a box shadow, but the dark scheme disclosure does not.
Dark scheme
Space
The space in between jump links and content should use the --rh-space-2xl
token at a minimum.
Interaction states
Hover
The active section jump link is interactive, but the styling does not change on hover.
| Property | Light scheme | Dark scheme |
|---|---|---|
| Thick border color | --rh-color-gray-60 |
--rh-color-gray-30 |
| Jump link text color | --rh-color-text-primary |
--rh-color-text-primary |
| Disclosure trigger button surface color | --rh-color-surface-lighter |
--rh-color-surface-dark |
Focus and active
The active section jump link can receive focus, but the styling does not change.
| Property | Light scheme | Dark scheme |
|---|---|---|
| Thick border color | --rh-color-gray-60 |
--rh-color-gray-30 |
| Jump link text color | --rh-color-text-primary |
--rh-color-text-primary |
| Disclosure trigger button surface color | --rh-color-surface-lighter |
--rh-color-surface-dark |
