Navbar - Rails UI Components

Usage

<%= ui.navbar do %>
  <%= ui.navbar_brand do %>
    <%= link_to "Logo", root_path %>
  <% end %>
  <%= ui.navbar_main do %>
    <%= ui.navbar_content do %>
      <%= ui.breadcrumbs %>
    <% end %>
    <%= ui.navbar_actions do %>
      <%= ui.btn "Action", url: "#" %>
    <% end %>
  <% end %>
<% end %>

Props

Prop	Type	Default	Description
`sticky`	`Boolean`	`true`	Whether the navbar sticks to the top of the viewport.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

SubcomponentsUse subcomponents below or any HTML.

Name	Helper	Description
`navbar_brand`	`ui.navbar_brand`	Brand/logo area on the left side.
`navbar_main`	`ui.navbar_main`	Main wrapper for content and actions. Required for proper grid alignment.
`navbar_content`	`ui.navbar_content`	Content area (breadcrumbs, search, etc.).
`navbar_actions`	`ui.navbar_actions`	Actions area on the right (buttons, user menu, etc.).

Examples

Basic

<%= ui.navbar do %>
  <%= ui.navbar_brand do %>
    <%= link_to ui.icon("cube", size: 6), "#" %>
    <span class="font-semibold">App Name</span>
  <% end %>
  <%= ui.navbar_main do %>
    <%= ui.navbar_actions do %>
      <%= ui.btn "Sign In", url: "#", size: :sm, variant: :outline %>
    <% end %>
  <% end %>
<% end %>

With breadcrumbs

<%= ui.navbar do %>
  <%= ui.navbar_brand do %>
    <%= link_to ui.icon("cube", size: 6), "#" %>
  <% end %>
  <%= ui.navbar_main do %>
    <%= ui.navbar_content class: "hidden md:flex" do %>
      <nav class="flex items-center gap-2 text-sm text-muted-foreground">
        <a href="#">Home</a>
        <span>/</span>
        <a href="#">Products</a>
        <span>/</span>
        <span class="text-gray-900">Details</span>
      </nav>
    <% end %>
    <%= ui.navbar_actions do %>
      <%= ui.btn "Settings", url: "#", size: :sm, variant: :ghost %>
    <% end %>
  <% end %>
<% end %>

With user menu

<%= ui.navbar do %>
  <%= ui.navbar_brand do %>
    <%= link_to "Brand", "#", class: "font-bold text-lg" %>
  <% end %>
  <%= ui.navbar_main do %>
    <%= ui.navbar_actions do %>
      <%= ui.dropdown do %>
        <%= ui.dropdown_trigger do %>
          <%= ui.avatar size: 8 %>
        <% end %>
        <%= ui.dropdown_menu do %>
          <%= ui.dropdown_link "Profile", url: "#" %>
          <%= ui.dropdown_link "Settings", url: "#" %>
          <%= ui.dropdown_divider %>
          <%= ui.dropdown_button "Sign Out", url: "#" %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Non-sticky

<%= ui.navbar sticky: false do %>
  <%= ui.navbar_brand do %>
    <%= link_to "Logo", "#", class: "font-bold" %>
  <% end %>
  <%= ui.navbar_main do %>
    <%= ui.navbar_actions do %>
      <%= ui.btn "Contact", url: "#", size: :sm %>
    <% end %>
  <% end %>
<% end %>

With mobile menu toggle

<%= ui.navbar do %>
  <%= ui.navbar_brand do %>
    <%= button_tag ui.icon("bars-2", size: 6), class: "md:hidden" %>
    <%= link_to "App", "#", class: "font-bold" %>
  <% end %>
  <%= ui.navbar_main do %>
    <%= ui.navbar_actions do %>
      <%= ui.btn "Menu", url: "#", size: :sm, class: "md:hidden" %>
      <div class="hidden md:flex gap-2">
        <%= ui.btn "Features", url: "#", size: :sm, variant: :ghost %>
        <%= ui.btn "Pricing", url: "#", size: :sm, variant: :ghost %>
        <%= ui.btn "Sign In", url: "#", size: :sm, variant: :outline %>
      </div>
    <% end %>
  <% end %>
<% end %>