← →

The Navigation Menu is a native web component (no dependencies) that renders a horizontal navigation bar with role=navigation. Each item can be a simple link (with href) or a trigger that opens a rich content panel below it, using the native Popover API and CSS anchor positioning. Use it when you need a site top menu with submenus, keeping only one panel open at a time and full keyboard navigation.

Preview

<pura-navigation-menu aria-label="Main">
  <pura-navigation-menu-item label="Products">
    <div style="display:grid;gap:.5rem;min-width:16rem">
      <a href="#editor">Editor</a>
      <a href="#analytics">Analytics</a>
      <a href="#automacoes">Automations</a>
    </div>
  </pura-navigation-menu-item>
  <pura-navigation-menu-item label="Resources">
    <div style="display:grid;gap:.5rem;min-width:16rem">
      <a href="#docs">Documentation</a>
      <a href="#guias">Guides</a>
      <a href="#blog">Blog</a>
    </div>
  </pura-navigation-menu-item>
  <pura-navigation-menu-item label="Pricing" href="#precos"></pura-navigation-menu-item>
</pura-navigation-menu>

Attributes

Attribute	Type	Default	Description
`label`	string	""	Trigger text of the item (pura-navigation-menu-item).
`href`	string	(none)	If present, the item becomes a simple link (anchor) instead of opening a panel.
`open`	boolean	false	Reflects whether the item's panel is open; also readable via the .open property.
`aria-label`	string	"Main"	Accessible label of the bar (pura-navigation-menu); defaults to "Main" if omitted.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/navigation-menu.js"></script>

JavaScript

import "./pura/lib/navigation-menu.js";

Slots

defaultlabel

Events

openclose