RD Navbar Documentation

Script settings

Symbols for data attributes:

(*) - is a suffix that determines for which screen size the property will be defined. Suffixes:

  • xs
    from 480px
  • sm
    from 768px
  • md
    from 992px
  • lg
    from 1199px

Settings

layout or data-(*)-layout
Type
String
The default value
'rd-navbar-static'

Defines the type of navbar's layout

deviceLayout or data-(*)-device-layout
Type
String
The default value
'rd-navbar-fixed'

Determines the type of navbar’s layout for mobile devices

focusOnHover or data-(*)-hover-on
Type
Boolean
Default value
true

Enables/Disables the submenu display on hover

focusOnHoverTimeout
Type
String
The default value
800

Specifies the time (ms) for the delay to automatically hide the submenu and the hover out.

linkedElements
Type
Array
Default value
['html']

Defines an array for creating linked elements. The value of an array element can be either a selector or an HTML element. When you change the layout of Navbar, each of the linked elements will be hovered with the appropriate [layout] -linked format class.

domAppend
Type
Boolean
Default value
true

The toggle that is responsible for the automatic addition of the specified HTML markup of Navbar with additional service classes and elements.

stickUp или data-(*)-stick-up
Type
Boolean
Default value
true

The toggle responsible for sticking the panel when scrolling.

stickUpClone
Type
Boolean
Default value
true

Determines which element will be used to create the sticking effect when scrolling: clone or original.

stickUpOffset или data-(*)-stick-up-offset
Type
Number|String
Default value
'100%'

Determines the distance from the beginning of the navbar, at which the sticking of the panel will occur when scrolling. You can use both the exact distance, and the percentage of the height of navbar.

anchorNav
Type
Boolean
Default value
false

Implements anchor navigation on the page.

anchorNavSpeed
Type
Number
Default value
400

Determines the motion speed when using single-page anchor navigation.

anchorNavOffset
Type
Number
Default value
0

Specifies the additional motion distance when using single-page anchor navigation. You can use a negative value.

anchorNavEasing
Type
String
Default value
'swing'

Defines the name of the temporary motion function when using single-page navigation. Requires the jQuery Easing 1.1+ plug-in.

autoHeight or data-(*)-auto-height
Type
Boolean
Default value
true

Determines if the height for rd-navbar-wrap will be calculated.

responsive
Type
Object

The object that is used to override the default settings for specific permissions.

callbacks
Type
Object

The object that is used to define callback functions for certain occasions.

Occasions

Toggle Switched
Callback
OnToggleSwitch

It is determined when the toggle state changes. Returns the affected toggle and the context of navbar

Toggle Closed
Callback
OnToggleClose

It is determined when the toggle is deactivated. Returns the affected toggle and the context of navbar

Dom Appended
Callback
OnDomAppend

It is defined when the specified HTML markup of Navbar with additional service elements and classes are added. Returns the context of navbar.

Submenu Mouse Enter
Callback
OnDropdownOver

It is determined when the mouse pointer is on a menu item containing a submenu. Returns the affected menu item and the context of navbar.

Submenu Mouse Leave
Callback
OnDropdownOut

It is determined when the mouse pointer leaves the menu item containing the submenu. Returns the affected menu item and the context of navbar.

Submenu Toggled
Callback
OnDropdownToggle

It is determined when the submenu is activated/deactivated. Returns the affected menu item and the context of navbar.

Submenu Closed
Callback
OnDropdownClose

It is defined when the submenu is deactivated. Returns the affected menu item and the context of navbar.

Navbar Sticked Up
Callback
OnStuck

It is determined while sticking of the navbar panel.

Navbar Came Static
Callback
OnUnstuck

It is determined when the navbar panel changes to static mode.

Anchor Changed
Callback
OnAnchorChange

It is determined when the current element of single-page anchor navigation changes.