>_Building AppsWithout Code
Header & navigation / DETAILED TASK GUIDE

Update the header

Header work can mean a simple label change or a structural navigation redesign. The direct terminal option handles a unique text replacement in static HTML; the AI prompt handles components, routes, and layout.

BY BUILDING APPS WITHOUT CODEUPDATED OCT 14, 2026DIRECT TOOL + AI PROMPT

Before you start

  • The existing header and confirmed navigation destinations.
  • For direct mode: one static HTML file containing unique existing text.
  • For framework headers: an AI assistant with access to the project.

How to do it

  1. List the exact labels and destinations you need before editing.
  2. Use direct mode only for a unique text label. Use AI mode for adding or rearranging navigation.
  3. Check every destination, including the logo and main call to action.
  4. Test the mobile menu and keyboard order after the change.

Before & after

ILLUSTRATIVE EXAMPLE
<a href="/guides/">Build guides</a>

The requested label or layout changes while existing routes remain accurate. The direct text edit preserves the href.

MAKE IT YOURS

Use with an AI coding tool

1 Describe your change

Use your own words. You do not need a file name. The prompt asks the AI to preserve unrelated work.

We remember this choice on this device. Choosing a tool does not connect it to this website.

2 Copy your prompt

Read the complete prompt below, then copy it.

3 Paste into your AI coding tool

Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.

A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.

4 Check the result

Check each link, mobile navigation, keyboard operation, and logo alignment.

Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.

If the result is not what you expected

The script finds two matches

Choose a longer unique phrase or a more specific HTML file. It refuses ambiguous replacements.

A new label points to the wrong page

Text and destination are separate. Confirm both during review.

Undo the change

Restore the original header text or component diff. If using a backup, preserve any later edits first.

References & testing

The examples above explain the expected behavior; they are not a claim that this prompt has been tested in every framework or AI model. The direct tool uses our shared local-edit engine; native Windows execution remains unverified.

MDN: nav element ↗ · Our review approach