eleventy-navigation-bootstrap

Filter for the @11ty/eleventy-navigation plugin to support the bootstrap dropdown navigation.

Usage

Install via npm:

npm install --save-dev eleventy-navigation-bootstrap

Add this Nunjucks filter to your .eleventy.js file:

  const toBootstrapNav = require('eleventy-navigation-bootstrap')
  eleventyConfig.addNunjucksFilter('bootstrapNav', toBootstrapNav)

Pipe the @11ty/eleventy-navigation output to this filter like so:

{{ collections.all | eleventyNavigation | bootstrapNav | safe }}

Options

You can pass additional options:

{{ collections.all | eleventyNavigation | bootstrapNav({
    listClass: "nav nav-pills justify-content-center", listChildItemClass: "dropdown-menu shadow", activeKey: eleventyNavigation.key
  }) | safe }}

Available options are:

Option	Type	Effect
listElement	string	HTML tag of the navigation list
listClass	string	Class for the navigation list
listItemElement	string	HTML tag for one navigation entry
listItemClass	string	Class for one navigation entry
listItemLinkClass	string	Class for the link of a navigation entry
listItemHasChildrenClass	string	Class for a navigation entry that has child entries
listItemHasChildrenLinkClass	string	Class for the link of a navigation entry that has child entries
listChildItemClass	string	Class for a navigation entry that is child to another entry
listChildItemLinkClass	string	Class for the link of a navigation entry that is child to another entry
activeKey	string	Current page (provide this if you want to highlight the currently displayed page)
activeListItemClass	string	Class of the navigation entry that corresponds to the current page
listDoorpageDivider	string	Divider between the door page and the child entries of a parent page