Loading...
 

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.

Structure

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:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Login</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


HINT:

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!

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <!-- HERE -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- AND HERE -->


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:

"navbar-fixed-top"

Here is the Code:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">


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.

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

Done.

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:

nobox=y

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:

nobox=y&category=3&whatever=n
etc.

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

HINT:

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:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a> <!-- why not using a logo here or something fancy?-->
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- attention: this id MUST be the same than the data-target above and both need to be different than the analogue id in other navbars, once they possibly appear on the same page (or article, etc. ) -->
      <ul class="nav navbar-nav"> <!-- mind: left area of the navbar, floats left towards the brand (if existing) -->
         <li class="dropdown">     <!--here the dropdown! -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown menu label top level<span class="caret"></span></a> <!-- here the dropdown menu label at the top level of the navbar (no link, but opens the list below) -->
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li><a href="#">Menu Item</a></li> <!-- top level, this one is a link (external or internal) -->
        <li><a href="#">Menu Item</a></li> <!-- top level, this one is a link (external or internal) -->
      </ul>
      <ul class="nav navbar-nav navbar-right"> <!-- mind: right area of the navbar, floats right -->
        <li><a href="#">Login</a></li> <!-- top level, this one is a link (external or internal) -->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


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:

HINT

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!

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar_header_fixed-top">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
            <a class="navbar-brand" href="tiki-index.php"><b>{tr}Documentation{/tr}</b></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar_header_fixed-top">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">{tr}Topics{/tr}<b class="caret"></b></a>
          <ul class="dropdown-menu">
           <li><a href="{tr}Features{tr}">{tr}Features{/tr}</a></li>
           <li><a href="{tr}Requirements{tr}">{tr}Requirements{/tr}</a></li>
           <li><a href="{tr}Download{tr}">{tr}Download{/tr}</a></li>
           <li><a href="{tr}Tiki+Installation+Guide{tr}">{tr}Install{/tr}</a></li>
           <li><a href="{tr}Backup{tr}">{tr}Backup{/tr}</a></li>
           <li><a href="{tr}Upgrade{tr}">{tr}Upgrade{/tr}</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">{tr}Help{/tr}<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="Troubleshootig">{tr}Troubleshooting{/tr}</a></li>
            <li><a href="Tiki FAQs">{tr}FAQs{/tr}</a></li>
            <li><a href="https://doc.tiki.org/tiki-admin_menu_options.php?menuId=44">{tr}Edit Menu{/tr}</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">{tr}All Tiki Community Sites{/tr}<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="http://info.tiki.org">{tr}Information{/tr}</a></li>
            <li><a href="http://doc.tiki.org">{tr}Documentation{/tr}</a></li>
            <li><a href="http://dev.tiki.org">{tr}Development{/tr}</a></li>
            <li><a href="http://tiki.org/Community">{tr}Community{/tr}</a></li>
            <li><a href="http://themes.tiki.org">{tr}Themes{/tr}</a></li>
            <li><a href="http://profiles.tiki.org">{tr}Profiles{/tr}</a></li>
            <li><a href="http://suite.tiki.org">{tr}Suite{/tr}</a></li>
            <li><a href="http://demo.tiki.org">{tr}Demo{/tr}</a></li>
            <li><a href="http://irc.tiki.org">{tr}Chat / Live{/tr}</a></li>
            <li><a href="http://branding.tiki.org">{tr}Branding{/tr}</a></li>
            <li><a href="https://tiki.org/tiki-register.php">{tr}Register{/tr}</a></li>
          </ul>
        </li>
        {if !$user}
        <li><a href="https://tiki.org/tiki-register.php"><span class="glyphicon glyphicon-user"></span> {tr}Create Account{/tr}</a></li>
        {/if}
        <li>{if !$user}<a href="login" style="color:#ffffff;"><span class="glyphicon glyphicon-log-in"></span> {tr}Login{/tr}</a>{else}<a href="logout" style="color:#ffffff;">{tr}Logout{/tr} <span class="glyphicon glyphicon-log-out"></span></a>{/if}
        </li>
        <li class="input"><div class="slim-fixed-top_navbar">{module module="switch_lang" nobox="y"}</div></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


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

doc.tiki.org


Bootstrap

AdminGuide

UserGuide

Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting (7.x)
Articles and Submissions
Backlinks
Banners
Batch (6.x)
BigBlueButton audio/video/chat/screensharing (5.x)
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution (2.x)
Cookie
Copyright
Credit (6.x)
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs 8.x
Draw 7.x
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management (4.x)
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links (3.x)
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags (2.x)
Task
Tell a Friend, alert + Social Bookmarking
TikiTests (2.x)
Theme CSS & Smarty
Trackers
Transitions (5.x)
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebHelp
WebDAV (5.x)
Webmail
Web Services
Wiki 3D
Wiki History, page rename, etc
Wiki Page Staging and Approval (2.x)
Wiki Plugin extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG (2.x)
XMLRPC


Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki