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).
| |-- assets
| | |-- images
| | | `-- 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
This file comes with an HTML skeleton and some embedded Ruby (ERB) tags.
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
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.
Let’s say you want to add navigation to your application. You can do this by adding a navbar inside the
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.
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
- 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.)
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
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.