# `PhiaUi.Components.NavigationMenu`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/navigation_menu.ex#L1)

Horizontal navigation menu with optional dropdown panels.

A fully accessible horizontal navigation bar following the WAI-ARIA
navigation landmark pattern. Supports both simple link items and
trigger-plus-content dropdown panels. CSS-only layout — no JavaScript
hook is required for static dropdowns; use server-side `assigns` to
toggle panel visibility when needed.

## Sub-components

| Component                    | Element    | Purpose                                          |
|------------------------------|------------|--------------------------------------------------|
| `navigation_menu/1`          | `<nav>`    | Root landmark with `aria-label="Main navigation"`|
| `navigation_menu_list/1`     | `<ul>`     | Horizontal flex list of items                    |
| `navigation_menu_item/1`     | `<li>`     | Container for a link or trigger+content pair     |
| `navigation_menu_link/1`     | `<a>`      | Styled link with active-state highlight          |
| `navigation_menu_trigger/1`  | `<button>` | Dropdown toggle button with chevron icon         |
| `navigation_menu_content/1`  | `<div>`    | Absolutely-positioned dropdown panel             |

## Simple links only

    <.navigation_menu>
      <.navigation_menu_list>
        <.navigation_menu_item>
          <.navigation_menu_link href="/" active={@current_path == "/"}>
            Home
          </.navigation_menu_link>
        </.navigation_menu_item>
        <.navigation_menu_item>
          <.navigation_menu_link href="/pricing" active={@current_path == "/pricing"}>
            Pricing
          </.navigation_menu_link>
        </.navigation_menu_item>
        <.navigation_menu_item>
          <.navigation_menu_link href="/contact" active={@current_path == "/contact"}>
            Contact
          </.navigation_menu_link>
        </.navigation_menu_item>
      </.navigation_menu_list>
    </.navigation_menu>

## With a dropdown panel

Pair `navigation_menu_trigger/1` and `navigation_menu_content/1` inside
the same `navigation_menu_item/1`. The content panel is positioned
absolutely below the item:

    <.navigation_menu>
      <.navigation_menu_list>
        <.navigation_menu_item>
          <.navigation_menu_link href="/" active={@current_path == "/"}>Home</.navigation_menu_link>
        </.navigation_menu_item>

        <.navigation_menu_item>
          <.navigation_menu_trigger label="Products" />
          <.navigation_menu_content>
            <ul class="grid grid-cols-2 gap-3 p-4 w-[400px]">
              <li>
                <a href="/products/web" class="block rounded-md p-3 hover:bg-accent">
                  <p class="font-medium">Web Platform</p>
                  <p class="text-sm text-muted-foreground">Build scalable web apps</p>
                </a>
              </li>
              <li>
                <a href="/products/mobile" class="block rounded-md p-3 hover:bg-accent">
                  <p class="font-medium">Mobile SDK</p>
                  <p class="text-sm text-muted-foreground">Native iOS and Android</p>
                </a>
              </li>
            </ul>
          </.navigation_menu_content>
        </.navigation_menu_item>

        <.navigation_menu_item>
          <.navigation_menu_link href="/docs">Docs</.navigation_menu_link>
        </.navigation_menu_item>
      </.navigation_menu_list>
    </.navigation_menu>

## Marking the current page

Pass `active={true}` to `navigation_menu_link/1` for the item matching the
current route. In a LiveView, compare against `@current_path` or use the
route helpers:

    active={URI.parse(@current_url).path == "/pricing"}

## Accessibility

- The `<nav>` root has `aria-label="Main navigation"` to distinguish it
  from other navigation landmarks (e.g. breadcrumb, pagination).
- Active links carry `aria-current="page"` so screen readers announce the
  current location.
- Trigger buttons carry `aria-haspopup="true"` and `aria-expanded="false"`
  to communicate dropdown availability to assistive technologies.

# `navigation_menu`

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`.

# `navigation_menu_content`

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.

# `navigation_menu_item`

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.

# `navigation_menu_link`

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.

# `navigation_menu_list`

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.

# `navigation_menu_trigger`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*