# Top nav

A site navigation bar: brand mark, a products dropdown of rich title-and-description links, direct destinations, and the log-in / sign-up action pair.

Copy-in: `bin/rails g poetry:block top-nav` - the source below is exactly what the generator writes. Composes: button, icon, link, navigation_menu.

## Template

```erb
<header class="w-full border-b">
  <div class="mx-auto flex h-14 max-w-5xl items-center justify-between gap-6 px-6">
    <%= poetry_link(href: "/", underline: :none, class: "inline-flex items-center gap-2 text-sm font-semibold") do %>
      <%= poetry_icon(name: :"audio-waveform", class: "size-4") %> Meridian
    <% end %>
    <%= poetry_navigation_menu(label: "Main", viewport: true) do |nav| %>
      <% nav.with_item("Products", value: "products") do %>
        <div class="grid w-96 grid-cols-2 gap-1 p-2">
          <%= poetry_navigation_menu_link(href: "/products/orders") do %>
            <div class="space-y-0.5">
              <div class="text-sm font-medium">Orders</div>
              <p class="text-xs text-muted-foreground">Fulfillment from checkout to doorstep.</p>
            </div>
          <% end %>
          <%= poetry_navigation_menu_link(href: "/products/customers") do %>
            <div class="space-y-0.5">
              <div class="text-sm font-medium">Customers</div>
              <p class="text-xs text-muted-foreground">Profiles, segments, and lifetime history.</p>
            </div>
          <% end %>
          <%= poetry_navigation_menu_link(href: "/products/analytics") do %>
            <div class="space-y-0.5">
              <div class="text-sm font-medium">Analytics</div>
              <p class="text-xs text-muted-foreground">Live dashboards over every workspace event.</p>
            </div>
          <% end %>
          <%= poetry_navigation_menu_link(href: "/products/automations") do %>
            <div class="space-y-0.5">
              <div class="text-sm font-medium">Automations</div>
              <p class="text-xs text-muted-foreground">Workflows that run while the team sleeps.</p>
            </div>
          <% end %>
        </div>
      <% end %>
      <% nav.with_link("Pricing", href: "/pricing") %>
      <% nav.with_link("Docs", href: "/docs") %>
    <% end %>
    <div class="flex items-center gap-2">
      <%= poetry_button(variant: :ghost, size: :sm, tag: :a, href: "/login") { "Log in" } %>
      <%= poetry_button(size: :sm, tag: :a, href: "/signup") { "Sign up" } %>
    </div>
  </div>
</header>
```