The Gravstrap Navbar shortcode handles the Bootstrap navbar component. Here is a live example:

The navbar shortcode, shown above, is defined by the following definition:

[g-navbar id="navbar_demo" name="navbar_demo" centering=none brand_text="Brand" attributes="class:no-scroll"]
    [g-navbar-menu alignment="center" submenu="internal,components"][/g-navbar-menu]    
    [g-navbar-menu icon_type="fontawesome" alignment="right" attributes="class:social-menu"]
        [g-link url="https://twitter.com/giansi72" icon="twitter"][/g-link]
        [g-link url="https://www.facebook.com/diblas.net" icon="facebook"][/g-link]
        [g-link url="https://github.com/giansi" icon="github"][/g-link]
        [g-link url="http://www.stumbleupon.com/stumbler/Giansimon" icon="stumbleupon"][/g-link]
        [g-link url="http://feeds.feedburner.com/diblas" icon="rss"][/g-link]
    [/g-navbar-menu]
[/g-navbar]

Navbar can display a form as well:

The navbar shortcode, shown above, is defined by the following definition:

[g-navbar id="navbar_demo1" name="navbar_demo1" brand_text="Brand" attributes="class:no-scroll"]
    [g-navbar-menu alignment="center"][/g-navbar-menu]
    [g-navbar-form alignment="right" placeholder="Search" button_visible=true button_label=Go button_type=danger button_attributes="class:foo,action:'do_smt()"][/g-navbar-form]
[/g-navbar]

These two toolbars are placed into a small column and this might compromise their rendering on medium devices. If you fall in this situation, please try to watch this page with a desktop PC or refer the web site toolbar as example.

Shortcode parameters

The [g-navbar] shortcode has some optional parameters:

  • name - defines an unique component name.
  • id - defines the same name HTML property. This property is required to correctly handle the toggled navbar.
  • brand_text - defines the brand as a text.
  • brand_image - defines the brand as a 20x20 pixels image. When defined replaces the brand_text if it is set.
  • container - Adds a container instead of container-fluid. Valid values are true|false. By default this value is set to false.
  • inverse - Displays an inversed navbar. Valid values are true|false. By default this value is set to false.
  • attributes - defines extra attributes you can add to your shortcode. Attributes is a string of HTML key:value tokens, separated by commas. A valid attributes value is attributes=class:myclass, rel:my-rel".

The [g-navbar-menu] shortcode, which defines each navbar's menu, has the following parameters:

  • alignment - Defines the menu alignment into the toolbar. Valid values are left|center|right.
  • onepage - When true renders the menu to act like a single onepage web site. Valid values are true|false. By default this value is set to false.
  • attributes - defines extra attributes you can add to your shortcode. Attributes is a string of HTML key:value tokens, separated by commas. A valid attributes value is attributes=class:myclass, rel:my-rel".

When you do not define any item under the menu, it renders a menu based on the web site pages.

The [g-navbar-form] shortcode, which defines each tab panel, has the following parameters:

  • alignment - Defines the form alignment into the toolbar. Valid values are left|center|right.
  • placeholder - Defines the form's input box placeholder.
  • button_visible - Displays the button when true. Valid values are true|false. By default this value is set to false.
  • button_label - defines the button label.
  • button_type - defines the button type and could be one of the following values: primary|success|info|warning|danger|link|default.
  • button_attributes - defines extra attributes you can add to your button markup. Attributes is a string of HTML key:value tokens, separated by commas. A valid attributes value is attributes=class:myclass, rel:my-rel".

Next Post Previous Post