Bootstrap Navbar


The easy way: use the "Social Networking" layout template

There are perhaps two approaches to achieving a Bootstrap-style horizontal navbar in a Tiki site (Tiki 13 or newer). The first is simply to use the "Social Networking" layout template. Select this on the Look & Feel admin panel. This layout template has all the code to place a "fixed-to-the-top" navbar. Any modules added to the "topbar" module zone (configured on tiki-admin_modules.php) will be displayed in the navbar, so be careful about module content size.

 Note about including top horizontal menu in the navbar
If you have a Menu module included in the topbar module zone for Social Networking layout the parameter "Show Navbar Toggle Button" must be set to "n" (navbar_toggle=n) otherwise you will get one collapsed menu toggle button for the navbar and another inside for the menu!

The "fixed-top-modules" layout template also places a fixed navbar at the page top, but it doesn't have any built-in content. It depends on the topbar_modules module zone's contents (modules) for the logo, menu, search form or other items to display.

More configuration information for site headers and navbars, etc. is in development.

The harder way: handcraft a Bootstrap Navbar

This is probably best avoided because of the large amount of custom code to be created and maintained. First we have a look at getbootstrap.com to pick the standard code of the "Bootstrap Navbar". The navbar is one of a bunch of the "Bootstrap Components". Some of the components are already implemented in Tiki's WikiSyntax in the one or the other way. Some of the components still have to be created with custom modules or are waiting to be implemented as new WikiPlugins.

To make it a bit easier, we do not take the original navbar, but instead reduce it (throw out most of the elements) and use a very basic version to extend it with Tiki links and elements further below.
Find the full code of the complete original Bootstrap navbar example here.


See here a basic overview over the structure of a Bootstrap navbar:
http://doc.tiki.org/dl1134 (download or view .pdf file)

Here is the Code:


The Id of the data-target and the div class="collapse navbar-collapse" have to be the same, to get the navbar working in collapsed mobile mode! See them as twins!

Same time, if you want to use more than one navbar on the same page, for ex. default or fixed-top in the header, fixed-bottom in the footer and default in the topbar, you need to create a single custom module for each one of the navbars with individual names and the above mentioned Id-pairs must be named differently, as otherwise you would open all navbars at the same time, when you only want to open one (applies in the collapsed mobile mode).

How to make "fixed-top"

That is quite easy: just add one extra class to the nav in the very first line of the navbar code:


Here is the Code:

But how to use in Tiki?

This is quite easy as well, once you have applied a '"Modules" or created a '"custom module" ever before.

Create the Custom Module

Just go to /tiki-admin_modules.php, scroll a bitdown and find three tabs:

Assigned Modules / Custom Modules / All Modules

Click on the second tab "Custom Modules", scroll a bit down until you find "Create new custom module".

Please ignore "Objects that can be included", but left hand side you find a small form where you are asked to type in a name and a title. Lets name the module "header_navbar_fixed-top" as we will apply it to the header and give it the title "Navbar fixed-top Header" - the title will later appear in the drop down of the module assigning dialogue in the first tab.

You could use the same syntax "header_navbar_fixed-top" for both, name and title -> lower case, undersore and location (or alternatively type) first. Then you could group and locate/distinguish the custom modules easier in the list of available modules in the assigning dialogue, which is handy sometimes.

Scroll a bit further down and find an empty data field. Here you paste the code above and save.


Assign the Custom Module

Again find the three tabs in /tiki-admin_modules.php, but this time go with the first tab "Assigned Modules" , scoll a bit down and find a button "Add module" between the heading Assigned Modules and the table of previously assigned modules. Click on that button.

The page is refreshing and then offers you a drop down menu in a newly appeared fourth tab "Edit Module", where you can choose your newly created module from the list - click at it. Then click on the button "Module Options".

The page is refreshing again and then offers you a bunch of options, but far less than with a standard Tiki module.
First choose the module zone where the navbar shall appear -> top for the header, topbar for the topbar and bottom for the footer.
The rest you could ignore for the start (if an ordinary public main navigation navbar), BUT you need to add at least one parameter into the "parameter" field:


Do not forget this, otherwise your navbar will look like a panel with panel-heading ... kind of crappy for our purpose, but easily fixable at the same place /tiki-admin_modules.php.

In case you want to add several parameters, for example to limit the navbar to a certain category, you line them one by one with an ampersand this way:


Click "Assign" and voilà, your Navbar should appear.


Obviously you would apply a navbar_fixed-top to top (header) as very first module and a navbar_fixed-bottom to bottom (footer).

Horizontal Drop Down (Bootstrap) Menu in the Navbar

Here is the Code:

Playing with Smarty

Now that we have the Navbar in Tiki and some menu items, we go to the next level.
We want to add a few links, but the labels (names of the menu items) must be translatable.
Further more we want some conditional links, like Login for Anonymous users and Logout for logged in users etc.
Ah and what about a language switcher module?

Here is the Code:


You can not only translate the labels of menu items by using the {tr}..{/tr} tag, but aswell the links!
Thus you get not only a multilingual appearing, but also a multilingual behaving menu!

Horizontal Drop-Down CSS Menu in the Navbar

While the above code could be adapted to use Superfish menu CSS classes and so on, it isn't easy to write up HTML code for a menu by hand, so the recommendation is to use Tiki's menu and module assignment interface to create and assign menus.

One reason to use a CSS menu in a navbar is that Bootstrap drop-down menus require JavaScript. Using JavaScript may not comply with the rules of ''accessibility at some web sites, at least if no fall-back solutions are provided for people who on whatever reason cannot use JavaScript or don't allow JavaScript in their browsers.

Tiki continues to support Superfish CSS menus so this is an alternative that works "out of the box". Just designate Superfish (CSS)-type menu rather than Bootstrap-type menu when assigning the menu on the admin-modules page. It's

List Slides