Basic Nav

note

This page documents the recommended way to add a Basic Nav by importing the prebuilt components with Copy/Paste JSON below. The older manual approach (copying HTML/CSS/JS) has been removed.

Setup

• Create a Header component for your site header if you don’t already have one.
• Add a {#slot} inside the Header (e.g., {#slot right}) where you’ll place the Navigation and Burger components.
• You’ll paste the Navigation and Burger components into this Header slot in the next step.

Import Components

Use the buttons below to copy the ready-to-use Navigation and Burger components as JSON. Then, in Etch, press cmd + v (Mac) or ctrl + v (Windows) anywhere in the builder to insert the component.

Steps

• Click "Copy Navigation Component" above, then in Etch press cmd + v (Mac) / ctrl + v (Windows) anywhere in the builder to insert the component
• Repeat for the Burger Component.
• Arrange both inside your Header (for example, place Navigation in the right slot and Burger next to it for mobile).
• Verify desktop dropdowns/flyouts and mobile toggle behavior.

Configuration

• The basicNav loop is preinstalled in Etch and already wired in the component.
• CSS, JS, and props are bundled inside these components—no setup required. You can edit prop values to customize behavior.
• Accessibility features (including aria-current behavior) are enabled by default.
• Styling: tweak CSS variables on .etch-nav and .etch-burger (e.g., colors, icon sizes, breakpoint at 768px).

Configuring Your Navigation

You obviously don't want sample data in your Navigation, so let's customize it.

1. Open the Loop Manager.
2. Click on the Basic Nav loop.
3. Edit the JSON to configure your navigation.

tip

AI is extremely good at producing working JSON. If you don't like editing JSON manually, consider letting AI help you.

Here's some sample JSON:

[
  {
    "label": "Home",
    "url": "/"
  },
  {
    "label": "Item 2",
    "children": [
      {
        "label": "Item 2.1",
        "url": "/dropdown1"
      },
      {
        "label": "Item 2.2",
        "url": "/dropdown2",
        "children": [
          {
            "label": "Item 2.2.1",
            "url": "/dropdown1"
          },
          {
            "label": "Item 2.2.2",
            "url": "/dropdown2"
          },
          {
            "label": "Item 2.2.3",
            "url": "/dropdown3"
          }
        ]
      },
      {
        "label": "Item 2.3",
        "url": "/dropdown3"
      }
    ]
  },
  {
    "label": "Item 3",
    "url": "/page",
    "children": [
      {
        "label": "Item 3.1",
        "url": "/dropdown1"
      },
      {
        "label": "Item 3.2",
        "url": "/dropdown2"
      },
      {
        "label": "Item 3.3",
        "url": "/dropdown3"
      },
      {
        "label": "Item 3.4",
        "url": "/dropdown4"
      }
    ]
  },
  {
    "label": "Item 4",
    "url": "/about"
  },
  {
    "label": "Item 5",
    "url": "/contact-us"
  }
]

• Each label/url pair is a navigation link.
• The "children" object defines children for a navigation item. Children links will automatically be placed in a dropdown.
• If a child has children, this defines a grandchildren relationship. Grandchildren will automatically be placed in a flyout.

tip

Use relative URL references, not full static URLs.

Nav Javascript Options

Option	Type	Default	Description
ariaCurrentPage	boolean or object	false	Enables automatic setting of aria-current="page" on the current navigation link. Pass true for basic usage, or an object for advanced configuration.
• homePage	boolean	true	(Only if ariaCurrentPage is an object) — If true, the homepage link will also be marked as the current page. Set to false to skip homepage highlighting.

See Nav Behavior for more information.

Nav Component Props

Option	Type	Default	Description
jsonNav	Loop (array of items)	preset	Data source for your menu. Preinstalled in Etch; edit via Loop Manager.
navAriaLabel	string	"Menu"	Sets the nav aria-label.
mouseSubmenu	select	"hover"	Interaction mode. Options: hover, click, click-sub-hover (click for dropdowns, hover for flyouts on desktop).

Burger Javascript Options

Option	Type	Default	Description
button	HTMLElement	undefined	Required – The burger toggle element where click handling is attached.
target	string or HTMLElement	null	The element to show/hide when toggled. Selector or direct element reference.
selfAriaExpanded	boolean	false	If true, the burger button manages its own aria-expanded attribute.
targetOptions	object	{}	Configuration for the target element.
• class	string	null	Class to toggle on the target element.
• ariaExpanded	boolean	false	If true, toggles aria-expanded on the target element.
onToggle	(isOpen: boolean) => void	null	Called every time the burger is toggled; isOpen is true when opened.
onClose	() => void	null	Called only when the burger is closed.

See Burger Behavior for more information.

Burger Component Props

Option	Type	Default	Description
ariaLabel	string	"Menu"	Sets the burger button aria-label text.

Example of using the onToggle or onClose to execute custom functions:

warning

The example below might differ from the javascript provided in the burger component for brevity.

Styling Your Nav / Burger

Both components are styled via locally scoped CSS variables inside each component:

• .etch-nav (Navigation): colors, spacing, icon sizes, dropdown/flyout visuals, etc.
• .etch-burger (Burger): width, line thickness/spacing, colors, etc.

Open the component styles and adjust those variables to match your design. For needs beyond the provided tokens, add additional styles in your project CSS.

Changing the Mobile Breakpoint

Both components default to a 768px breakpoint. You can change this within the component CSS (media queries) so the Navigation and Burger stay in sync.

tip

you can search for /* Set the desired breakpoint */ in the component CSS to find the breakpoint.

Advanced Customization

After you paste/import the components, you can open the Navigation or Burger component and edit its JS to customize behavior. This is optional—the defaults work out of the box.

warning

The examples below might differ from the javascript provided in the components for brevity.

Nav Behavior

Example: customize the aria-current behavior:

instantiateNavClass({
  ariaCurrentPage: {
    homePage: false,
  },
});

Burger Behavior

Example: trigger a method from another component when the burger closes via onClose:

const burgerInstance = new EtchBurgerScript({
  button: burgerBtn,
  target: etchNav,
  selfAriaExpanded: true,
  targetOptions: {
    ariaExpanded: true,
  },
  onClose,
});

function closeEtchNav() {
  window.etchElements?.etchNav?.closeAllNavs();
}

instantiateBurgerClass(etchNav, closeEtchNav);