Options

Setup

The next section is the list of the default options provided by Navegante.

You must pass the options object when you initialize Navegante as in the example below:

// jQuery
// Pass the options object to the jQuery navegante plugin method
$('#my-navegante').navegante({
    ...options
})

// vanilla Javascript
// Pass the options object to the Navegante class
const navegante = new Navegante('#my-navegante', {
    ...options
})

Initialize in HTML

Also, you can initialize Navegante in HTML, without writing any Javascript.

Add data-navegante attribute to the root element and set the options in it value in JSON format

Datas

There are a lot of options in Navegante that you can assign to each group to apply its functionalities individually.

To achieve this functionalities you must make use of data HTML attribute.
The basic data structure would be data-navegante-XXXXX.
For example, if you want to disable a group in particular, this were the way to do it:

As you can see, applying the data directly to the group element, Navegante will take care of assign the corresponding functionality to that group and its children.


This is the list of functionalities you can apply individually to each group:

  • data-navegante-disabled
    (Also called from classname "navegante--is-disabled")
  • data-navegante-link
    (Also called from classname "navegante--is-link")
    (You have to apply the data to the trigger instead)
  • data-navegante-active
  • data-navegante-scrollto
  • data-navegante-tabs
    (You have to apply the data to the target instead)
  • data-navegante-event
  • data-navegante-size
  • data-navegante-position
  • data-navegante-animation
    • data-navegante-animation-enter
    • data-navegante-animation-leave
    • data-navegante-animation-duration

data-navegante-disabled

You can disable a group individually preventing all of its functionalities.
You can do it in two ways:

  • Add the data-navegante-disabled data attribute to the trigger
  • Add the navegante--is-disabled class name to the trigger

Sometimes is useful to not assign functionality to some triggers in an nav, for example in a navigation menu, where some triggers must be only links and not fire any else action.

To prevent that these triggers get assigned its nav functionality, you can do it in two ways:

  • Add the data-navegante-link data attribute to the trigger
  • Add the navegante--is-link class name to the trigger

data-navegante-active

You can open on load a group simply adding data-navegante-active to the group you need.

data-navegante-scrollto

You can assign to the trigger of a group the scrollto behaviour simply adding a data-navegante-scrollto="/*CSS target selector*/".

Add the data to the group element and set the value targeting to the CSS selector of the block you want to scroll when clicking the group.

data-navegante-tabs

To insert a Tab component inside of a group, simply add a data-navegante-tabs to the target of the group and Navegante will transform its children into a tab functionality

By default, the "hover" event will be used for the tab's groups but you can change this to "click" setting the tabsEvent global option or changing it individually will data-navegante-event.

Normally, you will want to use the Tabs to fill the full width of your nav, so in this case, you'll must to add to the groups children of the tabs the attribute data-navegante-size="mega".

data-navegante-event

You can assign to the trigger of a group the event behaviour simply adding a data-navegante-event="/*event*/".

Add the data to the group element and set the value choosing between "click" or "hover".

When you use this data, it will automatically update its toggle event to the event you choose.

data-navegante-size

You can set to the target of a group the size you need simply adding a data-navegante-size="/*size*/".

Learn more of sizing

data-navegante-position

You can assign positions individually to each group, giving you a completly freedom to create your nav.

You must add the attribute data-navegante-position="/*position*/" to the group you need.

Choose between the next positions:

  • top (equal as "top-left")
  • top-left
  • top-center
  • top-right
  • bottom (equal as "bottom-left")
  • bottom-left
  • bottom-center
  • bottom-right
  • left
  • right

data-navegante-animation-/*option*/

You can assign animations individually to each group in the same way of explained before in Position groups individually.

You must add the attributes to the group you need data-navegante-animation-enter="/*animation*/" to set the entering animation and data-navegante-animation-leave="/*animation*/" to set the leaving animation.

Also, you can change the animation duration by setting data-navegante-animation-duration="/*duration*/"

See the full list of animations

Options

id

Type:string

Default:null

If set, it will add data-navegante-id attribute to the root element of the nav.

If not set, Navegante will automatically add a unique id to data-navegante-id

Example

// jQuery
$('#my-navegante').navegante({
    id: 'my-id'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    id: 'my-id'
})

groups

Type:string / jQuery element

Default:'[data-navegante-group]'

(CSS selector / jQuery element) for the container element wrapping the trigger and target of each nav group

Example

// jQuery
$('#my-navegante').navegante({
    groups: '.my-navegante-group'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    groups: '.my-navegante-group'
})

triggers

Type:string / jQuery element

Default:'[data-navegante-trigger]'

