0.1.2 • Published 6 years ago
eleventy-navigation-bootstrap
Licence
MIT
Version
0.1.2
Deps
1
Size
15 kB
Vulns
0
Weekly
0
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 |