PetalComponents.NavigationMenu (petal_components v4.5.0)

A horizontal navigation menu with flyout panels — the pattern marketing sites use for "Products / Solutions / Resources" menus that hold more than a simple dropdown can.

Follows the W3C disclosure navigation pattern (recommended for site navigation over ARIA menu roles): each trigger is a button with aria-expanded/aria-controls and panels contain plain links.

By default panels open on hover (the top-nav convention), driven by the PetalNavMenu JS hook: it holds the panel open across the trigger-to-panel gap with a close grace period, opens on keyboard focus too, and closes on Escape. Set trigger="click" for explicit tap-to-toggle (100% LiveView.JS, no hook) on touch-first apps, where Escape and clicking away close the panel.

Panels are free-form: compose them from navigation_menu_link/1 rows (icon + title + description), an optional navigation_menu_footer/1 CTA strip, or any markup you like.

Staying on screen

In hover mode the hook nudges an open panel horizontally to stay inside the viewport, so a wide panel near the right edge slides left to fit instead of spilling off screen. You can still set align="end" on an item to anchor its panel to the trigger's end edge (useful in click mode, which has no repositioning). Panel widths are clamped to the viewport so a wide panel shrinks to fit on a phone, and a panel taller than the screen scrolls rather than being cut off at the bottom.

Full-width (mega menu) panels

Set full_width on an item and the panel spans the nearest positioned ancestor — give your site header class="relative" and the panel becomes a full-width mega menu below it.

Summary

Functions

navigation_menu(assigns)

Renders the navigation menu.

navigation_menu_footer(assigns)

A full-bleed strip at the bottom of a flyout panel, usually holding one to three navigation_menu_footer_link/1 CTAs.

navigation_menu_footer_link(assigns)

A compact centered CTA for navigation_menu_footer/1.

navigation_menu_link(assigns)

A flyout panel row: icon in a tinted square, bold title, muted one-line description.

Functions

navigation_menu(assigns)

Renders the navigation menu.

<.navigation_menu id="main-nav">
  <:item label="Products" width="md">
    <.navigation_menu_link
      to="/analytics"
      icon="hero-chart-bar"
      title="Analytics"
      description="Understand your traffic"
    />
    <.navigation_menu_link
      to="/automations"
      icon="hero-arrow-path"
      title="Automations"
      description="Put repetitive work on autopilot"
    />
    <.navigation_menu_footer>
      <.navigation_menu_footer_link to="/demo" icon="hero-play-circle" label="Watch demo" />
      <.navigation_menu_footer_link to="/contact" icon="hero-phone" label="Contact sales" />
    </.navigation_menu_footer>
  </:item>
  <:item label="Pricing" to="/pricing" />
  <:item label="Docs" to="/docs" current />
</.navigation_menu>

For multi-column panels, wrap the links in a grid:

<:item label="Solutions" width="xl">
  <div class="grid grid-cols-2 gap-1">
    <.navigation_menu_link ... />
    <.navigation_menu_link ... />
  </div>
</:item>

Attributes

id (:string) (required)
class (:any) - extra classes for the nav element. Defaults to nil.
trigger (:string) - how flyout panels open. hover (default): the PetalNavMenu hook opens on pointer hover or keyboard focus, holds open across the trigger-to-panel gap with a close grace period, and nudges the panel to stay inside the viewport - the convention for a top nav. click: explicit toggle via JS (opens on click, closes on click-away/Escape) - use for touch-first apps that want a deliberate tap. Defaults to "hover". Must be one of "hover", or "click".
Global attributes are accepted.

Slots

item (required) - Accepts attributes:
- label (:string) (required)
- to (:string) - render a plain link instead of a flyout trigger.
- link_type (:string) - for plain links: "a" (default), "live_patch" or "live_redirect".
- width (:string) - flyout panel width: "sm", "md" (default), "lg" or "xl".
- align (:string) - which edge of the trigger the flyout panel anchors to: "start" (default, opens rightward) or "end" (opens leftward). Use "end" for triggers near the right edge so the panel stays on screen.
- full_width (:boolean) - span the panel across the nearest positioned ancestor (mega menu).
- current (:boolean) - marks the active item with aria-current.

navigation_menu_footer(assigns)

A full-bleed strip at the bottom of a flyout panel, usually holding one to three navigation_menu_footer_link/1 CTAs.

Attributes

class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

navigation_menu_footer_link(assigns)

A compact centered CTA for navigation_menu_footer/1.

Attributes

to (:string) (required) - link destination.
label (:string) (required)
icon (:string) - heroicon name, e.g. hero-play-circle. Defaults to nil.
link_type (:string) - Defaults to "a". Must be one of "a", "live_patch", or "live_redirect".
Global attributes are accepted. Supports all globals plus: ["method", "download", "hreflang", "ping", "referrerpolicy", "rel", "target", "type"].

navigation_menu_link(assigns)

A flyout panel row: icon in a tinted square, bold title, muted one-line description.

Attributes

to (:string) (required) - link destination.
title (:string) (required)
description (:string) - Defaults to nil.
icon (:string) - heroicon name, e.g. hero-chart-bar. Defaults to nil.
link_type (:string) - Defaults to "a". Must be one of "a", "live_patch", or "live_redirect".
class (:any) - Defaults to nil.
Global attributes are accepted. Supports all globals plus: ["method", "download", "hreflang", "ping", "referrerpolicy", "rel", "target", "type"].