(CSS selector / jQuery element) for the element inside a group acting as the triggering button

Example

// jQuery
$('#my-navegante').navegante({
    triggers: '.my-navegante-trigger'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    triggers: '.my-navegante-trigger'
})

targets

Type:string / jQuery element

Default:'[data-navegante-target]'

(CSS selector / jQuery element) for the element inside a group acting as the content of each nav

Example

// jQuery
$('#my-navegante').navegante({
    targets: '.my-navegante-target'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    targets: '.my-navegante-target'
})

boxed

Type:boolean

Default:false

If true, it will automatically assign a fixed max-width to the wrapper to "box" the nav.
This value is configurable through css file.

Example

// jQuery
$('#my-navegante').navegante({
    boxed: true
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    boxed: false
})

orientation

Type:string

Default:'horizontal'

It sets the nav orientation. You can choose between horizontal or vertical.

Example

// jQuery
$('#my-navegante').navegante({
    orientation: 'horizontal'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    orientation: 'vertical'
})

targetsMinZIndex

Type:int

Default:100

It sets the minimum z-index css property to the targets to be sure that they are always in front of the other elements in your site.
When nesting submenus, Navegante will automatically increase this value in children targets.

Example

// jQuery
$('#my-navegante').navegante({
    targetsMinZIndex: 100
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    targetsMinZIndex: 9999
})

closeDelay

Type:boolean / int

Default:false

Sets the close delay interval when the user commands to close that group and the moment that the group is finally closed. It's a close timeout.

Example

// jQuery
$('#my-navegante').navegante({
    closeDelay: false
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    closeDelay: 300
})

allowPerspective

Type:boolean

Default:true

If true, it will be allowed the use of CSS3 perspective in animations.

Example

// jQuery
$('#my-navegante').navegante({
    allowPerspective: false
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    allowPerspective: true
})

closeNavegantes

Type:boolean

Default:true

If true, it will close another posible Navegante instance that were in the page.

Example

// jQuery
$('#my-navegante').navegante({
    closeNavegantes: false
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    closeNavegantes: true
})

groupsSize

Type:null / string

Default:null

If setted to null, it will adapt target widths using the css predefined value (300px by default).
In the other hand, you can choose between:

  • mega: will be forced to get the possible fullwidth.
  • fixed px: will set the value passed to target's width. Could be string ('300px') or int (300).

Example

// jQuery
$('#my-navegante').navegante({
    groupsSize: 'mega'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    groupsSize: '500px'
})

baseGroupsMargin

Type:int

Default:0

It will add a margin top to the base groups using this value.

Example

// jQuery
$('#my-navegante').navegante({
    baseGroupsMargin: 0
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    baseGroupsMargin: 20
})

baseGroupsPosition

Type:string

Default:'bottom-left'

Sets the global target's position relative with each group.
You can choose between: top-left || top-center || top-right || bottom-left || bottom-center || bottom-right
If you need that your nav show its targets upwards, use the top-xxx positions.

Example

// jQuery
$('#my-navegante').navegante({
    baseGroupsPosition: 'bottom-left'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    baseGroupsPosition: 'top-right'
})

staggerInterval

Type:Object

Default:{ open: 10, close: 10 }

Object options to set the stagger interval. It will set a delay between the open and close animations intervally.

Options

  • open: int / null 10

    Sets the opening delay in milliseconds between nested groups.

    It will be applied from the active group to the last nested group.


  • close: int / null 10

    Sets the closing delay in milliseconds between nested groups.

    It will be applied from the last nested group to the active group.


Example

// jQuery
$('#my-navegante').navegante({
    staggerInterval: {
        open  : 10,
        close : 50
    }
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    staggerInterval: {
        open  : null,
        close : 0
    }
})

responsive

Type:Object

Default:
	
{
    breakpoint: 980,
    forceInDevices: true,
    type: 'slide-left',
    transition: {
        duration: 600,
        easing: 'cubic-bezier(0.77, 0, 0.175, 1)'
    },
    animation: {
        duration: 300,
        easing: 'swing'
    }
}

Object options to set responsive options. Basically, these options manage the moment when the nav converts itself to responsive.

Options

  • breakpoint: int 980

    The width int value where Navegante must transform into responsive.


  • forceInDevices: boolean true

    If true, Navegante will be forced to be transformed in responsive when a mobile or tablet device is detected.


  • type: string 'slide-left'

    Sets the toggling animation of the responsive menu. It will be hidden from the screen and will be shown from the left side if you choose 'slide-left' or from the right if 'slide-right' is chosen.


  • transition.duration: int 600

    Sets the time in milliseconds that the nav will take to be animated


  • transition.easing: string 'cubic-bezier(0.77, 0, 0.175, 1)'

    Easing type assigned to the toggling animation. The animation is carried out by CSS animations, so assign here a CSS easing.


  • animation.duration: int 300

    Sets the accordion animation timing of groups.


  • animation.easing: boolean true

    Sets the accordion animation easing of groups. It uses internally built-in jQuery methods slideIn || slideOut, so in this case, you must use a jQuery easing.


