Navbar

Horizontal navigation bar with customizable slots.

Basic Navbar

A navbar with start, center, and end slots.

RailsViewKit

<%= render Rvk::NavbarComponent.new do |navbar| %>
  <% navbar.with_start do %>
    <div class="flex items-center gap-2">
      <div class="w-8 h-8 bg-primary-600 rounded-lg"></div>
      <span class="font-semibold">Brand</span>
    </div>
  <% end %>

  <% navbar.with_center do %>
    <nav class="hidden md:flex items-center gap-6">
      <a href="#">Home</a>
      <a href="#">Products</a>
    </nav>
  <% end %>

  <% navbar.with_end_content do %>
    <%= render Rvk::ButtonComponent.new(size: :sm).with_content("Sign In") %>
  <% end %>
<% end %>

With Search

Add a search bar in the center slot.

App

<%= render Rvk::NavbarComponent.new do |navbar| %>
  <% navbar.with_start do %>
    <!-- Logo -->
  <% end %>

  <% navbar.with_center do %>
    <div class="relative max-w-md w-full">
      <input type="search" placeholder="Search..." class="w-full pl-10 pr-4 py-2" />
    </div>
  <% end %>

  <% navbar.with_end_content do %>
    <%= render Rvk::IconButtonComponent.new do %>
      <%= render Rvk::IconComponent.new(name: :bell) %>
    <% end %>
    <%= render Rvk::AvatarComponent.new(initials: "JD", size: :sm) %>
  <% end %>
<% end %>

Slots

Slot	Description
start	Left side content (logo, menu toggle)
center	Center content (navigation links, search)
end_content	Right side content (user menu, actions)

Usage Tips

Add sticky top-0 z-30 for fixed positioning
Use border-b border-surface-200 for a bottom border
Combine with Sidebar for app layouts
Hide center content on mobile with hidden md:flex