Sidebar
The navigation down the side of an app: sections of links with icons and counts, a header and a footer. One <nav> for both widths: a sheet from the edge below the breakpoint, inline above.
Sections, icons and counts
Rendered here with collapse_below: :never so it is inline at every width; in a layout, the toggle opens it as a sheet on a phone.
<div class="max-w-xs rounded-xl border border-neutral-200 p-2 dark:border-neutral-800">
<%= sidebar id: "demo_nav", label: "Main", collapse_below: :never do |nav| %>
<% nav.header { tag.span "Kidbook", class: "font-semibold" } %>
<% nav.section do |s| %>
<% s.link "Inbox", "#inbox", icon: :messages_square, badge: 3, active: true %>
<% s.link "Files", "#files", icon: :folder %>
<% s.link "Renders", "#renders", icon: :clock, badge: 12 %>
<% end %>
<% nav.section "Settings", collapsible: true, open: true do |s| %>
<% s.link "Members", "#members", active: false %>
<% s.link "Billing", "#billing", active: false %>
<% end %>
<% nav.footer { item(title: "Ada Lovelace", description: "ada@example.com", class: "p-1") { |i| i.media { avatar "Ada Lovelace" } } } %>
<% end %>
</div>As a sheet
collapse_below: :lg (the default) with a sidebar_toggle. Below 64rem the toggle opens the sheet; on this page it is always a sheet, so the toggle shows.
<%= sidebar id: "sheet_nav", label: "Main", collapse_below: :lg, class: "[&_.UnmagicSidebar__panel]:static! [&_.UnmagicSidebar__panel:not(:popover-open)]:hidden!" do |nav| %>
<% nav.section do |s| %>
<% s.link "Inbox", "#inbox", icon: :messages_square, active: true %>
<% s.link "Files", "#files", icon: :folder %>
<% end %>
<% end %>
<%= sidebar_toggle "sheet_nav", class: "!inline-flex" %>
<span class="ml-2 text-sm text-neutral-500">Open the sheet</span>