Active Admin 3.2.0 — Navbar

How To Use Active Admin 3.2 — Part XII — Adding Navbar — RailsSeries#Episode 14

Published in

Jungletronics

3 min readApr 23, 2024

Hello! In this episode, our focus is on styling our page to achieve this particular look and feel:

We’ll incorporate a navbar and establish the foundational infrastructure for user functionality within the dropdown menu. Additionally, we’ll include an admin link positioned on the right for easy access.

0#step —Download the last version (v1) post here and prepare your vscode environment.

Let’s open a new Feature Branch: git checkout -b add_navbar.

1#step —Run:

rails g controller pages home about

2#step — Open:

config/routes.rb

  get 'home', to: 'pages#home'
  get 'about', to: 'pages#about'
  ...
  root 'pages#home'

3#step — Open:

app/views/pages/about.html.erb

<h1>Hi! I am Jaythree!</h1>
<p>That's right guys... o/ I am J3! I am just a hobby-dev, playing around with  </p>
<p> Python, Django, Ruby, Rails, Lego, Arduino, Raspy, PIC, AI… </p>
<p>Welcome! Join us!</p>
<hr>
<a href="https://medium.com/jungletronics">Visit Jungletronics</a><br>
<a href="https://medium.com/kidstronics">Visit Kidstronics</a><br>
<hr>

4#step — Open:

app/views/pages/home.html.erb

<h1>Welcome to My Personal Web Blog!</h1>
<h2>Here 👇️ this is all about Active Admin. Welcome! 👋️ </h2>
<br>

5#step — Go To Bootstrap 5 CDN, paste the links to:

app/views/layouts/application.html.erb

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

6#step — Nested body like this:

app/views/layouts/application.html.erb

  <body>
    <%= render 'layouts/navbar' %>
    <%= render 'layouts/messages'%>
    <main>
      <div class="container">
        <%= yield %>
      </div>
    </main>
  </body>

7#step — Create a file:

app/views/layouts/_navbar.html.erb

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/home">Rails Blog</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <%= link_to "Home", root_path, class: 'nav-link' %>
        </li>
        <li class="nav-item">
          <%= link_to "About", about_path, class: 'nav-link' %>
        </li>
        <li class="nav-item">
          <%= link_to "Blog", posts_path, class: 'nav-link' %>
        </li>
      </ul>
      <ul class="navbar-nav">
        <%= render 'layouts/session_manager' %>
      </ul>
    </div>
  </div>
</nav>

8#step — Create a file:

app/views/layouts/_session_manager.html.erb

<li class="nav-item dropdown">
  <li class="nav-item">
    <%= link_to "Admin", admin_root_path, class: 'nav-link' %>
  </li>
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    User Functionality
  </a>
  <ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="navbarDropdown">
    <li><%= link_to "New Post", new_post_path , class: "dropdown-item" %></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><%= link_to "Edit Account", '#', class:"dropdown-item" %></li>
    <li><hr class="dropdown-divider"></li>
    <li><%= link_to "Sign out", '#', method: :delete, class:"dropdown-item" %></li>
  </ul>
</li>

9#step — Create:

app/views/layouts/_messages.html.erb

<% if notice %>
  <div class="alert alert-success" >
    <button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="Close"></button>
    <%# <button type="button" class="close" data-dismiss="alert" aria-label="Close"> %>
    <span aria-hidden="true">&times;</span>
  </button>
  <%= notice %>
</div>
<% end %>
<% if alert %>
  <div class="alert alert-danger">
    <button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="Close"></button>
    <%# <button type="button" class="close" data-dismiss="alert" aria-label="Close"> %>
    <span aria-hidden="true">&times;</span>
  </button>
  <%= alert %>
</div>
<% end %>

Wrapping up for now!

In our upcoming episode, we’ll dive into some advanced features within Active Admin.

Catch you later!

GitHub

Credits & References

Rails Admin Interfaces with ActiveAdmin by Chris Oliver (GoRails)

git tag -a v2 -m "ActiveAdmin 3.2.0 :  Go to  https://medium.com/jungletronics/navbar-4-active-admin-3-2-0-d9a1d74cd1ab" -m "0- Set up page controller with home and about actions;" -m "1- Adjust routes.rb accordingly;" -m "2- Customize about and home pages;" -m "3- Integrate Bootstrap CDN links;" -m "4- Design a responsive navbar;" -m "5- Implement messaging functionality; You're all set!" -m "Thank you for downloading this project 😍️" 
git push origin v2


git add -A
git commit -m ":lipstick: Active Admin v2: Adding Navbar"
git push --set-upstream origin add_navbar

[GoTo your GIT REPO and Merge the Request]

[Returns to vscode]

git checkout master
git status
git fetch
git merge add_navbar
git pull

01# Quick Start — Part I — Get started with a very simple rails 7 frame;

02# Navbar Creation — Part II — Create a Navbar & User Functionalities in Dropdown;

03# Features — Part III — Implements some Cool advanced features.

Active Admin 3.2.0 — Navbar

How To Use Active Admin 3.2 — Part XII — Adding Navbar — RailsSeries#Episode 14

Credits & References

Related Posts:

Written by J3