-
-
Notifications
You must be signed in to change notification settings - Fork 708
Update Navigation plugin docs for useAriaCurrentAttr #1779
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
|
||
| You can change the HTML elements, classes on the list and list items, and add an additional class for the current page’s navigation entry! | ||
|
|
||
| You can also add an `aria-current="page"` attribute (see [more details here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| You can also add an `aria-current="page"` attribute (see [more details here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)) | |
| You can also add the `aria-current="page"` attribute on links to the current page (see [more details here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useAriaCurrentAttr defaults to false, and is only added if activeKey is matched, so I'd further update the navigationOptions examples:
{
navigationOptions: {
listElement: "ul", // Change the top level tag
listItemElement: "li", // Change the item tag
listClass: "", // Add a class to the top level
listItemClass: "", // Add a class to every item
listItemHasChildrenClass: "", // Add a class if the item has children
activeListItemClass: "", // Add a class to the current page’s item
anchorClass: "", // Add a class to the anchor
activeAnchorClass: "", // Add a class to the current page’s anchor
useAriaCurrentAttr: false, // Add aria-current="page" to the current page’s anchor
// If matched, `activeListItemClass`, `activeAnchorClass`, and `useAriaCurrentAttr` will be added
activeKey: "",
// It’s likely you want to pass in `eleventyNavigation.key` here, e.g.:
// activeKey: eleventyNavigation.key
// Show excerpts (if they exist in data, read more above)
showExcerpt: false
}
}|
|
||
| export default function (eleventyConfig) { | ||
| eleventyConfig.addPlugin(eleventyNavigationPlugin); | ||
| eleventyConfig.addPlugin(eleventyNavigationPlugin); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why was the whitespace removed here? I felt it helped the readability.
Add docs for 11ty/eleventy-navigation#43 released in v1.0.0