Sidebar - Rails UI Components

Usage

<%= ui.sidebar do %>
  <%= ui.sidebar_section do %>
    <%= ui.sidebar_title "Section Title" %>
    <%= ui.sidebar_menu do %>
      <%= ui.sidebar_link "Link Text", url: path %>
    <% end %>
  <% end %>
<% end %>

Props

Prop	Type	Default	Description
`class`	`String`	`nil`	Additional CSS classes to add to the sidebar nav element.
`data`	`Hash`	`{ sidebar_target: 'menu' }`	Data attributes. Automatically includes sidebar_target for Stimulus controller integration.

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
`sidebar_section`	`ui.sidebar_section`	A section container for grouping related navigation items.
`sidebar_title`	`ui.sidebar_title`	Section title/heading for a navigation group.
`sidebar_menu`	`ui.sidebar_menu`	Container (ul) for sidebar links.
`sidebar_link`	`ui.sidebar_link`	Navigation link item. Automatically detects active state using current_page? helper.

Examples

Basic Sidebar

<%= ui.sidebar do %>
  <%= ui.sidebar_section do %>
    <%= ui.sidebar_title "Menu" %>
    <%= ui.sidebar_menu do %>
      <%= ui.sidebar_link "Home", url: "/" %>
      <%= ui.sidebar_link "About", url: "#" %>
      <%= ui.sidebar_link "Contact", url: "#" %>
    <% end %>
  <% end %>
<% end %>

Multiple Sections

<%= ui.sidebar do %>
  <%= ui.sidebar_section do %>
    <%= ui.sidebar_title "Basics" %>
    <%= ui.sidebar_menu do %>
      <%= ui.sidebar_link "Introduction", url: ui_path %>
      <%= ui.sidebar_link "Getting Started", url: ui_getting_started_path %>
    <% end %>
  <% end %>
  <%= ui.sidebar_section do %>
    <%= ui.sidebar_title "Components" %>
    <%= ui.sidebar_menu do %>
      <%= ui.sidebar_link "Button", url: ui_button_path %>
      <%= ui.sidebar_link "Card", url: ui_card_path %>
    <% end %>
  <% end %>
<% end %>

With Disabled Links

<%= ui.sidebar do %>
  <%= ui.sidebar_section do %>
    <%= ui.sidebar_title "Plugins" %>
    <%= ui.sidebar_menu do %>
      <%= ui.sidebar_link "Charts", disabled: true %>
      <%= ui.sidebar_link "File Uploader", disabled: true %>
    <% end %>
  <% end %>
<% end %>

Manual Active State

<%= ui.sidebar do %>
  <%= ui.sidebar_section do %>
    <%= ui.sidebar_title "Navigation" %>
    <%= ui.sidebar_menu do %>
      <%= ui.sidebar_link "Always Active", url: "#", active: true %>
      <%= ui.sidebar_link "Never Active", url: "#", active: false %>
    <% end %>
  <% end %>
<% end %>

Title with Badge

<%= ui.sidebar do %>
  <%= ui.sidebar_section do %>
    <%= ui.sidebar_title do %>
      Plugins
      <%= ui.badge "Coming Soon", size: :xs %>
    <% end %>
    <%= ui.sidebar_menu do %>
      <%= ui.sidebar_link "Charts", disabled: true %>
    <% end %>
  <% end %>
<% end %>