Navigation menu

<div class="flex min-h-96 justify-center pt-8">
  <%= render(UI::NavigationMenu.new) do |nav| %>
    <% nav.with_item(label: "Getting started") do |item| %>
      <% item.with_link(title: "Introduction", href: "#introduction", description: "Re-usable components built with Tailwind CSS.") %>
      <% item.with_link(title: "Installation", href: "#installation", description: "How to install dependencies and structure your app.") %>
      <% item.with_link(title: "Typography", href: "#typography", description: "Styles for headings, paragraphs, lists…etc") %>
    <% end %>
    <% nav.with_item(label: "Components", columns: 2) do |item| %>
      <% item.with_link(title: "Alert", href: "#alert", description: "A callout for important information.") %>
      <% item.with_link(title: "Dialog", href: "#dialog", description: "A modal window on top of the page.") %>
      <% item.with_link(title: "Menu", href: "#menu", description: "A list of actions behind a button.") %>
      <% item.with_link(title: "Tabs", href: "#tabs", description: "Panels shown one at a time.") %>
      <% item.with_link(title: "Toast", href: "#toast", description: "A short message that disappears on its own.") %>
      <% item.with_link(title: "Tooltip", href: "#tooltip", description: "A label that appears on hover or focus.") %>
    <% end %>
    <% nav.with_item(label: "With Icon") do |item| %>
      <% item.with_link(title: "Backlog", href: "#backlog", icon: "circle-alert") %>
      <% item.with_link(title: "To do", href: "#todo", icon: "info") %>
      <% item.with_link(title: "Done", href: "#done", icon: "circle-check") %>
    <% end %>
    <% nav.with_item(label: "Docs", href: "#docs") %>
  <% end %>
</div>

<%# Any markup can go in a panel alongside, or instead of, its links. %>
<div class="flex min-h-[28rem] justify-center pt-8">
  <%= render(UI::NavigationMenu.new) do |nav| %>
    <% nav.with_item(label: "Company", panel_class: "w-[32rem]") do |item| %>
      <% item.with_link(title: "About", href: "#about", description: "Who we are and why we build this.") %>
      <% item.with_link(title: "Careers", href: "#careers", description: "Open roles, remote-first.") %>
      <% item.with_link(title: "Customers", href: "#customers", description: "Teams that run on Acme, in their words.") %>
      <% item.with_link(title: "Contact", href: "#contact", description: "Sales, support and partnerships.") %>
      <div class="mt-2 flex items-center justify-between gap-4 rounded-md bg-muted p-4">
        <div>
          <p class="text-sm font-medium">We're hiring</p>
          <p class="mt-1 text-sm text-muted-foreground">Three engineering roles are open this quarter.</p>
        </div>
        <%= render(UI::Button.new(size: :sm, variant: :outline)) { "See roles" } %>
      </div>
    <% end %>
    <% nav.with_item(label: "Blog", href: "#blog") %>
    <% nav.with_item(label: "Contact", href: "#contact") %>
  <% end %>
</div>