This documentation refers to a Gravstrap obsolete release. Please consider to upgrade to the new release

The Gravstrap Navbar component handles the Bootstrap navbar component.

The navbar component is defined by the following Yaml code:

gravstrap:
    navbar:
        # Add as many navbars as you need
        navbar1:
          id: bsnavbar
          fixed: none | top / bottom
          centering: none | centered / fluid
          # inverted: true
          brand:
              text: Brand
              #image: brand.png
          items:   
              # Add as many menu or forms as you need
              menu0:
                  type: menu | form
                  # onepage: true
                  # langswitcher: true
                  # full_language_name: true
                  # attributes:
                  #    rel: foo
                  #    class: something-cool
              form1:
                  type: form
                  role: search
                  # alignment: left / right
                  input:
                      placeholder: Search
                  submit:
                      visible: true
                      type: default
                      label: Submit                  
              menu1:
                  type: menu
                  alignment: right

This code must be added to the page where you need to display the component.

The navbar component is usually the same for the whole site. If this is your case, add the navbar configuration to the config/site.yaml file.

id property

The id property defines the same HTML property for the navbar. If you need more than one navbar on the same page, be sure to add a different id for each navbar you define.

fixed property [optional]

The fixed optional property defines when the toolbar is fixed on the page. By default the component is not fixed, so none is the default value for this property. The toolbar can be fixed at the top or at the bottom of the page.

centering property [optional]

The centering optional property defines when the toolbar is centered on the page. By default the component is not centered, so none is the default value for this property.

inverted property [optional]

The inverted optional property displays an inverted toolbar when is set to true.

brand property [optional]

The brand optional property handles the toolbar brand. It can be a text value or an image value. When both are defined, the navbar displays the image.

items property

The items property is an array which defines the elements displayed in the navbar component.

item's type property

The type property defines the item type. This value can be one of menu or form values. The navbar component requires at least a menu defined. The menu key name is important because it can be used at page level to add that page to that specific menu.

item's alignment property [optional]

The alignment optional property defines the item position on the toolbar. This property accepts the left and right values.

menu item's onepage property

The onepage property renders the menu using as items the modular page module names, to easily build a onepage website. Each module can override the module name, uses by default as menu label, defining a menu property in its header section.

menu item's langswitcher/full_language_name properties

The langswitcher property renders the menu using as items the website languages. By default it uses the full language name as link labels. If you want to render just the language acronym, enable the full_language_name and set it to false.

attributes property [optional]

The attributes optional property defines an array of html tags you can add to the item.

The navbar component parses the website pages and, by default, adds them to the first menu. You can add an extra configuration to each page of your website, to change how that page is added to the navbar. Here's an example definition:

navbar_configuration:
    # The navbar where the page is placed.
    navbar: navbar1     
    # The menu where the page is placed.
    menu_item: menu1
    # Renders the page as a dropdown and uses the children as dropdowns items
    submenu: true
    # Displays the specified icon
    icon: camera-retro
    # Changes the icon format. Accepted values are glyphicon, the default icon set, and fontawesome.
    icon_type: fontawesome
    # Rendes the link as a button
    type: link | button
    # Defines the button type
    button_type: primary | danger / success / info / warning

navbar property [optional]

The navbar optional property defines the navbar where the page is added. This property works only when more than one navbar are defined.

menu_item property [optional]

The menu_item optional property defines the menu where the page is added. This property works only when more than one menu are defined.

submenu property [optional]

The submenu optional property renders the page as a dropdown which items are the page's children pages.

icon property [optional]

The icon optional property defines an icon chosen from a specific icons set.

icon_type property [optional]

The icon_type optional property defines the icon set. Valid values are glyphicon and fontawesome. The first is the default one.

type property [optional]

The type optional property defines the link type. Valid values are link, the dafault one, and button.

button_type property [optional]

The button_type optional property defines the button type. This property works only when type is defined as a button.

Render the navbar component

Add the following code to the template where you need to render the navbar component:

{{ gravstrap.navbar1 }}

Next Post Previous Post