@oveleon/push-navigation v0.7.4

Contao PushNavigation

Install

$ npm install @oveleon/push-navigation

$ yarn add @oveleon/push-navigation

<script src="https://unpkg.com/@oveleon/push-navigation@latest/build/push-navigation.js"></script>
<link href="https://unpkg.com/@oveleon/push-navigation@latest/build/push-navigation.css" rel="stylesheet"></link>

Usage

import PushNavigation from "@oveleon/push-navigation"

// Use default css
// import "./node_modules/@oveleon/push-navigation/build/push-navigation.css"

new PushNavigation({
    // options ...
});

Options

{
    selector: 'nav.main-navigation',        // Navigation selector
    startSelector: 'strong.active',         // Set start position by selector
    mode: 'slide',                          // ToDo: slide, accordion
    toggle: {
        selector: '#toggle',
        cssClassOpen: 'open'                // Class if navigation is open
    },
    levelStructure: {
        container: 'ul',
        item: 'li.submenu',
    },
    handle: {
        append: null,                       // Append handle to a specific element
        element: 'span',
        content: '❯',
        cssClass: ''
    },
    breadcrumb: {
        element: 'li',
        default: 'Navigation',              // Default breadcrumb title
        closeOnFirst: true,                 // Closes the navigation when clicking on the first breadcrumb
        content: '❮ ',
        textSelector: 'a,strong',           // Element from which the text is taken, for the new breadcrumb title
        cssClass: ''
    },
    keepOpenStateOnResize: false,           // Keep open state at resize
    maxWidth: 768,                          // Breakpoint at which the navigation is switched on/off,
    modules: [],                            // Custom HTML [{ append: 'ul.level_1', markup: '<div>Module<div>' }]
    onShow: () => {},
    onHide: () => {},
    onInit: () => {},
    onDestroy: () => {}
}