Documentation
Navigation bar
Description
The Navigation Bar addon allows users to add a navigation bar to a presentation. Since it doesn't require any additional configuration, you can just insert it into a presentation and enjoy its functions. This addon fully integrates with presentations - you can navigate to every page from every other one. Because of its extensive styling mechanism, it is perfect for using in presentation templates.
Properties
The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.
| Property name | Description |
|---|---|
| ShowNextPrevArrows | This option allows users to show Next (>) and Previous (<) buttons from the addon which results in fewer pages displayed. |
| HideHomeLastArrows | This option allows users to hide First (<<) and Last (<<) buttons from the addon which results in more pages displayed. |
| Numericals | Allows users to choose if the numbers are to be displayed using Western Arabic, Eastern Arabic or Perso-Arabic numericals. |
| Styles | Allows users to add CSS style and class to the navigation buttons ("first", "last", "next", "previous") and all page number buttons. You can separate the pages by commas if you want to add the same CSS style or class to more than one page. |
| Real-time navigationbar-page-ok | This option allows users to add the "navigationbar-page-ok" class to Navigation Bar if a page is solved correctly. |
| First page as cover | This option allows users to set the first page as cover. Pages will be then counted from Page 2. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| bookmarkCurrentPage | --- | Adds the bookmark to the current page – the 'bookmark' class is added to the appropriate button. |
| removeBookmark | --- | Removes the bookmark from the current page. |
CSS classes
| Class name | Description |
|---|---|
| navigationbar-element | A button with a page number or triple dots. |
| navigationbar-element-current | A button showing a current page number. |
| navigationbar-element-first | A button navigating to the first page in a presentation. |
| navigationbar-element-next | A button navigating to the next page. |
| navigationbar-element-previous | A button navigating to the previous page. |
| navigationbar-element-last | A button navigating to the last page in a presentation. |
| navigationbar-element-mouse-hover, navigationbar-element-current-mouse-hover, navigationbar-element-first-mouse-hover, navigationbar-element-next-mouse-hover, navigationbar-element-previous-mouse-hover, navigationbar-element-last-mouse-hover |
Button's state on mouse hover. |
| navigationbar-element-mouse-click, navigationbar-element-current-mouse-click, navigationbar-element-first-mouse-click, navigationbar-element-next-mouse-click, navigationbar-element-previous-mouse-click, navigationbar-element-last-mouse-click |
Button's state on mouse click. |
| navigationbar-element-first-inactive, navigationbar-element-previous-inactive |
Button's state when the first page is displayed. |
| navigationbar-element-next-inactive, navigationbar-element-last-inactive |
Button's state when the last page is displayed. |
| navigationbar-page-ok | Added to a button when the page score is 100%. |
| inactive | Added to the next and previous buttons when inactive (when the first or last page is displayed). |
Demo presentation
Demo presentation showing how to use Navigation Bar Addon.