Renders the navigation menu root <nav> element.

Provides the aria-label="Main navigation" landmark. Place a navigation_menu_list/1 inside.

Example

<.navigation_menu>
  <.navigation_menu_list>
    ...
  </.navigation_menu_list>
</.navigation_menu>

Attributes

• class (:string) - Additional CSS classes applied to the root <nav> element. Defaults to nil.
• Global attributes are accepted. HTML attributes forwarded to the <nav> element.

Slots

• inner_block (required) - Should contain a single navigation_menu_list/1.

Renders the dropdown content panel for a trigger.

Positioned absolutely (top-full left-0 z-50) below its parent navigation_menu_item/1. Always place it immediately after a navigation_menu_trigger/1 inside the same navigation_menu_item/1.

The panel has a border, background, rounded corners, and box shadow. Use class="w-[400px]" or similar to control the panel width.

Example

<.navigation_menu_content class="w-[320px]">
  <ul class="grid gap-2 p-4">
    <li>
      <a href="/docs/getting-started" class="block rounded-md p-2 hover:bg-accent">
        Getting Started
      </a>
    </li>
  </ul>
</.navigation_menu_content>

Attributes

• class (:string) - Additional CSS classes applied to the content <div>. Use w-[N] to control panel width. Defaults to nil.
• Global attributes are accepted. HTML attributes forwarded to the content <div>.

Slots

• inner_block (required) - Dropdown content — typically a grid of links or descriptions.

Renders a single navigation menu item.

Each item is a <li> with position: relative so that dropdown content panels can be absolutely positioned relative to it.

Use case A — simple link:

<.navigation_menu_item>
  <.navigation_menu_link href="/about">About</.navigation_menu_link>
</.navigation_menu_item>

Use case B — dropdown:

<.navigation_menu_item>
  <.navigation_menu_trigger label="Resources" />
  <.navigation_menu_content>
    ...
  </.navigation_menu_content>
</.navigation_menu_item>

Attributes

• class (:string) - Additional CSS classes applied to the <li> element. Defaults to nil.
• Global attributes are accepted. HTML attributes forwarded to the <li> element.

Slots

• inner_block (required) - A navigation_menu_link/1 alone, or a navigation_menu_trigger/1 + navigation_menu_content/1 pair.

Renders a styled navigation link.

When active={true}, the link receives:

• aria-current="page" for screen readers.
• bg-accent text-accent-foreground background to visually indicate the current location.

On hover, all links display an accent background for clear affordance. Focus is indicated via a ring-2 ring-ring outline.

Example

<.navigation_menu_link href="/blog" active={String.starts_with?(@path, "/blog")}>
  Blog
</.navigation_menu_link>

Attributes

• href (:string) (required) - The link destination URL.
• active (:boolean) - Whether this link represents the current page. Sets aria-current="page" and applies an accent background. Defaults to false.
• class (:string) - Additional CSS classes applied to the <a> element. Defaults to nil.
• Global attributes are accepted. HTML attributes forwarded to the <a> element (e.g. target, rel).

Slots

• inner_block (required) - Link text or content.

Renders the horizontal menu list.

Uses flex flex-row items-center gap-1 for a compact horizontal layout. Place navigation_menu_item/1 children inside.

Attributes

• class (:string) - Additional CSS classes applied to the <ul> element. Defaults to nil.
• Global attributes are accepted. HTML attributes forwarded to the <ul> element.

Slots

• inner_block (required) - Should contain navigation_menu_item/1 children.

Renders a trigger button that opens a dropdown navigation panel.

Displays the label text and a small chevron-down icon. Carries aria-haspopup="true" and aria-expanded="false" to communicate dropdown availability to assistive technologies.

Always pair with navigation_menu_content/1 inside the same navigation_menu_item/1:

<.navigation_menu_item>
  <.navigation_menu_trigger label="Solutions" />
  <.navigation_menu_content>
    ...dropdown content...
  </.navigation_menu_content>
</.navigation_menu_item>

To control visibility server-side, wrap the content panel in a <div :if={@open}> or toggle a CSS class.

Attributes

• label (:string) (required) - The button label text shown in the navigation bar.
• class (:string) - Additional CSS classes applied to the <button> element. Defaults to nil.
• Global attributes are accepted. HTML attributes forwarded to the <button> element.