Complete Guide to Nav Component Archetypes in Hallmark (N1-N13)

Hallmark defines fourteen distinct navigation archetypes (N1 through N13, including the minimal N1a variant) that provide unique visual and interaction patterns for top-of-page navigation bars, each documented in the component cookbook and implemented as individual markdown files.

The Nav component archetypes in Hallmark provide a systematic palette for generating diverse site navigation patterns. Located in the Nutlope/hallmark repository, these fourteen predefined patterns range from minimal wordmark layouts to complex mega-menus, allowing the system to select appropriate navigation based on project genre and theme requirements. Understanding these archetypes is essential for customizing generated sites or extending the framework with new navigation patterns.

Overview of Hallmark Navigation Archetypes

The complete palette is documented in the Navigation section of skills/hallmark/references/component-cookbook.md (lines 74-87). Each archetype receives a unique code (N1-N13) and exists as a standalone implementation file within the components directory. These patterns function as building blocks that Hallmark selects during site generation to ensure visual variety and appropriate UX conventions.

Complete List of Nav Component Archetypes

Hallmark provides the following fourteen navigation patterns:

N1 (N1a) – Wordmark 2 Links (Minimal) Left-aligned wordmark with two textual links on the right. No logo or menu icon appears in this minimal configuration.

N1b – Canonical SaaS Three-Section Dense SaaS-style bar featuring a wordmark on the left, a centered cluster of 3-6 links, and sign-in plus filled CTA buttons on the right.

N2 – Floating Chip A small fixed chip positioned in the top-right corner containing the wordmark and a single action. This element sits outside the normal document flow.

N3 – Side Rail Thin vertical strip fixed to the left edge with a rotated wordmark and 2-3 dot indicators representing page sections.

N4 – Hidden Behind ⌘K No visible navigation bar; users access navigation through a command-palette triggered by the ⌘K keyboard shortcut.

N5 – Floating Pill Rounded full-width pill detached from page edges with a soft blur backdrop and shadow, typically centered at the top of the viewport.

N6 – Newspaper Masthead Full-width header featuring a large centered wordmark with optional issue/date lines and a link row beneath the main title.

N7 – Brutal Slab Heavy full-width bar with a 2px solid bottom border, all-caps wordmark, and spaced uppercase links for a brutalist aesthetic.

N8 – Terminal Command Navigation rendered as a CLI prompt (> command …) where links appear as command flags, optionally featuring a blinking cursor.

N9 – Edge-Aligned Minimal Wordmark positioned hard-left and a single CTA hard-right with abundant empty space between them. No intermediate link row appears.

N10 – Floating On-Scroll Morph Sticky bar that transforms into a floating pill (similar to N5) as the user scrolls past a defined threshold.

N11 – Mega-Menu Panel Top bar with triggers that open a full-width multi-column panel containing icons, titles, and descriptions for complex site structures.

N12 – Announcement Banner + Retracting Nav Colored promotional banner stacked above the primary navigation; the banner retracts on scroll-down and expands on scroll-up.

N13 – Inline ⌘K Search Pill Visible search pill integrated directly in the bar (showing placeholder text and ⌘K hint) that opens a spotlight modal with grouped results.

Implementation Patterns and Code Examples

Each archetype exports a <nav> element with a specific class name following the pattern nav--[archetype-name]. Below are implementation examples for three distinct patterns.

Floating pill navigation (N5):

<!-- N5 – Floating pill -->
<nav class="nav nav--floating-pill">
  <div class="nav__inner">
    <a class="wordmark" href="/">Hallmark</a>
    <a class="cta" href="/demo">Try it</a>
  </div>
</nav>

Edge-aligned minimal navigation (N9):

<!-- N9 – Edge‑aligned minimal -->
<nav class="nav nav--edge-aligned">
  <a class="wordmark" href="/">Hallmark</a>
  <a class="cta" href="/contact">Contact</a>
</nav>

Terminal command navigation (N8):

<!-- N8 – Terminal command -->
<nav class="nav nav--terminal">
  <pre>&gt; hallmark <span class="cursor">|</span></pre>
</nav>

Source File Locations

The Hallmark repository organizes these archetypes across specific reference files:

• skills/hallmark/references/component-cookbook.md – Central registry listing all fourteen archetypes in the Navigation section
• skills/hallmark/references/components/n1-wordmark-2-links.md – N1/N1a implementation
• skills/hallmark/references/components/n1b-saas-three-section.md – N1b implementation
• skills/hallmark/references/components/n2-floating-chip.md – N2 implementation
• skills/hallmark/references/components/n3-side-rail.md – N3 implementation
• skills/hallmark/references/components/n4-hidden-behind-k.md – N4 implementation
• skills/hallmark/references/components/n5-floating-pill.md – N5 implementation
• skills/hallmark/references/components/n6-newspaper-masthead.md – N6 implementation
• skills/hallmark/references/components/n7-brutal-slab.md – N7 implementation
• skills/hallmark/references/components/n8-terminal-command.md – N8 implementation
• skills/hallmark/references/components/n9-edge-aligned-minimal.md – N9 implementation
• skills/hallmark/references/components/n10-floating-on-scroll-morph.md – N10 implementation
• skills/hallmark/references/components/n11-mega-menu.md – N11 implementation
• skills/hallmark/references/components/n12-banner-retract.md – N12 implementation
• skills/hallmark/references/components/n13-inline-cmdk-pill.md – N13 implementation

Summary

• Hallmark provides fourteen distinct Nav component archetypes (N1-N13 plus N1a) for generating diverse navigation patterns.
• Each archetype is documented in component-cookbook.md and implemented as individual markdown files under skills/hallmark/references/components/.
• Archetypes range from minimal text links (N1) to complex mega-menus (N11) and terminal-inspired interfaces (N8).
• Implementation uses semantic <nav> elements with class names following the nav--[pattern] convention.
• The system selects archetypes automatically based on project briefs, ensuring unique navigation fingerprints across generated sites.

Frequently Asked Questions

What is the difference between N1 and N1a in Hallmark?

N1 represents the standard Wordmark 2 Links archetype, while N1a denotes the minimal variant of the same pattern. Both feature a left-aligned wordmark with two textual links on the right, but N1a specifically refers to the most stripped-down implementation without additional decorative elements or responsive variations.

How does Hallmark choose which Nav archetype to use?

According to the Hallmark source code, the system selects navigation archetypes based on the project brief's genre, theme, and desired variety parameters. The selection logic ensures that generated sites receive navigation patterns appropriate to their content type while maintaining visual diversity across different generations.

Can I use multiple Nav archetypes in a single Hallmark project?

Typically, Hallmark assigns one primary navigation archetype per generated site to maintain consistent UX patterns. However, complex implementations like N12 (Announcement Banner + Retracting Nav) combine multiple elements, and custom configurations could theoretically layer N4 (Hidden Behind ⌘K) with other invisible navigation strategies.

Where are the Nav component styles defined in the repository?

While the archetype structures and HTML patterns reside in skills/hallmark/references/components/, the specific styling implementations would be found in the corresponding skill templates or theme files. Each markdown file in the components directory contains the structural definition and class naming conventions for its respective archetype.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}