--- title: Navbar User Chip with Role & Sign-Out slug: navbar-user-chip-with-role category: Auth summary: Top-right user identity chip — avatar photo or initials, the user's name with their role beneath it, and a sign-out arrow — packaged as one shared partial. tags: [navbar, devise, identity, sign-out, tailwind, ux-default] status: stable visibility: public source_project: leo-nefe.leo.llamapress.ai layers: [view] --- # Navbar User Chip with Role & Sign-Out > ⚠️ **Cookbook example — not live code.** Every code block below is an **example > snippet**, **not part of the llamapress.ai codebase**, and **not running on this > server**. This is a reference recipe for a **Leo instance (an AI coding agent) to > implement in its own app** — read it to understand the pattern, then recreate it there. The standard "who am I" chip for the top-right corner of an app's navbar. It answers three questions at a glance: **who is signed in** (avatar photo, or initials in a filled circle when there's no photo), **what they are** (their role in the app, in small muted text under their name), and **how to leave** (a quiet sign-out arrow). It's one shared partial, so every layout in the app renders the identical chip.

Live demo — try it

Jordan Rivera

Administrator

JR
> **When to use:** any signed-in app layout — dashboards, admin areas, internal tools. > This should be the default top-right of every authenticated screen. > **When not to:** marketing/public pages (no session to show), or apps with a full > account dropdown menu — this chip is deliberately menu-free; sign-out is one click. --- ## The 80/20 in one breath 1. Add two helper methods — `user_initials` and `user_role_label` — to `app/helpers/application_helper.rb`. 2. Create the shared partial `app/views/shared/_user_chip.html.erb` (name + role stack, avatar-or-initials circle, sign-out arrow). 3. Render it in the navbar of your layout, inside `<% if user_signed_in? %>`, in a right-aligned flex container (`ml-auto flex items-center gap-3`). 4. Verify: sign in, check the chip shows the right initials and a human-readable role, click the arrow, land on the signed-out page. --- ## Layer 1 — The helpers Keep the initials and role logic out of the view so the partial stays dumb and both values are testable. ```ruby # app/helpers/application_helper.rb module ApplicationHelper # "Jordan Rivera" -> "JR"; falls back to the email for users with no name: # "jordan.rivera@acme.com" -> "JR". Always 1-2 characters, never blank. def user_initials(user) source = user.name.presence || user.email.to_s source.split(/[\s@.]/).reject(&:blank?).first(2).map { |w| w[0] }.join.upcase end # Human-readable role, never a raw enum value like "super_admin". # Adapt the first line to wherever YOUR app stores role (see "How to adapt"). def user_role_label(user) raw = user.try(:role) || user.try(:roles)&.first&.try(:name) raw.present? ? raw.to_s.humanize : "Member" end def user_display_name(user) user.name.presence || user.email.split("@").first.titleize end end ``` --- ## Layer 2 — The partial ```erb <%# app/views/shared/_user_chip.html.erb %> <%# Renders: [ name / role ] [ avatar or initials ] [ sign-out arrow ] %>
<%# Name with role beneath — hidden on phones so the chip collapses to the avatar %> <%# Avatar photo if one is attached, otherwise an initials circle %> <% if current_user.respond_to?(:avatar) && current_user.avatar.respond_to?(:attached?) && current_user.avatar.attached? %> <%= image_tag current_user.avatar, class: "h-9 w-9 rounded-full object-cover" %> <% else %>
<%= user_initials(current_user) %>
<% end %> <%# Sign-out arrow — button_to so it's a real DELETE form, no Turbo dependency %> <%= button_to destroy_user_session_path, method: :delete, class: "text-slate-300 transition hover:text-rose-500", form_class: "flex", "aria-label": "Sign out" do %> <% end %>
``` If Font Awesome is not loaded in your app, replace the `` with this inline SVG (same arrow-out-of-bracket icon, inherits the text color): ```erb <%# Inline-SVG fallback for the sign-out arrow (drop inside the button_to block) %> ``` --- ## Layer 3 — Rendering it in the layout ```erb <%# app/views/layouts/application.html.erb — inside the navbar/header %>
<%# ... logo + nav links ... %>
<% if user_signed_in? %> <%= render "shared/user_chip" %> <% end %>
``` --- ## Gotchas (the hard-won stuff) - **Use `button_to`, not `link_to` with `data: { turbo_method: :delete }`.** The link version silently degrades to a GET when Turbo fails to load (broken importmap, JS error earlier on the page), and Devise's sign-out route only accepts DELETE — so sign-out just 404s or no-ops. `button_to` renders a real `
` with a `_method=delete` field and works with zero JavaScript. - **`button_to` wraps the button in a `` — style the form too.** Without `form_class: "flex"` the form is a block element and the arrow icon drops out of vertical alignment with the avatar. This is the most common "why is my icon 3px too low" bug with this pattern. - **Never render the raw role value.** `current_user.role` is often an enum like `"super_admin"` or `"instance_operator"` — always pass it through `humanize` (the `user_role_label` helper does). If the app has no role concept at all, the helper's `"Member"` fallback keeps the chip from rendering an awkward blank line. - **Guard against name-less users.** Sign-up flows frequently collect only an email. Deriving both the display name and the initials from the email (`split(/[\s@.]/)`) means the chip never renders an empty circle. A user named `"j@x.co"` still gets `"J"`. - **Hide the text block on phones, keep the avatar.** `hidden sm:block` on the name/role stack is deliberate: on a 375px screen the navbar has no room for two lines of text, but the avatar + sign-out arrow still fit. Don't hide the whole chip. - **Font Awesome is NOT guaranteed on every app.** If `fa-arrow-right-from-bracket` renders as an empty square, the FA stylesheet isn't loaded — use the inline-SVG fallback above instead of adding a CDN `` just for one icon. - **Wrap the render in `user_signed_in?`, not a nil-check inside the partial.** The partial assumes `current_user` is present; keeping the guard at the call site means signed-out layouts (marketing pages, Devise screens) never pay for it. - **The avatar branch is optional and self-disabling.** The `respond_to?` chain means the same partial works whether or not the app has an Active Storage `avatar` attachment on `User` — no avatar setup, no crash, initials render. If you *do* have avatars and `image_processing` installed, prefer a variant (`current_user.avatar.variant(resize_to_fill: [72, 72])`) so you're not shipping a full-size upload into a 36px circle. - **Colors here are plain Tailwind slate — swap in your theme.** The proven source implementation used custom theme tokens; this recipe uses `slate-800` (filled circle), `slate-400` (role line), `slate-300 → rose-500` (sign-out idle → hover). Keep the *relationships* (avatar darkest, role muted, sign-out quietest until hovered) even if you change the hues — the sign-out arrow should be the least prominent element until the pointer is on it. --- ## Files this pattern touches ``` app/helpers/application_helper.rb # user_initials, user_role_label, user_display_name app/views/shared/_user_chip.html.erb # the chip partial (new file) app/views/layouts/application.html.erb # render call in the navbar ``` ## How to adapt to your schema 1. **Point `user_role_label` at your role storage.** Common variants: a string/enum column → `user.role.humanize`; a `rolify`-style association → `user.roles.first&.name&.humanize`; an org-membership join → `user.memberships.find_by(organization: current_organization)&.role&.humanize`. Change only the helper — the partial never knows where roles live. 2. **Not using Devise?** Replace `destroy_user_session_path` with your sign-out route and `user_signed_in?` / `current_user` with your session helpers. Keep the DELETE method and the `button_to` form. 3. **Multiple layouts?** Render the same `shared/user_chip` partial in each — that's the point of extracting it. Don't copy the markup per layout. 4. **Want a dropdown menu instead of a bare arrow?** This chip is the menu-free baseline. If you outgrow it (profile link, settings, org switcher), wrap the whole chip in a Stimulus dropdown and move sign-out into the menu — but keep the name/role/avatar anatomy.