Customize

Basic styles

Navegante has some basic required styles to make it work correctly, which you must always load.

As explained at Start section, you must load"navegante.min.css"inside the <head>tag.

Themes

Navegante comes with a built-in set of styling themes ready-to-use in your projects.

The themes are structured in 3 sets:

Basic

  • light
  • dark
  • +
  • blue-aqua

When you choose the basic themes "dark" or "light", it will automatically use blue-aqua color as the secondary color. These are the default combinations.

Dark & Light combinations

  • light
  • dark
  • +
  • red
  • purple
  • blue
  • blue-aqua
  • yellow
  • orange
  • green
  • pink

To combine each color with the basic dark & light themes, you must set the theme option like this: theme: "dark-/*color key name*/" or theme: "light-/*color key name*/"

For example, if you need that your nav be dark and pink you will must easily set the option in this way: theme: "dark-pink".

Colors

  • red
  • purple
  • blue
  • blue-aqua
  • yellow
  • orange
  • green
  • pink

Of course, you can use each color individually without the combination with dark or light.
Set the option with the color key you choose: theme: "light-/*color key name*/"

For example, if you need that your nav be orange you will must easily set the option in this way: theme: "orange".

Classes

When Navegante knows which theme to use, it will add the class"navegante-theme--/*theme key name*/" to the root element of the nav.

For example, if you settheme: "red"in the options object, Navegante will add "navegante-theme--red" class.

With this in mind, you can easily modify and create your own themes.

If, for example, you would want to create a yellow theme, you should only repeat the previous process changing"red"to"yellow". And finally in your styles, use generated"navegante-theme--yellow"class as your css style start point to assign styles to the nav.

SCSS

Navegante styles are coded using SASS preprocessor and are included in the src folder, where you will find all the variables used to make the themes at src/scss/themes/_variables.scss.

In this file you can modify every color variable and its value to create your own custom theme css file.

CSS

Finally, you can also modify theme colors directly in navegante-themes.css file.

Animations

Navegante comes with multiple CSS animations ready-to-use in your navs.

Below you'll find the list of the CSS classes that you can use:

  • navegante-anim--scale-in
  • navegante-anim--scale-out
  • navegante-anim--shrink-in
  • navegante-anim--shrink-out
  • navegante-anim--slide-in
  • navegante-anim--slide-out
  • navegante-anim--fold-in
  • navegante-anim--fold-out
  • navegante-anim--fade-in
  • navegante-anim--fade-out

To assign an animation just tell it to Navegante when you pass to it the options object.

You can set animation option to assign the animation of a group.

Inside of this option you can set enter option to assign opening animation, leave for closing animation and duration for the time will take to performs the animation.

Example

// jQuery
$('#my-navegante').navegante({
    animation: {
        enter: 'navegante-anim--scale-in',
        leave: 'navegante-anim--scale-out',
        duration: 300
    }
})

// vanilla Javascript
const navegante = new Navegante('#my-navegante', {
    animation: {
        enter: 'navegante-anim--scale-in',
        leave: 'navegante-anim--scale-out',
        duration: 300
    }
})

To know more in detail about these options, please check the options section

Content

Navegante comes with a predefined styles to help you to set simple paragraphs, headers, links, images and much more.

These styles are very useful when you need to show some content inside the last group target like an description, image, etc.

To make it work, just add navegante-content class to the container element of your content.

An example:

// This have to go inside of a target //
<article class="navegante-content">
    <h3>This is the target title</h3>
    <p>And I'm a description</p>
</article>

Grid

There is too a grid css system built using CSS Flex System to let you to create layouts into the contents.

This grid is included in Navegante as a separated css file navegante-grid.css.In this way it let you choose if you want to insert it in your project.

The grid is strongly based in the Flexbox Grid and in this link you can find more info in how to use it.
It uses basically the same semantics as Bootstrap Grid, but using css flex.

The use of CSS Flex may be a problem in some projects (if you need to target to <IE9), so this is the reason why this module is separated in other css file, to let you choose using it.

Classes

When a Navegante nav is created, a set of helpers and state classes are added to the elements reporting the state and processes that are happening.

These classes will be very useful to manage your styles depending on states and, also, you can use them in your custom scripts and styles.

Check out the list of classes below:

General classes (added to the nav wrapper element)

"navegante--is-/*horizontal or vertical*/" Indicates that the nav has horizontal or vertical orientation
"navegante--is-boxed" Indicates that the nav has boxed width or not
"navegante--theme-/*theme key name*/" Indicates that the nav is using this theme
As explained in Themes, it will be added to the class the color combination you choose.
"navegante--is-responsive" Indicates that the nav is in responsive state
"navegante-responsive--slide-/*left or right*/" Indicates that the nav will be opened to the left or right when is responsive

General classes (added to the root element)

"navegante--is-initialized" Indicates that the nav has been initialized
"navegante--has-animations" Indicates that the nav is using animations

Groups classes (added to each group)

"navegante--level-/*level int*/" Indicates the nesting level of this group
"navegante--is-active" Indicates that this group is currently active
"navegante--is-base-group" Indicates that this group is a base group.
It means that this group belongs to the bar and has not children.
"navegante--is-child-group" Indicates that this group is a child group.
It means that this group is a descendant of some group.
"navegante--is-mega" Indicates that this group has a mega panel.
This mega panel will have full width if is a base group and relative full width if is a child group.
"navegante--is-tab-group" Indicates the this group is part of a tab component
"navegante--is-last" Indicates that this group is the last of its level
"navegante--is-animating" Indicates that this group is currently animating.
When the animation stops, this class will be removed.
"navegante--is-opening" Indicates that this group is currently opening through the height or width transition
"navegante--is-closing" Indicates that this group is currently closing through the height or width transition
"navegante--is-opened" Indicates that this group has just be opened and the transition has just stopped
"navegante--is-closed" Indicates that this group has just be closed and the transition has just stopped

Triggers classes

"navegante-position--/*position*/" Indicates that this trigger is orientated to this position.
It means that its target will be opened at this position.
Ex: navegante-position--bottom-left
"navegante--is-active" Indicates that this group is currently active
"navegante--is-tab-trigger" Indicates that this trigger is part of a tab component

Targets classes

"navegante-position--/*position*/" Indicates that this target is orientated to this position.
Ex: navegante-position--bottom-right
"navegante--is-mega" Indicates that this target has a mega panel
"navegante--has-tabs" Indicates that this target is the container of a tab component
"navegante--is-tab-target" Indicates that this target is part of a tab component