meteor Blaze User Interface Recipes (Bootstrap; No jQuery) Navbars


A very common task is to create responsive navbars and to create action/footer bars that have different controls based on what page a user is on, or what role a user belongs to. Lets go over how to make these controls.


  layoutTemplate: 'appLayout',
Router.route('checklistPage', {
    path: '/lists/:_id',
    onBeforeAction: function() {
      Session.set('selectedListId', this.params._id);;
    yieldTemplates: {
      'navbarFooter': {
        to: 'footer'

Create a Navbar Template

<template name="navbarFooter">
  <nav id="navbarFooterNav" class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <ul class="nav navbar-nav">
      <li><a id="addPostLink"><u>A</u>dd Post</a></li>         
      <li><a id="editPostLink"><u>E</u>dit Post</a></li>          
      <li><a id="deletePostLink"><u>D</u>elete Post</a></li>
    <ul class="nav navbar-nav navbar-right">       
      <li><a id="helpLink"><u>H</u>elp</a></li>

Define Yields in the Layout

<template name="appLayout">
  <div id="appLayout">
    <header id="navbarHeader">
      {{> yield 'header'}}     

      <div id="mainPanel">
        {{> yield}}

    <footer id="navbarFooter" class="{{getTheme}}"">
      {{> yield 'footerActionElements' }}