Skip to content

Commit cfb3c11

Browse files
author
Daniel E. Cornelis G. A. Kolbach
authored
I accordance with a design call with @thet
1 parent 863aa1f commit cfb3c11

File tree

1 file changed

+9
-8
lines changed

1 file changed

+9
-8
lines changed

src/pat/navigation/documentation.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,13 @@ The available options are:
2828

2929
| Field | Default | Options | Description |
3030
| ------------------------ | -------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
31-
| item-wrapper | li | CSS selector | The DOM element which wraps each menu item. This is used to set the "current" and "in-path" classes also on the wrapper element. If empty, no wrapper element is used. |
32-
| in-path-class | navigation-in-path | CSS class name | Class name, which is set on item-wrapper elements if nested menu items are within the current path. |
33-
| current-class | current | CSS class name | Class name, which is set on item-wrapper or items if they are the currently selected menu option or - for hash links - when it's corresponding content item is in view. |
34-
| in-view-class | in-view | | CSS class for a navigation item when it's corresponding content item is in view. |
35-
| current-content-class | current | | CSS class for a content item when it is the current one. |
36-
| scroll-marker-side | top | top, bottom, middle, auto | Side of element that scrolls. This is used to calculate the current item. The defined side of the element will be used to calculate the distance baseline. If this is set to "auto" then one of the "top" or "bottom" positions are used, depending on which one is nearer to the distance baseline. |
37-
| scroll-marker-distance | 50% | | Distance from side of scroll box. any amount in px or %. This is used to calculate the current item. The nearest element to the distance-baseline measured from the top of the container will get the current class. |
38-
| scroll-marker-visibility | | null, most-visible | Visibility of element in scroll box. This is used to calculate the current item. If "most-visible" is set, the element which is most visible in the scroll container gets the current class. If more elements have the same visibility ratio, the other conditions are used to calculate the current one. |
31+
| item-wrapper | `li` | CSS selector | The DOM element which wraps each menu item. This is used to set the "current" and "in-path" classes also on the wrapper element. If empty, no wrapper element is used. |
32+
| in-path-class | `navigation-in-path` | CSS class name | Class name, which is set on item-wrapper elements if nested menu items are within the current path. |
33+
| current-class | `current` | CSS class name | Class name, which is set on item-wrapper or items if they are the currently selected menu option or - for hash links - when it's corresponding content item is in view. |
34+
| in-view-class | `in-view` | | CSS class for a navigation item when it's corresponding content item is in view. |
35+
| current-content-class | `current` | | CSS class for a content item when it is the current one. |
36+
| scroll-item-side | `top` | top, bottom, middle, auto | Side of element that scrolls. This is used to calculate the current item. The defined side of the element will be used to calculate the distance baseline. If this is set to "auto" then one of the "top" or "bottom" positions are used, depending on which one is nearer to the distance baseline. |
37+
| scroll-item-distance | `50%` | | Distance from side of scroll box. any amount in px or %. This is used to calculate the current item. The nearest element to the distance-baseline measured from the top of the container will get the current class. |
38+
| scroll-item-visibility | | none, most-visible | Visibility of the item/element in scroll box. This is used to calculate the current item. If "most-visible" is set, the element which is most visible in the scroll container gets the current class. If more elements have the same visibility ratio, the other conditions are used to calculate the current one. |
39+
| scroll-trigger-selector | `a[href^='#'].scroll-marker` | CSS selector | Selects the element within the pat-navigation container that should get a class current while scrolling, when applicable. |
3940

0 commit comments

Comments
 (0)