Shadix.Components.NavigationMenu (shadix v0.0.1)

A site navigation menu with dropdown panels, built on client-side JS commands, Floating UI, and a small LiveView hook.

Each navigation_menu_trigger/1 is a <button> whose phx-click toggles its paired navigation_menu_content/1 dropdown panel. The ShadixNavigationMenu hook (assets/ts/navigation_menu.ts) lives on each content panel: it watches the panel's visibility via a MutationObserver, positions it under the trigger with @floating-ui/dom (computePosition + autoUpdate, bottom-start/flip/ shift), syncs the trigger's aria-expanded and data-state (driving the chevron rotation), opens on trigger hover, and closes on outside pointerdown or Escape.

Trigger and content ids are derived from the required :id so aria-controls, data-trigger, and the JS targets line up stably.

NOTE: This is a focused v1. Compared to the shadcn/Radix original it omits the shared animated viewport, motion direction animations (data-motion), the active-link indicator, and pointer-grace hand-off between adjacent panels. Each trigger simply opens its own panel positioned below it; links navigate. Single open-at-a-time across siblings is also not enforced (panels toggle independently).

Summary

Functions

hide_content(id)

Returns the Phoenix.LiveView.JS command that closes the panel with id.

navigation_menu(assigns)

Renders the navigation menu root.

navigation_menu_content(assigns)

The dropdown panel for a trigger. :id is the item id.

navigation_menu_item(assigns)

A single navigation item; wraps a trigger + content, or a link.

navigation_menu_link(assigns)

A styled navigation link.

navigation_menu_list(assigns)

The horizontal list of navigation items.

navigation_menu_trigger(assigns)

The clickable trigger for a dropdown panel. :id is the item id.

show_content(id)

Returns the Phoenix.LiveView.JS command that shows the panel with id.

toggle_content(id)

Returns the Phoenix.LiveView.JS command that toggles the panel with id.

Functions

hide_content(id)

Returns the Phoenix.LiveView.JS command that closes the panel with id.

Used by the hook's data-on-close (Escape / outside click).

navigation_menu(assigns)

Renders the navigation menu root.

A <nav role="navigation"> wrapper carrying data-slot="navigation-menu". Contains a single navigation_menu_list/1 of items.

Attributes

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

Slots

inner_block (required)

navigation_menu_content(assigns)

The dropdown panel for a trigger. :id is the item id.

Renders <div id="#{id}-content">, hidden by default (the hidden class). The ShadixNavigationMenu hook here positions the panel under the "#{id}-trigger" button with Floating UI, syncs the trigger's aria-expanded/data-state, and closes the panel on outside pointerdown / Escape via the data-on-close JS.

Attributes

id (:string) (required)
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

navigation_menu_item(assigns)

A single navigation item; wraps a trigger + content, or a link.

Renders an <li> with data-slot="navigation-menu-item".

Attributes

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

Slots

inner_block (required)

navigation_menu_link(assigns)

A styled navigation link.

Renders an <a data-slot="navigation-menu-link">. Pass href (and any of target/rel/etc.) via the global attrs.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted. Supports all globals plus: ["href", "hreflang", "target", "rel", "download"].

Slots

inner_block (required)

navigation_menu_list(assigns)

The horizontal list of navigation items.

Renders a <ul> with data-slot="navigation-menu-list". Children are navigation_menu_item/1s.

Attributes

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

Slots

inner_block (required)

navigation_menu_trigger(assigns)

The clickable trigger for a dropdown panel. :id is the item id.

Renders <button id="#{id}-trigger"> with aria-controls="#{id}-content" and aria-expanded (kept in sync by the hook) — a disclosure button, matching base-ui/Radix (no aria-haspopup, since the panel holds links, not a role="menu"). A chevron SVG rotates when data-state="open". phx-click toggles the paired content panel; mouseenter opens it.

Attributes

id (:string) (required)
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

show_content(id)

Returns the Phoenix.LiveView.JS command that shows the panel with id.

Used by the trigger's mouseenter to open the panel on hover.

toggle_content(id)

Returns the Phoenix.LiveView.JS command that toggles the panel with id.

The ShadixNavigationMenu hook reacts to the resulting visibility change to position the panel and wire up outside-click / Escape handling.