navigator

This page is under construction. An updated version will be available soon.

When it comes to the usability of a website the focus of your vistors is on one important component: the Navigation System. The Navigation System used by J1 Template (this NAV module) is using a modified version of Bootsnav, a multi purpose navigation builder based on the Bootstrap V3 Framework.

Bootsnav extends the native navigation features of Bootstrap by more complex functionalities and additional features. J1 Template integrates Bootsnav into the world of Jekyll, and make all features available by configuration - no programming is needed.

Since J1 Template has been moved to the most current version of Bootstrap (Bootstrap V4), the underlying Javascript and CSS components of Bootsnav have been heavily modified. The original implementation of Bootsnav created by Adam M Nurdin can be found here. The basic concepts remain unchanged but a lot of changes were made to make the library usable for J1 Template based on Bootstrap V4.

Bootstnav improves the Bootstrap Framework in regard to ease-of-use and a powerful, simplified navigation. This is achieved by providing a navigation bar (NavBar) which features a MainMenu, an area for Quicklinks and, as collapsible components, a Sidebar and a Topsearch bar.

There are plenty of layout flavours to be chosen from for an individual arrangement of these elements. As of today 20+ variations are available to navigate a site using Bootstrap with Bootsnav.

Content counts: a well-structured navigation system leads to an excellent browsing experience for your visitors by offering easy access, fast orientation and quick overviews.

Configuration

The NAV module is quite a complex feature of J1 Template. The module implements the navigation bar (1) which in turn consists of the Main Menu (2) and the Quicklinks (3). Via Quicklinks access is provided to additional navigational components: the Top Search (4) and the Sidebar (5). The global Brand Image (6) is also embedded.

Overall, the NAV module consists of 5 configurable sub-modules:

Navigation Bar
MainMenu
Quicklinks
TopSearch
Sidebar

The sub-module navigation bar NavBar covers the general behaviour of the navigation system, e.g. how the NavBar is embedded in the page, colors, icons etc. and the placement and behaviour of all the other navigation components.

Main navigation with a search bar

In order to configure the NAV Module two YAML files are used. All sub-modules of the NavBar get configured in j1_bootsnav.yml, whereas in j1_bootsnav_mainmenu.yml *only the Main Menu gets configured. As dropdown menus typically grow over the time, they might become very large in data. This is why a separate file is used for their configuration.

Module configuration tree _data for the NAV Module

  ├──── _data
  │    │
    ..
  │    │
  │    └─── modules
  │         ├──  ..
  │         ├──  j1_bootsnav.yml
  │         ├──  j1_bootsnav_menu.yml
  │         └─── ..

Module Settings

Consectetur amet consequatur enim autem et sit aut voluptates dolor. Occaecati consectetur odit et sit. Vitae tempore ex fuga. Omnis assumenda quasi eos iure. Quia unde et non rerum sit enim aliquid consequatur quibusdam deleniti.

Resource Settings

