Jekyll One
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:

  1. Navigation Bar

  2. MainMenu

  3. Quicklinks

  4. TopSearch

  5. Sidebar

Main navigation bar example
Main navigation bar example

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
Main navigation with a search bar
Sidebar example
Sidebar example

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

Navigation Bar

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.

Main navigation bar example
Main navigation bar example

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

Main Menu

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

Main Menu Example
Main Menu Example

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

Main Menu example

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
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
Quicklinks using TopSearch
TopSearch input
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.

Sidebar

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
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.

Sidebar example

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