Building a nav from links

The builder is one five-step flow: website URL, buckets, link selection, preset, and command. The same builder handles editing (chapter 4.9).

The flow, in order

The five steps

1. Website URL — enter a site and press Detect Links, or skip to manual entry.
2. Buckets — pick which set of links to build. Only Socials is selectable for now.
3. Link selection — check which links to include, edit any URL, or add one by hand. Six at most.
4. Preset — pick a preset and a colour, and check the finished message in a live preview.
5. Command — set the trigger the nav fires on, and save.

Where you build one

Entry points into the builder

The Hyperlink Nav panel has one control, Add Hyperlink Command, which opens the builder on Step 1. In the Commands tab, the Add button opens the plain command modal, not the nav builder.

Step 1 — Website URL

One field, Website URL, placeholder yourproject.com. Enter is the same as pressing Detect Links. An empty field shows “Enter your website URL”; text that isn't a URL shows “… is not a link”.

Buttons

Detecting links

Detect Links scans the site and groups the links it finds by platform.

Rate limit

Step 2 — What Are You Building? (buckets)

Heading What Are You Building?. One card per bucket, with a count of matching links found.

Buckets

Picking Socials filters the link list to that bucket and advances to Step 3. The only button on this step is Back.

Step 3 — Link selection

Each row is an edge-emoji preview, an editable URL field, and a checkbox, grouped by platform. Editing a URL re-detects its platform, except on the fixed manual-entry rows. Typing into an empty row checks it; clearing it unchecks it.

Links outside the chosen bucket fold behind a reveal link. A trailing row, “Add another link,” takes any URL with a + button.

Messages at this step

A status line, “ of 6 selected,” shows under the list. Buttons: Confirm (disabled with nothing selected) and Back. Enter in any URL field also confirms.

Step 4 — Preset

• A Preset dropdown.
• A Color dropdown — Main first, then every colour the preset offers.
• A live preview of the finished message.
• A Black logos / White logos toggle, shown only when the chosen colour has a white-logo variant.
• An “Edit links ({n})” link back to Step 3.

Confirm (disabled with no links selected) advances to Step 5; Back returns to Step 3. What a preset and a colour change is covered in chapter 4.9.

Step 5 — Command

One field, Command, prefixed with /, placeholder socials. 1–32 letters, digits or underscores; anything else is removed as you type. Otherwise: “Use 1–32 letters, numbers, or underscores.” Enter submits.

Buttons

Manual entry — skipping detection

“Skip, I'll enter links myself,” on Step 1, skips the scan. You still pass through the bucket step before landing on Step 3. If loading fails it shows “Could not load link options.”

Step 3 then shows one empty row per platform, all unchecked. These rows keep their platform whatever URL you type.

The manual-entry rows, currently, in order

An empty website field is accepted through to save.