Module resources (resource.yml) for the_NAV Module_`

# -----------------------------------------------------------------------
# Bootsnav4 (NAV Module)
- resource:
    enabled:                      true
    id:                           bootsnav4
    comment:                      Resources for J1 Bootsnav (BS4)
    layout:                       [ all ]
    region:                       head
    required:                     always
    script_load:                  sync
    data:
      files:                      [
                                    core4/css/modules/j1_bootsnav4.css,
                                    core4/css/modules/j1_bootsnav_template4.css,
                                    core4/js/j1_adapter_bootsnav4.js
                                  ]
      init_function:              j1Bootsnav4.init

General Settings

The general settings, their values and descriptions are listed in the following excerpt from j1_bootsnav.yml config file:

The general settings of the NAV module contain settings for the debug mode.

Table 1. General NavBar parameters
Parameter	Value	Default
Description	debug	boolean `true`, `false`

Default Settings

The default module settings, their values and short descriptions are listed in the following excerpt from j1_bootsnav.yml config file:

# ------------------------------------------------------------------------------
# 1. Default settings
#
defaults:
  globals:
    debug:                              false
  nav_bar:
    brand_position:                     left
    fixed:                              false
    style:                              overlay
    color:                              light
    position:                           left
    bottom_line_height:                 1
    bottom_line_color:                  md_grey_200
    background_color_full:              rgba_darken
    background_color_collapsed:         rgba_darken
    background_color_scrolled:          "#20295B"
  nav_menu:
    raised_level:                       5
    menu_font_size:                     large
    megamenu_font_size:                 large
    icon_family:                        FontAwesome
    icon_color:                         md_grey
    icon_size:                          large
    menu_item_color:                    md_grey_50
    menu_item_color_hover:              md_pink
    dropdown_style:                     raised
    dropdown_item_style:                flat
    dropdown_animate:                   default
    dropdown_animate_duration:          1.5
    dropdown_width:                     270
    dropdown_font_size:                 small
    dropdown_padding_x:                 15
    dropdown_padding_y:                 10
    dropdown_item_color:                md_grey_900
    dropdown_border_color:              md_pink
    dropdown_border_height:             3
    dropdown_background_color_hover:    md_indigo_50
    dropdown_background_color_active:   md_green_100
  nav_quicklinks:
    enabled:                            true
    icon_family:                        ZMDI
    icon_color:                         md_white
    icon_size:                          larger
    top_search_icon:                    search
    sidebar_icon:                       more-vert
    facebook_icon:                      facebook
    facebook_url:                       none
    twitter_icon:                       twitter
    twitter_url:                        none
    google_plus_icon:                   google-plus
    google_plus_url:                    none
  nav_topsearch:
    enabled:                            true
    type:                               quick_search
    icon_family:                        ZMDI
    icon_color:                         md_white
    icon_size:                          xlarge
    search_icon:                        search
    close_icon:                         close
    input_color:                        md_grey_900
    background_color:                   md_indigo_400
    placeholder:                        QuickSearch
    search_heading_lead:                Quick Search Results
    result_heading_lead:                none
  nav_sidebar:
    display_theme:                      true
    icon_family:                        ZMDI
    icon_color:                         md_white
    icon_size:                          xlarge
    close_icon:                         close
    background_color:                   md_grey_800

The NavBar is configurable in many ways. Fixation, overlay style, color settings, position and many other parameters can be adjusted to one’s personal taste.

The table below provides a list of all possible configuration parameters, their default values and descriptions.

Table 2. Navbar parameters
Parameter	Value	Default
Description	`background_color_collapsed`	string `md_color_name`, `#rgb_value`
`rgba_darken`	Color used for the NavBar if main menu is `collapsed`	`background_color_full`
string `md_color_name`, `#rgb_value`	`rgba_darken`	Color used for the NavBar if main menu is not `collapsed`
`background_color_scrolled`	string `md_color_name`, `#rgb_value`	`#20295B`
Color used for the NavBar if the page is `scrolled` down	`bottom_line_color`	string `md_color_name`, `#rgb_value`
`md_grey_200`	Color used for .. bottom_line_color	`bottom_line_height`
integer	`1`	bottom_line_height (px)
`brand_position`	`left` \| `right`	`left`
Position of the brand image	`color`	`light` \| `dark`
`light`	Sets the color for the top level menu items (including Quicklink icons)	`fixed`
boolean [`true` \| `false`]	`true`	Enables\|Disables a fixed position of the top navigation bar. If a page is being scrolled down, the navigation bar leaves fixed at the most top position of the page.
`position`	`left` \| `right` \| `centered`	`left`
Position of the menu bar	`style`	`overlay` \| `embedded`

The Main Menu is the part of the NavBar where the website’s navigational menus themselves appear.

The table below shows all possible configuration parameters for the Main Menu. Note that sublevel and dropdown are special configurational parameters that mark the creation of another level of dropdown submenus.