Example

// jQuery
$('#my-navegante').navegante({
    responsive: {
        breakpoint: 640,
        forceInDevices: true,
        type: 'slide-right',
        transition: {
            duration: 600,
            easing: 'ease-out'
        },
        animation: {
            duration: 300,
            easing: 'swing'
        }
    }
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    responsive: {
        breakpoint: 1200,
        forceInDevices: false,
        type: 'slide-right',
        transition: {
            duration: 800,
            easing: 'ease-in-out'
        },
        animation: {
            duration: 500,
            easing: 'easeInOutQuart'
        }
    }
})

scrollTo

Type:Object

Default:
	
{
    space: 0,
    duration: 300,
    easing: 'swing'
}

Object options to set scrollTo options. This configuration will be used in combination with scrolling triggers to scroll to blocks.

Options

  • space: int 0

    The space between the scroll target block and the upside of the browser window.


  • duration: int 300

    Timing duration of the scrolling transition in milliseconds


  • easing: string 'swing'

    Easing function to use in scrolling transition. Only use jQuery easings.


Example

// jQuery
$('#my-navegante').navegante({
    scrollTo: {
        space: 20,
        duration: 400,
        easing: 'swing'
    }
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    scrollTo: {
        space: 0,
        duration: 600,
        easing: 'easeInOutQuart'
    }
})

hamburger

Type:Object

Default:{ type: 'hamburger--squeeze' }

Object options to set hamburger options. This configuration will be used to create the hamburger icon in responsive.

Options

  • type: string'hamburger--squeeze'

    The hamburger type to use.

    Navegante uses the Hamburgers CSS library to create this button.
    There are different hamburger animations you can use here.

    Find out the complete set of animations here

    To use it, just copy the animation class you want in this option and Navegante will apply it automatically.

Example

// jQuery
$('#my-navegante').navegante({
    hamburger: {
        type: 'hamburger--3dx'
    }
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    hamburger: {
        type: 'hamburger--spin'
    }
})

initActive

Type:null || int || CSS selector || jQuery element

Default:null

Automatically open a group on init.

You can set this option in multiple ways:

  • null: Any group will be activated.
  • int: The index of a base group. if this value is an int, only will be applied to the base groups.
  • CSS Selector: The CSS selector targeting to a group.
  • jQuery element: The jQuery element targeting to a group.

Example

// jQuery
$('#my-navegante').navegante({
    initActive: 2
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    initActive: '#my-group-to-be-activated-on-init'
})

theme

Type:string

Default:'dark'

Example

// jQuery
$('#my-navegante').navegante({
    theme: 'orange'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    theme: 'light-red'
})

event

Type:string

Default:'click'

Event to toggle the nav. Could be 'click' or 'hover'

Example

// jQuery
$('#my-navegante').navegante({
    event: 'hover'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    event: 'click'
})

tabsEvent

Type:string

Default:'click'

Event to toggle the tabs groups. Could be 'click' or 'hover'

Example

// jQuery
$('#my-navegante').navegante({
    tabsEvent: 'hover'
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    tabsEvent: 'click'
})

animation

Type:Object

Default:
{
    enter: null,
    leave: null,
    duration: 300
}

Object options to set the toggling animations

Options

  • enter: string / null null

    CSS class referencing the animation to apply to the targets when opening.
    To prevent this animation, set this option to null.
    With this option, you can easily use animations like animate.css brings to you.

    For example, you'll only had to assign'animate slideInUp'in this option to make targets appear with this animation.

    There are some built-in animations that you can use in navegante-animations.css. More info here


  • leave: string / null null

    Same functionality as in animation.enter, but setting the closing animation.

    There are some built-in animations that you can use in navegante-animations.css. More info here


  • duration: int / null null If null, it will use the transitionDuration option.
    If you need a custom speed for the animation, you can assign it here in milliseconds.
    When setting this option, transition.duration will be updated with this value

Example

// jQuery
$('#my-navegante').navegante({
    animation: {
        enter    : 'my-entering-css-animation',
        leave    : 'my-leaving-css-animation',
        duration : 300
    }
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    animation: {
        enter    : 'my-entering-css-animation',
        leave    : 'my-leaving-css-animation',
        duration : 300
    }
})