API

This is the list of actions you can call with Navegante instances.

If you are using Navegante in jQuery format, methods are called following de jQuery UI pattern $navegante.navegante('methodName' /*, arguments */)

Vanilla Javascript methods are calling like navegante.methodName(/* arguments */)


For example, if you need to open the second base group of your nav when clicking a button, you can do it like this:

// jQuery format
$('#my-navegante').navegante()
$button.on('click', e => {
    e.preventDefault()
    $('#my-navegante').navegante('open', 1)
})

// vanilla JS
const navegante = new Navegante('#my-navegante')
$button.on('click', e => {
    e.preventDefault()
    navegante.open(1)
})

Methods

open

Open a nav group

How to

// jQuery
$('#my-navegante').navegante('open', group)

// vanilla JS
navegante.open(group)

Parameters

group int || jQuery element || string jQuery element, string CSS selector or group index of the group you want to open.
If you use an int index, Navegante only open the base group corresponding with that value.

Example

$btns.on('click', e => {
    e.preventDefault()

    // open each group passing the group as jQuery element
    $navegante.navegante('open', $navegante.find('[data-navegante-role="group"]').eq($(e.target).index()))

    // also, you can do the same action passing its index like this
    $navegante.navegante('open', $(e.target).index())
})

close

Close an current active nav group

How to

// jQuery
$('#my-navegante').navegante('close', group)

// vanilla JS
navegante.close(group)

Parameters

group int || jQuery element || string jQuery element, string CSS selector or group index of the group you want to close.
If you use an int index, Navegante only close the base group corresponding with that value.

Example

$btns.on('click', e => {
    e.preventDefault()

    // close each group passing the group as jQuery element
    $navegante.navegante('close', $navegante.find('[data-navegante-role="group"]').eq($(e.target).index()))

    // also, you can do the same action passing its index like this
    $navegante.navegante('close', $(e.target).index())
})

toggle

Open & Close the current active nav group

How to

// jQuery
$('#my-navegante').navegante('toggle', group)

// vanilla JS
navegante.toggle(group)

Parameters

group int || jQuery element || string jQuery element, string CSS selector or group index of the group you want to toggle.
If you use an int index, Navegante only toggle the base group corresponding with that value.

Example

$btns.on('click', e => {
    e.preventDefault()

    // toggle each group passing the group as jQuery element
    $navegante.navegante('toggle', $navegante.find('[data-navegante-role="group"]').eq($(e.target).index()))

    // also, you can do the same action passing its index like this
    $navegante.navegante('toggle', $(e.target).index())
})

closeAll

Close all opened groups

How to

// jQuery
$('#my-navegante').navegante('closeAll')

// vanilla JS
navegante.closeAll()

Example

$btns.on('click', e => {
    e.preventDefault()

    $navegante.navegante('closeAll')
})

enable

Restarts the nav when it has been disabled

How to

// jQuery
$('#my-navegante').navegante('enable')

// vanilla JS
navegante.enable()

Example

$enableBtn.on('click', e => {
    e.preventDefault()
    $navegante.navegante('enable')
})

$disableBtn.on('click', e => {
    e.preventDefault()
    $navegante.navegante('disable')
})

disable

Disables the nav

How to

// jQuery
$('#my-navegante').navegante('disable')

// vanilla JS
navegante.disable()

Example

Try the enable method example

refresh

Refresh the nav functionality to check new groups or options

How to

// jQuery
$('#my-navegante').navegante('refresh')

// vanilla JS
navegante.refresh()

Example

$addNewGroupBtn.on('click', e => {
    e.preventDefault()

    const newIndex = $navegante.find('[data-navegante-role="group"]').length + 1;

    $navegante.append(`
        <div class="navegante__group" data-navegante-role="group" data-navegante-size="mega">
            <button class="navegante__trigger" data-navegante-role="trigger">Group ${newIndex}</button>
            <div class="navegante__target navegante-mega" data-navegante-role="target">
                <article class="navegante-content">
                    <h3>I'm the target of <strong>Group ${newIndex}</strong></h3>
                </article>
            </div>
        </div>
    `)
    
    // When mutates the DOM of the nav you must call refresh method to update functionality
    $navegante.navegante('refresh')
})

updateOptions

Pass a new options object to extend the current options

How to

/*
New options object to be passed.
Options will be updated in the nav.

For example:
const newOptions = {
    theme: 'dark-yellow',
    ...
}
*/

// jQuery
$('#my-navegante').navegante('updateOptions', newOptions)

// vanilla JS
navegante.updateOptions(newOptions)

Parameters

options object The same default options that brings you Navegante

destroy

Destroys completely Navegante functionality from an nav

How to

// jQuery
$('#my-navegante').navegante('destroy')

// vanilla JS
navegante.destroy()

Example

let isWorking = true

$toggleDestroyBtn.on('click', e => {
    e.preventDefault()
    
    const $btn = $(e.target)
                
    if(isWorking) {
        $navegante.navegante('destroy')
    } else {
        $navegante.navegante({
            groups    : '.navegante__group',
            triggers  : '.navegante__trigger',
            targets   : '.navegante__target',
            animation : {
                enter: 'navegante-anim--slide-in',
                leave: 'navegante-anim--slide-out'
            }
        })
    }

    isWorking = !isWorking
})

Properties

You can use Navegante instances to get its properties.

Properties gives you information of the current state of the accordion.

To get the properties you can do it like this:

/* vanilla Javascript */
// create instance
const navegante = new Navegante('#my-navegante')
// access property
console.log(navegante.id)

Child classes

Navegante makes use of a set of sub-classes to manage its internal modules. These classes are attached to the Navegante instance:

Properties

Group This class manage each default group
Tabs This class manage the group that is a tabs component
TabsGroup This class manage each group of a tabs component
Responsive This class manage everything related with responsive behaviour