Table 3. Navbar parameters
Parameter	Value	Default	Description
`dropdown_animate`	string	`fadeIn`	Puts an animation of the dropdown and mega-menu. All types allowed specified by animate.css
`dropdown_animate_duration`	integer	`1000`	dropdown animate duration.
`dropdown_background_color_active`	string `md_color_name`, `#rgb_value`	`#FFF`	Color used for `dropdown_background`
`dropdown_background_color_hover`	string `md_color_name`, `#rgb_value`	`#FFF`	Color used for `dropdown_background`
`dropdown_border_color`	string `md_color_name`, `#rgb_value`	`#FFF`	Color used for `dropdown_border_color`
`dropdown_border_height`	integer	`3`	dropdown_border_height.
`dropdown_font_size`	string `font_size_name`, `integer`	`#FFF`	dropdown_font_size
`dropdown_item_color`	string `md_color_name`, `#rgb_value`	`#FFF`	Color used for `dropdown_item_color`
`dropdown_item_style`	string `font_size_name`, `integer`	`#FFF`	dropdown_item_style
`dropdown_padding_x`	integer	`3`	dropdown_padding_x.
`dropdown_padding_y`	integer	`3`	dropdown_padding_y.
`dropdown_style`	string `font_size_name`, `integer`	`#FFF`	dropdown_style
`dropdown_width`	integer	`270`	dropdown width (px).
`icon_color`	string `md_color_name`, `#rgb_value`	`md_grey`	Color used for all dropdown and mega-menu `icons`
`icon_family`	FontAwesome\|MDI\|ZMDI `md_color_name`, `#rgb_value`	`#FFF`	Set the DEFAULT icon family used for all dropdown and mega-menus from what a (menu) icon should be taken from. NOTE: Be aware that the related CSS file for the font icon set needs to be included as a resource.
`icon_size`	string `font_size_name`, `integer`	`#FFF`	Icon size used for dropdown and mega-menu `icons`
`megamenu_font_size`	string `font_size_name`, `integer`	`#FFF`	Font size used for `mega-menu`
`menu_font_size`	string `font_size_name`, `integer`	`#FFF`	Font size used for `dropdown menu`
`menu_item_color`	string `md_color_name`, `#rgb_value`	`#FFF`	Color used for `menu item`
`menu_item_color_hover`	string `md_color_name`, `#rgb_value`	`#FFF`	Color used for `menu item` mouse hover
`raised_level`	integer out of [0 .. 24]	`5`	Defines the `raised_level` of the dropdown menus

The following excerpt from j1_bootsnav.yml config file is an example of how to create a main menu item. It shows a single top level item plus a dropdown list of two more topics. One of which eventually has a dropdown list that includes another two submenus.

Main Menu settings example

# Main Menu settings
# -------------------------------------------------------------------------
mainmenu:
  icon_family:                    FontAwesome
  icon_color:                     md_grey
  icon_size:                      large
  dropdown_animate:               default
  animate_duration:               1.5
  dropdown_width:                 270
  dropdown_font_size:             small
  megamenu_font_size:             default
  dropdown_padding_v:             10
  dropdown_padding_h:             15
  dropdown_border_color:          j1_accent
  dropdown_item_color:            j1_primary_50
  dropdown_item_color_hover:      j1_primary

QuickLink bar

The QuickLink area of the NavBar hosts (as per default) links to common social media websites and provides access both to the Top Search (as will be described later) and the Sidebar.

QuickLink Example

The following table holds all the config parameters for the Quicklink area of the NavBar.

Table 4. Quicklinks parameters
Parameter	Values	Default	Description
`enabled`	boolean `true`, `false`	`true`	Enables\|Disables the use of the QuickLink bar.
`icon_size`	`small`, `default`, `large`, `xlarge`, `xxlarge`	`default`	Icon `search_icon` placed within the TopSearch input bar to access search functionality.
`icon_color`	string `md_color_name`, `#rgb_value`	`#FFF`	Color used for `search_icon` and `close_icon` within the Search (input) bar
`top_search_icon`	string `icon name`, `icon id`	`magnify`	Icon `search_icon` placed within the Quicklink bar to open the the TopSearch bar. See General Settings for more details. The name \| id depends on the icon font configured with the general settings (`icon_family`). See [side-bar-settings] for more details. No family name prefix (`fa` or `mdi`) is needed for `icon name`.
`sidebar_icon`	string `icon name`, `icon id`	`menu`	Icon `sidebar_icon` placed within the TopSearch input bar to access side bar functionality. See [topsearch-bar-settings] for more details. The name \| id depends on the icon font configured with the general settings (`icon_family`). See General Settings for more details. No family name prefix (`fa` or `mdi`) is needed for `icon name`.
`facebook_icon`, `twitter_icon`, `google_plus_icon`	string `icon name`, `icon id`	no defaults	Quick access to social media sites. The icon is placed within the Quicklink bar in the order configured from the left to the right. An icon is displayed, if the correspondend url is configured.
`facebook_url`, `twitter_url`, `google_plus_url`	string, `url`	no defaults	Weblink (URL) the the related web site.

QuickLink settings

