Navbars in Rails Apps Using Bootstrap

5 min readJun 25, 2020

In this article we will discuss one way to easily create a navbar that can be incorporated into all pages of your Rails app.

Rails app skeleton and where to put the navbar code

Rails initial file structure

When we create a new Rails app using rails create new-app, a lot of files are created for us. To see the full directory structure and explanations of each directory, check out this article.

We are going to focus on the app folder (structure shown below).

.
|-- app
|   |-- assets
|   |   |-- images
|   |   |-- javascripts
|   |   |   `-- application.js
|   |   `-- stylesheets
|   |       `-- application.css
|   |-- controllers
|   |   |-- application_controller.rb
|   |   `-- concerns
|   |-- helpers
|   |   `-- application_helper.rb
|   |-- mailers
|   |-- models
|   |   `-- concerns
|   `-- views
|       `-- layouts
|           `-- application.html.erb

One of the folders created is app/views/layouts and there you can find a file named application.html.erb.

This file comes with an HTML skeleton and some embedded Ruby (ERB) tags.

app/views/layouts/application.html.erb — starter code

The ERB tags are just what they sound like, places within the HTML where we can embed some Ruby code.

Rails page render process

When Rails renders a page, it first looks in the app/views/layouts folder. If there is a file in that folder with the same name as the controller that is rendering the page, Rails will use that file. Otherwise, Rails will use the application.html.erb file in the app/views/layouts folder.

When this file is rendered, the <%= yield %> is replaced by the content of the specific page that is being called by the controller. (Check out this article for more information on MVC in Rails, or the Rails docs for more information on layouts and rendering.)

The upshot of this is that if there is content that we want to display on every page, we can put it in the layouts/application.html.erb file. This file is therefore the perfect place for headers and footers.

Navigation

Let’s say you want to add navigation to your application. You can do this by adding a navbar inside the layouts/application.html.erb file.

There are many ways to make a navbar. You can style it by writing your own CSS or you can use one of the many CSS frameworks and tweak it to your needs.

There are many CSS frameworks out there. One of the more popular ones is Bootstrap.

Using Bootstrap

There are a fews different ways to add Bootstrap to an application.

You can download the source files and add them to your app. This is the most complicated way as it requires additional steps like compiling the CSS using a SASS compiler.
You can copy the CDN from here or from the Bootstrap docs and add it to the <head> element of the layouts/application.html.erb file.
You can install the bootstrap gem by following the instructions in the documentation.

Once you have successfully added Bootstrap to your app, you can implement any of its components by following the documentation and adding the corresponding HTML elements and classes to your code.

Let’s make a navbar

To ensure that the navbar is found in all pages of your app, be sure to place all HTML for the navbar in the body of layouts/application.html.erb before the <%= yield %>.

The first step in creating this navbar is to look through the different Bootstrap navbar examples and choose the elements that you would like to include. In this case, we’ll be using a logo and navigation links.

The next step is to set the href property in each <a> to the correct path, so that clicking on a link will redirect the user to the appropriate page.

To include a logo, switch the <img> tag to a Rails helper method <%= image_tag %>.

Lastly, it is possible to make the navbar dynamic and display different links based on whether or not the user is signed in. This can be done by making use of the Rails built-in session method to store the fact that a user is signed in, in a cookie.

If upon inspecting the cookie we see that the user is logged in, we can display one set of links; otherwise, we can display a different set of links. For example we can display ‘profile’ and ‘logout’ links when the user is signed in, and ‘login’ and ‘sign up’ links otherwise.

Putting this all together, we have the following code. (Note that there is no CDN in this file, as I chose to install the bootstrap gem in my application.)

app/views/layouts/application.html.erb — customized

In summary, in this article we discussed how to easily create a navbar that can be incorporated into all pages of your Rails app. This is done by making use of the layouts/application.html.erb file.

We also discussed how we can use Bootstrap to implement a well-styled navbar and can make use of Rails session to make the navbar dynamic.