Eleventy-navigation-bootstrap NPM

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

eleventy eleventy-navigation

4 years ago

4 years ago

4 years ago