The following excerpt from j1_bootsnav.yml config file gives an overview of the current default settings for the QuickLinks.

Quicklink settings example

# --------------------------------------------------------------------
# QuickLinks settings
#
quicklinks:
  enabled:                    true
  icon_size:                  large
  icon_color:                 "#FFF"
  top_search_icon:            magnify
  sidebar_icon:               menu
  facebook_icon:              facebook
  facebook_url:               "#"
  twitter_icon:               twitter
  twitter_url:
  google_plus_icon:           google-plus
  google_plus_url:

Top Search

The Top Search bar provides a collapsible search input bar on top of every page used by J1 Template performing SimpleJekyllSearch. If enabled, a magnifier icon is displayed within the Quicklinks area at the most top position of the navigation bar.

Quicklinks using TopSearch

TopSearch input

Following is a table with all the possible parameters for the top search bar.

Table 5. Top Search parameters
Parameter	Values	Default	Description
`enabled`	boolean `true`, `false`	`true`	Enables\|Disables the use of TopSearch.
`background_color`	string `md_color_name`, `#rgb_value`	`j1_primary_400`	Background color of the Search bar.
`placeholder`	string `QuickSearch`	Placeholder string displayed if search input is empty.	`icon_size`
`small`, `default`, `large`, `xlarge`, `xxlarge`	`default`	Icon `search_icon` placed within the TopSearch input bar to access search functionality.	`icon_color`
string `md_color_name`, `#rgb_value`	`#FFF`	Color used for `search_icon` and `close_icon` within the Search (input) bar	`search_icon`
string `icon name`, `icon id`	`magnify`	Icon `search_icon` placed within the Search input bar before the input line of the search. The name\| id depends on the icon font configured with the general settings (`icon_family`). No family name prefix (`fa` or `mdi`) is needed for `icon name`.	`close_icon`
string `icon name`, `icon id`	`close`	Icon `close_icon` placed within the Search input bar to to close\|finish a search. The name\| id depends on the icon font configured with the general settings (`icon_family`). No family name prefix (`fa` or `mdi`) is needed for `icon name`.	`search_heading_lead`
string `Quick Search Results`	Lead title for search results.	`result_heading_lead`	string

Top Search settings

Below is an example of how the Top Search bar can be configured.

Top Search settings example

# --------------------------------------------------------------------
# Top search settings
#
top_search:
  enabled:                    true
  background_color:           j1_primary_400
  placeholder:                QuickSearch
  icon_size:                  xxlarge
  icon_color:                 "#FFF"
  search_icon:                magnify
  close_icon:                 close
  search_heading_lead:        Quick Search Results
  result_heading_lead: >
                              Quick Search carries out a basic search
                              for all documemts if this site.

The J1 NavBar also includes a collapsible Sidebar which, depending on the type of the content page, offers useful information or some more navigational items.

Sidebar example

Again, also the sidebar provides a lot of interesting configurational parameters. Check them out in the table below.

Table 6. Sidebar parameters
Parameter	Values	Default	Description
`enabled`	boolean `true`,`false`	`true`	Enables or disables the collapsible sidebar.
`display_theme`	boolean `true`,`false`	`true`	If enabled some information about the theme (version, author, etc) is provided.
`icon_size`	string	`xxlarge`	Define the size of the used icons.
`icon_color`	string	`"#FFF"`	Define the color of the used icons.
`close_icon`	string	`close`	Choose a closing icon out of font awesome icons.
`background_color`	string	`md_grey_800`	Configure the color of the sidebar’s background.
`title`	string	`Site Info`	Set the name for each box in the sidebar.
`type`	string	`linkbox`	Define the type of the box that is being used.

To get an idea of how the sidebar can be configured, see the following configuration snippet.

Sidebar settings example

# --------------------------------------------------------------------
# Side bar settings
#
sidebar:
  enabled:                    true
  display_theme:              true
  icon_size:                  xxlarge
  icon_color:                 "#FFF"
  close_icon:                 close
  background_color:           md_grey_800
  boxes:
    - box:
        title:                Site Info
        type:                 linkbox
        links:
          Über:               /pages/about
          Impressum:          /pages/impress_de
          Nutzung:            /pages/terms_of_use_de
          Datenschutz:        /pages/privacy-de
          Lizensierung:       /pages/license_agreement_de
          Contact:            mailto:contact@jekyll.one