CODEWITHSUNDEEP
ruby-on-railsruby
Coding Kat
Coding Kat

Reputation: 135

How can I make my navbar appear on every page in my rails app?

I currently have my navbar in my index.htm.erb file. It is currently displaying only on the homepage. I wanted to know what are the necessary steps one must take in order to have the navbar appearing on each and very page of my app?

The code for my navbar looks like this:

<header class="navbar  navbar-inverse">
<div class="navbar-class">
<div class="container">


<!-- Collect the nav links, forms, and other content for toggling -->

  <ul class="nav navbar-nav">
  <li class="active"><a href="#">HOME</a></li>
  <li><%=link_to "ABOUT", about_us_path%></li>
  <li><%=link_to "OUR SERVICES", our_services_path %></li>
  <li><%=link_to "RATES", rates_path %></li>
  <li><%=link_to'CAREERS', careers_path%></li>
  <li><a href="#">TRAINING</a></li>
  <li><%= link_to"GALLERY", gallery_path %></li>
  <li><%=link_to"MEDIA", media_path%></li>
  <li><%=link_to"FAQS", faq_path %></li>
  <li><a href="#">CONTACT</a></li>
  </ul>


  </div>

 </div>
 </header>

Any input would be greatly appreciated.

Thanks

Upvotes: 4

Views: 17972

Answers (3)

ana
ana

Reputation: 11

In app/views create a shared folder. Inside the folder (app/views/shared) you create a partial called _navbar.html.erb. Inside the partial, copy the code for your navbar.

You then require the navbar in views/layouts/application.html.erb by writing just above <%=yield%>: <%= render "shared/navbar" %>

You can do this with the _footer.html.erb too (putting it below the <%= yield %>)

Upvotes: 1

tehfailsafe
tehfailsafe

Reputation: 3441

You'll want to remove it from index.html.erb and put it into layouts/application.html.erb

Every response will then use the application layout first, and yield the content from the specific show/index view as requested by the controller.

It should look something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>SspPrototype</title>
    <%= stylesheet_link_tag    'application' %>
    <%= javascript_include_tag 'application' %>
    <%= csrf_meta_tags %>
  </head>
<body>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>

  <header class="navbar  navbar-inverse">
    <div class="navbar-class">
      <div class="container">


      <!-- Collect the nav links, forms, and other content for toggling -->

        <ul class="nav navbar-nav">
          <li class="active"><a href="#">HOME</a></li>
          <li><%=link_to "ABOUT", about_us_path%></li>
          <li><%=link_to "OUR SERVICES", our_services_path %></li>
          <li><%=link_to "RATES", rates_path %></li>
          <li><%=link_to'CAREERS', careers_path%></li>
          <li><a href="#">TRAINING</a></li>
          <li><%= link_to"GALLERY", gallery_path %></li>
          <li><%=link_to"MEDIA", media_path%></li>
          <li><%=link_to"FAQS", faq_path %></li>
          <li><a href="#">CONTACT</a></li>
        </ul>


      </div>
    </div>
  </header>
<%= yield %>

</body>
</html>

Here's a couple overview guides:

http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts http://railsapps.github.io/rails-default-application-layout.html

Upvotes: 9

user3429381
user3429381

Reputation:

If you go to app/views/layouts/application.html.erb, you will see something like this:

<!DOCTYPE html>
<html>
<head>
  <title>SampleApp</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

This is the template in which every page of your app gets rendered. This is where you want to put your navbar. You can cut and paste directly to this file, or you can render it as a partial.

To render it as a partial, save your navbar code in that same directory and name it however you like, but make sure you save it as ".html.erb" and it starts with an underscore. For example: "_navbar.html.erb".

The underscore lets Rails know that it is a partial, and the ".html.erb" tells Rails what preprocessor to use.

After saving it as "app/views/layouts/_navbar.html.erb", render it within your "application.html.erb": 

...
<body>
<%= render "layouts/navbar" %>
<%= yield %>

</body>
...

It should then show up on every page.

Upvotes: 21

Related Questions