Skip to content

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Navigation plugin docs for useAriaCurrentAttr #1779

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/docs/plugins/navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Open up your Eleventy config file (probably `eleventy.config.js`) and use `addPl
import eleventyNavigationPlugin from "@11ty/eleventy-navigation";

export default function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyNavigationPlugin);
eleventyConfig.addPlugin(eleventyNavigationPlugin);
Copy link
Contributor

@Ryuno-Ki Ryuno-Ki Oct 16, 2025

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.

};
{% endset %}
{% include "snippets/configDefinition.njk" %}
Expand Down Expand Up @@ -731,6 +731,9 @@ navToMdOptions:

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

@aloxe aloxe Apr 16, 2025

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

@cypressSap cypressSap Oct 16, 2025

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
  }
}

{% addedin "Navigation 1.0.0" %}

<is-land on:visible import="/js/seven-minute-tabs.js">
<seven-minute-tabs persist sync>
{% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "navhtmloptions"} %}
Expand All @@ -755,6 +758,8 @@ You can change the HTML elements, classes on the list and list items, and add an
anchorClass: "", // Add a class to the anchor
activeAnchorClass: "", // Add a class to the current page’s anchor

useAriaCurrentAttr: true // Add aria-current="page" to the current page’s anchor

// If matched, `activeListItemClass` and `activeAnchorClass` will be added
activeKey: "",
// It’s likely you want to pass in `eleventyNavigation.key` here, e.g.:
Expand Down Expand Up @@ -792,6 +797,8 @@ You can change the HTML elements, classes on the list and list items, and add an
anchorClass: "", // Add a class to the anchor
activeAnchorClass: "", // Add a class to the current page’s anchor

useAriaCurrentAttr: true // Add aria-current="page" to the current page’s anchor

// If matched, `activeListItemClass` and `activeAnchorClass` will be added
activeKey: "",
// It’s likely you want to pass in `eleventyNavigation.key` here, e.g.:
Expand Down