paint-brush
Hide the Navigation Bar in Railsby@leonard-kanyesigye
1,321 reads
1,321 reads

Hide the Navigation Bar in Rails

by Leonard KanyesigyeApril 17th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Recently I was working on a project in RoR and I realized I wanted to show the navigation bar and footer on some pages and nothing on others. This article assumes you already have an application running, and already have a sign-up page designed. The next step is to make sure we make the navbar disappear on signup and signing pages, but show up on other pages. There are various ways to do this but in this article, I highlight just 2 that worked for me.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Hide the Navigation Bar in Rails
Leonard Kanyesigye HackerNoon profile picture

Recently I was working on a project in RoR and I realized I wanted to show the navigation bar and footer on some pages and nothing on others. For example, Imagine a signup page with a navbar !!! Yuck, not only does it not look pretty but also, I have never seen any design where the login/logout pages have a navigation bar. Very few designs like that do exist, and in my opinion, are not the best.

This article assumes you already have an application running, and already have a sign-up page designed.

I set up my application, designed the navbar and footer partials stored under the views/shared folder. I did not want to render the partials on every page that I created, so I placed the partials in the

application.html.erb 
file as shown in Figure 1.

Figure 1. Navbar and footer partial placed in the application.html.erb

The following piece of code shown in figure 1 produces something like this

Figure 2: Screenshot showing sign up page before the navigation bar was hidden

It doesn't look pretty, right?

The next step is to make sure we make the navbar disappear on the signup and signing pages, but show up on other pages.

There are various ways to do this but in this article, I highlight just 2 that worked for me.

1. Using action_name

Figure 3: Using action_name

By using action_name, we specify which methods we want to execute. We can specify as many as we want using the || operator. In this particular, we specify that for every action named “

new
” and “
edit
” in every controller, we should exclude showing the navbar.

This works fine, except that it covers the entire application. Meaning even if you create a contact us form, later on, it shall render without a navbar. This did not work for me as my application has quite a number of controllers and they all have new methods. Besides, I felt there was a better way to do this hence arriving at option 2.

2. Using the current_page?

Figure 4: Using current_page?

This takes the parameter of the path of the desired page. I found this the best solution for me as it gave me exactly what I wanted to achieve as shown in Figure 5

Figure 5: Screenshot showing navigation hidden

I do acknowledge there other ways of achieving this, in case you want other options, look into using

  • Using the content_for
  • Using the before_filter
  • Or creating different layouts and rendering them conditionally depending on what you want.

In case you know of better ways to achieve this, please let me know in the comments.

Previously published at https://medium.com/@leonard.kanyesigye/hide-the-navigation-bar-in-rails-590b77f66e71