Components
Nav list
Navigation that marks the current page: sidebars, page contents, tab rows and a phone dock.
Usage
After the one-time setup, call the helper directly from ERB. No component import is needed.
<%= lc_nav_list label: "Settings", class: "w-full max-w-60" do |nav| %>
<%= nav.group "Workspace" do %>
<%= nav.link "General", "#general", current: true %>
<%= nav.link "Members", "#members" %>
<%= nav.link "Billing", "#billing" %>
<% end %>
<%= nav.group "Account" do %>
<%= nav.link "Profile", "#profile" %>
<%= nav.link "Notifications", "#notifications" %>
<% end %>
<% end %>Examples
Sidebar
<%= lc_nav_list label: "Settings", class: "w-full max-w-60" do |nav| %>
<%= nav.group "Workspace" do %>
<%= nav.link "General", "#general", current: true %>
<%= nav.link "Members", "#members" %>
<%= nav.link "Billing", "#billing" %>
<% end %>
<%= nav.group "Account" do %>
<%= nav.link "Profile", "#profile" %>
<%= nav.link "Notifications", "#notifications" %>
<% end %>
<% end %>On this page
<%= lc_nav_list label: "On this page", compact: true, class: "w-full max-w-48" do |nav| %>
<%= nav.link "Overview", "#overview", current: true %>
<%= nav.link "Usage", "#usage" %>
<%= nav.link "Sizes", "#sizes", indent: true %>
<%= nav.link "API reference", "#api" %>
<% end %>Row with a sliding indicator
<%= lc_nav_list label: "Project", layout: :row, indicator: true, class: "w-full" do |nav| %>
<%= nav.link "Overview", "#overview", icon: "document-text", current: true %>
<%= nav.link "Activity", "#activity", icon: "clock" %>
<%= nav.link "Files", "#files", icon: "paper-clip" %>
<%= nav.link "Settings", "#settings", icon: "cog-6-tooth" %>
<% end %>Dock
<%# On phones, fix it to the bottom with your own classes. layout: :responsive is a dock below sm and a row from sm. %>
<%= lc_nav_list label: "Group", layout: :dock, indicator: true, class: lc_glass_class(thick: true, extra: "w-full max-w-sm") do |nav| %>
<%= nav.link "Overview", "#overview", icon: "document-text", current: true %>
<%= nav.link "Members", "#members", icon: "users" %>
<%= nav.link "Activity", "#activity", icon: "clock" %>
<%= nav.link "Stats", "#stats", icon: "chart-bar" %>
<% end %>API reference
Helpers render semantic HTML and include their interaction wiring. Pass native attributes through class:, data:, aria: and the usual Rails options. Blocks use captured ERB content.
lc_nav_list
| Input | Default | Values |
|---|---|---|
| label | Required | Accessible name, visible where applicable |
| compact | false | true · false |
| layout | :column | — |
| indicator | false | true · false |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_nav_list yields a builder, nav, with these parts. Each part carries data-slot and merges class: and native attributes.
nav.link
| Input | Default | Values |
|---|---|---|
| label | nil | Accessible name, visible where applicable |
| url | nil | — |
| icon | nil | Heroicon name; spacing is handled automatically |
| current | false | true · false |
| indent | false | true · false |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
nav.group
| Input | Default | Values |
|---|---|---|
| title | Required | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
Styling and extension
Use class: to merge utilities, native attributes for application behavior, and the theming guide for the shared palette. For custom markup, the advanced class helpers expose the same styles, including glass surfaces and class merging.