PetalComponents.NavigationMenu (petal_components v4.1.2)

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, panels contain plain links, Escape and clicking away close any open panel. Interaction is click-to-toggle (touch friendly) and 100% LiveView.JS — no Alpine, no hooks.

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

Flyout panels anchor to their trigger's start edge and open rightward into the page (so a left-most trigger never opens back under a sidebar). For a trigger near the right edge, set align="end" on the item so its panel opens leftward instead and stays on screen. Panel widths are clamped to the viewport so a wide panel shrinks to fit instead of overflowing 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.
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"].