Skip to content

Conversation

@johnhunter
Copy link

Add docs for 11ty/eleventy-navigation#43 released in v1.0.0


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))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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))

Copy link
Contributor

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);
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants