Navigation

Class name	Type	Description
`navigation-menuplf:navigation-menu`	Component	The navigation landmark
`navigation-menu-listplf:navigation-menu-list`	Part	The top-level list
`navigation-menu-itemplf:navigation-menu-item`	Part	A top-level item
`navigation-menu-linkplf:navigation-menu-link`	Part	A top-level link
`navigation-menu-triggerplf:navigation-menu-trigger`	Part	A button that opens a panel
`navigation-menu-iconplf:navigation-menu-icon`	Part	An SVG icon; an icon class there doesn't need it
`navigation-menu-chevronplf:navigation-menu-chevron`	Part	Your own icon, in place of the drawn chevron; turns over while open
`navigation-menu-contentplf:navigation-menu-content`	Part	A panel
`navigation-menu-groupsplf:navigation-menu-groups`	Part	Columns of link groups
`navigation-menu-headingplf:navigation-menu-heading`	Part	A group's heading
`navigation-menu-linksplf:navigation-menu-links`	Part	A panel's list of links
`navigation-menu-entryplf:navigation-menu-entry`	Part	A link in a panel
`navigation-menu-textplf:navigation-menu-text`	Part	An entry's title and description
`navigation-menu-titleplf:navigation-menu-title`	Part	An entry's title
`navigation-menu-descriptionplf:navigation-menu-description`	Part	An entry's description
`navigation-menu-content-megaplf:navigation-menu-content-mega`	Modifier	A wide panel

Default

<nav class="navigation-menu" data-plf-navigation-menu aria-label="Main">
  <ul class="navigation-menu-list">
    <li class="navigation-menu-item"><a class="navigation-menu-link" href="#" aria-current="page">Home</a></li>
    <li class="navigation-menu-item">
      <button class="navigation-menu-trigger" data-plf-navigation-menu-trigger hidden>Products</button>
      <div class="navigation-menu-content">
        <ul class="navigation-menu-links">
          <li><a class="navigation-menu-entry" href="#">Dashboard</a></li>
          <li><a class="navigation-menu-entry" href="#">Reports</a></li>
          <li><a class="navigation-menu-entry" href="#">Integrations</a></li>
        </ul>
      </div>
    </li>
    <li class="navigation-menu-item">
      <button class="navigation-menu-trigger" data-plf-navigation-menu-trigger hidden>Resources</button>
      <div class="navigation-menu-content">
        <ul class="navigation-menu-links">
          <li><a class="navigation-menu-entry" href="#">Documentation</a></li>
          <li><a class="navigation-menu-entry" href="#">Blog</a></li>
        </ul>
      </div>
    </li>
    <li class="navigation-menu-item"><a class="navigation-menu-link" href="#">Pricing</a></li>
  </ul>
</nav>

<nav class="plf:navigation-menu" data-plf-navigation-menu aria-label="Main">
  <ul class="plf:navigation-menu-list">
    <li class="plf:navigation-menu-item"><a class="plf:navigation-menu-link" href="#" aria-current="page">Home</a></li>
    <li class="plf:navigation-menu-item">
      <button class="plf:navigation-menu-trigger" data-plf-navigation-menu-trigger hidden>Products</button>
      <div class="plf:navigation-menu-content">
        <ul class="plf:navigation-menu-links">
          <li><a class="plf:navigation-menu-entry" href="#">Dashboard</a></li>
          <li><a class="plf:navigation-menu-entry" href="#">Reports</a></li>
          <li><a class="plf:navigation-menu-entry" href="#">Integrations</a></li>
        </ul>
      </div>
    </li>
    <li class="plf:navigation-menu-item">
      <button class="plf:navigation-menu-trigger" data-plf-navigation-menu-trigger hidden>Resources</button>
      <div class="plf:navigation-menu-content">
        <ul class="plf:navigation-menu-links">
          <li><a class="plf:navigation-menu-entry" href="#">Documentation</a></li>
          <li><a class="plf:navigation-menu-entry" href="#">Blog</a></li>
        </ul>
      </div>
    </li>
    <li class="plf:navigation-menu-item"><a class="plf:navigation-menu-link" href="#">Pricing</a></li>
  </ul>
</nav>

import {
  NavigationMenu, NavigationMenuContent, NavigationMenuEntry, NavigationMenuItem, NavigationMenuLink, NavigationMenuLinks, NavigationMenuList,
  NavigationMenuTrigger,
} from '@pelatform/react';

export function Example() {
  return (
    <NavigationMenu aria-label="Main">
      <NavigationMenuList>
        <NavigationMenuItem><NavigationMenuLink href="#" aria-current="page">Home</NavigationMenuLink></NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLinks>
              <li><NavigationMenuEntry href="#">Dashboard</NavigationMenuEntry></li>
              <li><NavigationMenuEntry href="#">Reports</NavigationMenuEntry></li>
              <li><NavigationMenuEntry href="#">Integrations</NavigationMenuEntry></li>
            </NavigationMenuLinks>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLinks>
              <li><NavigationMenuEntry href="#">Documentation</NavigationMenuEntry></li>
              <li><NavigationMenuEntry href="#">Blog</NavigationMenuEntry></li>
            </NavigationMenuLinks>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem><NavigationMenuLink href="#">Pricing</NavigationMenuLink></NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

import {
  NavigationMenu, NavigationMenuContent, NavigationMenuEntry, NavigationMenuItem, NavigationMenuLink, NavigationMenuLinks, NavigationMenuList,
  NavigationMenuTrigger,
} from '@pelatform/react/prefixed';

export function Example() {
  return (
    <NavigationMenu aria-label="Main">
      <NavigationMenuList>
        <NavigationMenuItem><NavigationMenuLink href="#" aria-current="page">Home</NavigationMenuLink></NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLinks>
              <li><NavigationMenuEntry href="#">Dashboard</NavigationMenuEntry></li>
              <li><NavigationMenuEntry href="#">Reports</NavigationMenuEntry></li>
              <li><NavigationMenuEntry href="#">Integrations</NavigationMenuEntry></li>
            </NavigationMenuLinks>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLinks>
              <li><NavigationMenuEntry href="#">Documentation</NavigationMenuEntry></li>
              <li><NavigationMenuEntry href="#">Blog</NavigationMenuEntry></li>
            </NavigationMenuLinks>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem><NavigationMenuLink href="#">Pricing</NavigationMenuLink></NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Author the buttons hidden and the panels visible: without JavaScript every panel shows as a nested list of links.

<nav class="navigation-menu" data-plf-navigation-menu aria-label="Product">
  <ul class="navigation-menu-list">
    <li class="navigation-menu-item">
      <button class="navigation-menu-trigger" data-plf-navigation-menu-trigger hidden>Explore</button>
      <div class="navigation-menu-content navigation-menu-content-mega">
        <div class="navigation-menu-groups">
          <div>
            <p class="navigation-menu-heading">Build</p>
            <ul class="navigation-menu-links">
              <li>
                <a class="navigation-menu-entry" href="#">
                  <span class="icon icon-layout-dashboard"></span>
                  <span class="navigation-menu-text">
                    <span class="navigation-menu-title">Dashboard</span>
                    <span class="navigation-menu-description">Trends at a glance.</span>
                  </span>
                </a>
              </li>
              <li>
                <a class="navigation-menu-entry" href="#">
                  <span class="icon icon-table"></span>
                  <span class="navigation-menu-text">
                    <span class="navigation-menu-title">Tables</span>
                    <span class="navigation-menu-description">Sort and filter rows.</span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
          <div>
            <p class="navigation-menu-heading">Learn</p>
            <ul class="navigation-menu-links">
              <li>
                <a class="navigation-menu-entry" href="#">
                  <span class="icon icon-book"></span>
                  <span class="navigation-menu-text">
                    <span class="navigation-menu-title">Documentation</span>
                    <span class="navigation-menu-description">Guides and references.</span>
                  </span>
                </a>
              </li>
              <li>
                <a class="navigation-menu-entry" href="#">
                  <span class="icon icon-sparkles"></span>
                  <span class="navigation-menu-text">
                    <span class="navigation-menu-title">What's new</span>
                    <span class="navigation-menu-description">Recent releases.</span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="navigation-menu-item"><a class="navigation-menu-link" href="#">Pricing</a></li>
  </ul>
</nav>

<nav class="plf:navigation-menu" data-plf-navigation-menu aria-label="Product">
  <ul class="plf:navigation-menu-list">
    <li class="plf:navigation-menu-item">
      <button class="plf:navigation-menu-trigger" data-plf-navigation-menu-trigger hidden>Explore</button>
      <div class="plf:navigation-menu-content plf:navigation-menu-content-mega">
        <div class="plf:navigation-menu-groups">
          <div>
            <p class="plf:navigation-menu-heading">Build</p>
            <ul class="plf:navigation-menu-links">
              <li>
                <a class="plf:navigation-menu-entry" href="#">
                  <span class="plf:icon plf:icon-layout-dashboard"></span>
                  <span class="plf:navigation-menu-text">
                    <span class="plf:navigation-menu-title">Dashboard</span>
                    <span class="plf:navigation-menu-description">Trends at a glance.</span>
                  </span>
                </a>
              </li>
              <li>
                <a class="plf:navigation-menu-entry" href="#">
                  <span class="plf:icon plf:icon-table"></span>
                  <span class="plf:navigation-menu-text">
                    <span class="plf:navigation-menu-title">Tables</span>
                    <span class="plf:navigation-menu-description">Sort and filter rows.</span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
          <div>
            <p class="plf:navigation-menu-heading">Learn</p>
            <ul class="plf:navigation-menu-links">
              <li>
                <a class="plf:navigation-menu-entry" href="#">
                  <span class="plf:icon plf:icon-book"></span>
                  <span class="plf:navigation-menu-text">
                    <span class="plf:navigation-menu-title">Documentation</span>
                    <span class="plf:navigation-menu-description">Guides and references.</span>
                  </span>
                </a>
              </li>
              <li>
                <a class="plf:navigation-menu-entry" href="#">
                  <span class="plf:icon plf:icon-sparkles"></span>
                  <span class="plf:navigation-menu-text">
                    <span class="plf:navigation-menu-title">What's new</span>
                    <span class="plf:navigation-menu-description">Recent releases.</span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li class="plf:navigation-menu-item"><a class="plf:navigation-menu-link" href="#">Pricing</a></li>
  </ul>
</nav>

import {
  Icon, NavigationMenu, NavigationMenuContent, NavigationMenuDescription, NavigationMenuEntry, NavigationMenuGroups, NavigationMenuHeading,
  NavigationMenuItem, NavigationMenuLink, NavigationMenuLinks, NavigationMenuList, NavigationMenuText, NavigationMenuTitle, NavigationMenuTrigger,
} from '@pelatform/react';

export function Example() {
  return (
    <NavigationMenu aria-label="Product">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Explore</NavigationMenuTrigger>
          <NavigationMenuContent mega>
            <NavigationMenuGroups>
              <div>
                <NavigationMenuHeading>Build</NavigationMenuHeading>
                <NavigationMenuLinks>
                  <li>
                    <NavigationMenuEntry href="#">
                      <Icon name="layout-dashboard" />
                      <NavigationMenuText>
                        <NavigationMenuTitle>Dashboard</NavigationMenuTitle>
                        <NavigationMenuDescription>Trends at a glance.</NavigationMenuDescription>
                      </NavigationMenuText>
                    </NavigationMenuEntry>
                  </li>
                  <li>
                    <NavigationMenuEntry href="#">
                      <Icon name="table" />
                      <NavigationMenuText>
                        <NavigationMenuTitle>Tables</NavigationMenuTitle>
                        <NavigationMenuDescription>Sort and filter rows.</NavigationMenuDescription>
                      </NavigationMenuText>
                    </NavigationMenuEntry>
                  </li>
                </NavigationMenuLinks>
              </div>
              <div>
                <NavigationMenuHeading>Learn</NavigationMenuHeading>
                <NavigationMenuLinks>
                  <li>
                    <NavigationMenuEntry href="#">
                      <Icon name="book" />
                      <NavigationMenuText>
                        <NavigationMenuTitle>Documentation</NavigationMenuTitle>
                        <NavigationMenuDescription>Guides and references.</NavigationMenuDescription>
                      </NavigationMenuText>
                    </NavigationMenuEntry>
                  </li>
                  <li>
                    <NavigationMenuEntry href="#">
                      <Icon name="sparkles" />
                      <NavigationMenuText>
                        <NavigationMenuTitle>What's new</NavigationMenuTitle>
                        <NavigationMenuDescription>Recent releases.</NavigationMenuDescription>
                      </NavigationMenuText>
                    </NavigationMenuEntry>
                  </li>
                </NavigationMenuLinks>
              </div>
            </NavigationMenuGroups>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem><NavigationMenuLink href="#">Pricing</NavigationMenuLink></NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

import {
  Icon, NavigationMenu, NavigationMenuContent, NavigationMenuDescription, NavigationMenuEntry, NavigationMenuGroups, NavigationMenuHeading,
  NavigationMenuItem, NavigationMenuLink, NavigationMenuLinks, NavigationMenuList, NavigationMenuText, NavigationMenuTitle, NavigationMenuTrigger,
} from '@pelatform/react/prefixed';

export function Example() {
  return (
    <NavigationMenu aria-label="Product">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Explore</NavigationMenuTrigger>
          <NavigationMenuContent mega>
            <NavigationMenuGroups>
              <div>
                <NavigationMenuHeading>Build</NavigationMenuHeading>
                <NavigationMenuLinks>
                  <li>
                    <NavigationMenuEntry href="#">
                      <Icon name="layout-dashboard" />
                      <NavigationMenuText>
                        <NavigationMenuTitle>Dashboard</NavigationMenuTitle>
                        <NavigationMenuDescription>Trends at a glance.</NavigationMenuDescription>
                      </NavigationMenuText>
                    </NavigationMenuEntry>
                  </li>
                  <li>
                    <NavigationMenuEntry href="#">
                      <Icon name="table" />
                      <NavigationMenuText>
                        <NavigationMenuTitle>Tables</NavigationMenuTitle>
                        <NavigationMenuDescription>Sort and filter rows.</NavigationMenuDescription>
                      </NavigationMenuText>
                    </NavigationMenuEntry>
                  </li>
                </NavigationMenuLinks>
              </div>
              <div>
                <NavigationMenuHeading>Learn</NavigationMenuHeading>
                <NavigationMenuLinks>
                  <li>
                    <NavigationMenuEntry href="#">
                      <Icon name="book" />
                      <NavigationMenuText>
                        <NavigationMenuTitle>Documentation</NavigationMenuTitle>
                        <NavigationMenuDescription>Guides and references.</NavigationMenuDescription>
                      </NavigationMenuText>
                    </NavigationMenuEntry>
                  </li>
                  <li>
                    <NavigationMenuEntry href="#">
                      <Icon name="sparkles" />
                      <NavigationMenuText>
                        <NavigationMenuTitle>What's new</NavigationMenuTitle>
                        <NavigationMenuDescription>Recent releases.</NavigationMenuDescription>
                      </NavigationMenuText>
                    </NavigationMenuEntry>
                  </li>
                </NavigationMenuLinks>
              </div>
            </NavigationMenuGroups>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem><NavigationMenuLink href="#">Pricing</NavigationMenuLink></NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Disabled

A button with disabled or aria-disabled="true" does not open its panel.

<nav class="navigation-menu" data-plf-navigation-menu aria-label="Account">
  <ul class="navigation-menu-list">
    <li class="navigation-menu-item">
      <button class="navigation-menu-trigger" data-plf-navigation-menu-trigger hidden>Settings</button>
      <div class="navigation-menu-content">
        <ul class="navigation-menu-links">
          <li><a class="navigation-menu-entry" href="#">Profile</a></li>
          <li><a class="navigation-menu-entry" href="#">Notifications</a></li>
        </ul>
      </div>
    </li>
    <li class="navigation-menu-item">
      <button class="navigation-menu-trigger" data-plf-navigation-menu-trigger hidden disabled>Billing</button>
      <div class="navigation-menu-content">
        <ul class="navigation-menu-links">
          <li><a class="navigation-menu-entry" href="#">Invoices</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

<nav class="plf:navigation-menu" data-plf-navigation-menu aria-label="Account">
  <ul class="plf:navigation-menu-list">
    <li class="plf:navigation-menu-item">
      <button class="plf:navigation-menu-trigger" data-plf-navigation-menu-trigger hidden>Settings</button>
      <div class="plf:navigation-menu-content">
        <ul class="plf:navigation-menu-links">
          <li><a class="plf:navigation-menu-entry" href="#">Profile</a></li>
          <li><a class="plf:navigation-menu-entry" href="#">Notifications</a></li>
        </ul>
      </div>
    </li>
    <li class="plf:navigation-menu-item">
      <button class="plf:navigation-menu-trigger" data-plf-navigation-menu-trigger hidden disabled>Billing</button>
      <div class="plf:navigation-menu-content">
        <ul class="plf:navigation-menu-links">
          <li><a class="plf:navigation-menu-entry" href="#">Invoices</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

import {
  NavigationMenu, NavigationMenuContent, NavigationMenuEntry, NavigationMenuItem, NavigationMenuLinks, NavigationMenuList, NavigationMenuTrigger,
} from '@pelatform/react';

export function Example() {
  return (
    <NavigationMenu aria-label="Account">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Settings</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLinks>
              <li><NavigationMenuEntry href="#">Profile</NavigationMenuEntry></li>
              <li><NavigationMenuEntry href="#">Notifications</NavigationMenuEntry></li>
            </NavigationMenuLinks>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger disabled>Billing</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLinks>
              <li><NavigationMenuEntry href="#">Invoices</NavigationMenuEntry></li>
            </NavigationMenuLinks>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

import {
  NavigationMenu, NavigationMenuContent, NavigationMenuEntry, NavigationMenuItem, NavigationMenuLinks, NavigationMenuList, NavigationMenuTrigger,
} from '@pelatform/react/prefixed';

export function Example() {
  return (
    <NavigationMenu aria-label="Account">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Settings</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLinks>
              <li><NavigationMenuEntry href="#">Profile</NavigationMenuEntry></li>
              <li><NavigationMenuEntry href="#">Notifications</NavigationMenuEntry></li>
            </NavigationMenuLinks>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger disabled>Billing</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLinks>
              <li><NavigationMenuEntry href="#">Invoices</NavigationMenuEntry></li>
            </NavigationMenuLinks>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Navigation Menu needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/navigation-menu.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/navigation-menu.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/navigation-menu.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/navigation-menu.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`data-plf-navigation-menu`	Marks the `<nav>`, named with `aria-label` or `aria-labelledby`
`data-plf-navigation-menu-trigger`	Each disclosure `<button>`, authored `hidden`
`aria-controls`	Optional, on a button: its panel’s id; by default the panel is the element right after the button
`data-plf-open-delay`	Milliseconds of hover before opening, from `0` to `60000`; `200` by default
`data-plf-close-delay`	Milliseconds before closing once the pointer leaves, from `0` to `60000`; `150` by default
`data-plf-placement`	On the `<nav>`: `top`, `bottom` (default), `left` or `right`
`data-plf-align`	On the `<nav>`: `start` (default), `center` or `end`
`aria-current="page"`	The current link; set it yourself

Methods

Method	Behavior
`PLF.NavigationMenu.getOrCreateInstance(element, options)`	Returns the instance, creating it for valid markup. `options` can set `openDelay` and `closeDelay`
`PLF.NavigationMenu.getInstance(element)`	Returns the instance or `null`
`instance.open(panelId)`	Opens the panel with this id, closing another. Returns `false` when already open, unknown, unavailable or canceled
`instance.close(reason)`	Closes the open panel; `reason` is `api` (the default), `trigger`, `keyboard` or `pointer`. Returns `false` when none is open or canceled
`instance.getState()`	Returns `{openPanel, openDelay, closeDelay}`; `openPanel` is an id or `null`
`instance.destroy()`	Closes without events, removes listeners and shows every panel again

Events

Event	When
`plf:navigation-menu:before-open`	Before a panel opens; cancelable
`plf:navigation-menu:open`	After a panel opens
`plf:navigation-menu:before-close`	Before a panel closes; cancelable
`plf:navigation-menu:close`	After a panel closes

Each event’s detail:

Property	Value
`instance`	The Navigation Menu instance
`reason`	`api`, `trigger`, `keyboard` or `pointer`
`trigger`	The button or the followed link, or `null` from a method, Escape or leaving the menu
`panel`	The panel that opens or closes
`previousPanel`	The replaced panel, or `null` when `panel` replaces none

Keyboard

Key	Action
Enter, Space	On a button, toggles its panel
Down Arrow, Up Arrow	On a button, open its panel at the first or last link; in a panel, move to the next or previous link
Left Arrow, Right Arrow	Move between top-level links and buttons, or between the links in a panel
Home, End	Move to the first or last top-level item, or link in a panel
Escape	Closes the panel and returns focus to its button
Tab, Shift+Tab	Follow the page order; leaving a panel closes it

React

NavigationMenu from @pelatform/react renders this navigation with the script’s click, hover and keyboard behavior, and each NavigationMenuItem with a trigger keeps its panel’s state, or the application sets it with open.

Prop	Values	Default
`placement`	`top`, `right`, `bottom`, `left`	`bottom`
`align`	`start`, `center`, `end`	`start`
`openDelay`	Milliseconds of hover before opening	`200`
`closeDelay`	Milliseconds before closing once the pointer leaves	`150`
`open` on `NavigationMenuItem`	`true` while its panel is open, which the application changes in `onOpenChange`	Its own state
`defaultOpen` on `NavigationMenuItem`	`true` starts open when the application does not set `open`	`false`
`onOpenChange` on `NavigationMenuItem`	`(open, reason)`, called when its panel opens or closes: `trigger` (its button or a followed link), `keyboard` (a key or the focus leaving) or `pointer` (a hover, the pointer leaving or a press outside)	None
`mega` on `NavigationMenuContent`	`true` for a wide panel	`false`

The parts:

Part	Element
`NavigationMenuList`	A `ul` with `navigation-menu-list`
`NavigationMenuItem`	An `li` with `navigation-menu-item`, which holds a link, or a trigger and its panel
`NavigationMenuLink`	An `a` with `navigation-menu-link`
`NavigationMenuTrigger`	A `button` with `navigation-menu-trigger`, which opens its panel
`NavigationMenuContent`	A `div` with `navigation-menu-content`: the panel
`NavigationMenuGroups`	A `div` with `navigation-menu-groups`
`NavigationMenuHeading`	A `p` with `navigation-menu-heading`
`NavigationMenuLinks`	A `ul` with `navigation-menu-links`
`NavigationMenuEntry`	An `a` with `navigation-menu-entry`, in which an `Icon` needs no class
`NavigationMenuText`	A `span` with `navigation-menu-text`
`NavigationMenuTitle`	A `span` with `navigation-menu-title`
`NavigationMenuDescription`	A `span` with `navigation-menu-description`

Other props are the element’s own, className and ref included; a router’s link takes className="navigation-menu-link" or "navigation-menu-entry".

CSS variables

Variable	Default
`--plf-navigation-menu-width`	`18rem`, or `36rem` on mega panels; capped to the viewport
`--plf-navigation-menu-padding`	Space 2 (8px)
`--plf-navigation-menu-bg`, `--plf-navigation-menu-color`	Elevated surface and text
`--plf-navigation-menu-border`	`--plf-color-border-subtle`
`--plf-navigation-menu-radius`	Large radius (8px)
`--plf-navigation-menu-shadow`	Medium shadow
`--plf-navigation-menu-hover-bg`	`--plf-color-surface-muted`; also open buttons and the current link
`--plf-navigation-menu-icon-size`	Control icon size (16px)