Basic Rails Website Header

The header is ultimately one of the most viewed elements of many websites. In most cases, it should be visually simple with a priority on convenient functionality in regard to the user experience.

I recently built a basic Ruby on Rails application called TreeLogger for keeping inventories of trees on any number of properties belonging to the user. One of the first things I set out to do was build a very basic but helpful header which would be present across the entire website.

What I came up with for this early version of my application was this:

• The logo, composed of a picture of the tree and the text "TreeLogger", acts as a link to the root path of the website.

To the right are three buttons, each with their own functions.

• The "Properties" button takes the user to the index page of all properties on their account.
• The "Home Page" button actually does the same thing as clicking on the logo, but I chose to build it into a button for those who don't think to click on the logo to go home.
• Finally, the "Log Out" button does what it says and logs a user out of their account.

The process for building this header is as follows:

In app/views/layouts/application.html.erb, start with an empty header tag. This is where the code for our website's header will live.

<header>
</header>

We'll need a link to our logo that directs to the root path of our website, for which we'll utilize an ERB expression.

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

<header>
  <a href=<%= root_path %>>
  </a>
</header>

The content displayed as the link will be the logo itself, which is going to be composed of the tree image and the name "TreeLogger" (don't forget to assign alternate text to the image for those using a screen reader for accessibility).

<header>
  <a href=<%= root_path %>>
    <img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
  </a>
</header>

Next, we'll build the three links to appear on the right side of the header using some helpful ERB expressions. These URI paths have been defined in config/routes.rb

<header>
  <a href=<%= root_path %>>
    <img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
  </a>

  <%= link_to "Properties", properties_path %>
  <%= link_to "Home Page", root_path %>
  <%= link_to "Log Out", logout_path %>
</header>

Here's what we have so far:

Not quite right... Let's keep going. First, we'll separate the logo from the other three links and send them to their respective sides of the header. We can accomplish this by placing each "group" of elements into a corresponding <span> and assigning a special style property to the span meant to live on the right

<header>
  <span>
    <a href=<%= root_path %>>
      <img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
    </a>
  </span>

  <span style="float:right;">
    <%= link_to "Properties", properties_path %>
    <%= link_to "Home Page", root_path %>
    <%= link_to "Log Out", logout_path %>
  </span>
</header>

Which gives us:

Getting closer, now to apply a bit more styling to make it presentable. We'll add a class to the logo link and a class to each navigation link, then define the styling for both in the application's CSS stylesheet

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

<header>
  <span>
    <a class="logoLink" href=<%= root_path %>>
      <img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
    </a>
  </span>

  <span style="float:right;">
    <%= link_to "Properties", properties_path, class: "navButton" %>
    <%= link_to "Home Page", root_path, class: "navButton" %>
    <%= link_to "Log Out", logout_path, class: "navButton" %>
  </span>
</header>

/app/assets/stylesheets/application.scss

a.logoLink {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    font-size: 300%;
  }

a.navButton {
    background-color: rgb(25, 78, 38);
    border: none;
    color: white;
    padding: 7px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border: 2px solid #4CAF50;
  }

a.navButton:hover {
    background-color: white;
    color: black
  }

Which will give us the final look of:

Lastly, let's have the appearance of the navigation buttons be conditional to whether the user is logged in or not, using a logged_in? method which is a commonly defined custom method used for authentication in many basic Rails applications. This leaves us with our final code:

<header>
  <span>
    <a class="logoLink" href=<%= root_path %>>
      <img src="/images/logo.png" alt="TreeLogger Logo" height="35", width="auto">TreeLogger
    </a>
  </span>

  <% if logged_in? %>
    <span style="float:right;">
      <%= link_to "Properties", properties_path, class: "navButton" %>
      <%= link_to "Home Page", user_path(current_user), class: "navButton" %>
      <%= link_to "Log Out", logout_path, class: "navButton" %>
    </span>
  <% end %>
</header>

Now, if there is no user logged in, the header appears only as: