How can I make my navbar appear on every page in my rails app?
Question
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
3 answers
solution1
17
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.
solution2
9 ACCPTED 2014-08-27 22:31:25
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
solution3
0 2021-03-31 21:06:24
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 %> )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.