Sidebar

Vertical navigation sidebar with groups, menus, and collapsible mobile support.

Basic Sidebar

A sidebar with navigation groups and menu items.

Main content area

<%= render Rvk::SidebarComponent.new do |sidebar| %>
  <% sidebar.with_body do %>
    <%= render Rvk::Sidebar::GroupComponent.new do |group| %>
      <% group.with_label { "Main" } %>

      <%= render Rvk::Sidebar::MenuComponent.new do %>
        <%= render Rvk::Sidebar::MenuItemComponent.new do %>
          <%= render Rvk::Sidebar::MenuButtonComponent.new(href: "#", active: true) do %>
            <%= render Rvk::IconComponent.new(name: :home) %>
            <span>Dashboard</span>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

With Footer

Add a footer for user info or actions.

Main content

<%= render Rvk::SidebarComponent.new do |sidebar| %>
  <% sidebar.with_body do %>
    <!-- Menu items -->
  <% end %>

  <% sidebar.with_footer do %>
    <div class="flex items-center gap-3">
      <%= render Rvk::AvatarComponent.new(initials: "JD", size: :sm) %>
      <div>
        <p class="text-sm font-medium">John Doe</p>
        <p class="text-xs text-surface-500">john@example.com</p>
      </div>
    </div>
  <% end %>
<% end %>

Mobile Support

Use the rvk-sidebar Stimulus controller for mobile toggle functionality.

<div data-controller="rvk-sidebar">
  <button data-action="click->rvk-sidebar#toggle">Menu</button>
  <div data-rvk-sidebar-target="overlay"></div>
  <aside data-rvk-sidebar-target="sidebar">...</aside>
</div>

Sub-components

Component	Description
Rvk::Sidebar::GroupComponent	Container for a labeled group of menu items
Rvk::Sidebar::MenuComponent	Container for menu items (ul)
Rvk::Sidebar::MenuItemComponent	Individual menu item (li)
Rvk::Sidebar::MenuButtonComponent	Clickable button/link within a menu item