Emergency Hotline: Call 1-844-363-1423 (United We Dream Hotline)
ICE Encounter
Emergency

Sitemap & Navigation Architecture

Complete 223-page site structure with 6-pillar macro-categories, URL conventions, breadcrumb strategies, and footer architecture for immigration advocacy platforms.

Sitemap Architecture Overview

The expansion to 223 pages across 23 specialized resource sections requires aggressive, user-centric consolidation into six primary pillars. This structure maps directly to user intents and mental models, moving away from an org-chart structure toward an action-oriented architecture.

6-Pillar Category Structure

The 23 resource directories must be logically consolidated into 6 macro-categories to align with human working memory constraints (5-7 items) and information architecture best practices.

Pillar Sub-Sections Included Primary Audience
Emergency Help Red Cards & Printables, Rapid Response Networks, Crisis Hotlines General Public, Legal Observers
Know Your Rights Home & Workplace Raids, Traffic Stops, Schools/Healthcare, Border Zones General Public, Community Organizers
Legal Process & Defense Immigration Court, Appeals & Stays, DACA/TPS, Criminal-Immigration Attorneys, Respondents
For Professionals Attorney Resources, Social Workers, Faith Leaders, Healthcare Providers Professional Stakeholders
Tools & Data Facility Monitoring, Flight Tracking, Mapping Tools, Surveillance Tech Journalists, Researchers, Developers
Advocacy & Organizing Coalition Building, Policy Analysis, Operational Security, Accountability Advocates, Activists

Pillar-to-Section Mapping

Pillar Resource Sections (23 total)
Emergency Help /printables/, /rapid-response/, /hotlines/
Know Your Rights /home-raids/, /workplace/, /checkpoints/, /schools/, /airports/, /border-zones/
Legal Process /immigration-court/, /appeals/, /daca-tps/, /criminal-immigration/, /asylum/, /habeas-corpus/
For Professionals /attorney-resources/, /social-workers/, /faith-leaders/, /healthcare/, /mental-health/
Tools & Data /facility-monitoring/, /flight-tracking/, /mapping-tools/, /surveillance/, /datasets/
Advocacy & Organizing /coalition-building/, /policy-analysis/, /opsec/, /accountability/

Primary Navigation (6 Items)

Proposed Sitemap

/
├── /emergency/
│   ├── /red-card/
│   ├── /hotlines/
│   ├── /legal-observers/
│   └── /rapid-response/
│
├── /know-your-rights/
│   ├── /home-raids/
│   ├── /workplace/
│   │   ├── /i9-audits/
│   │   ├── /raid-response/
│   │   └── /employer-obligations/
│   ├── /checkpoints/
│   │   ├── /100-mile-zone/
│   │   ├── /checkpoint-locations/
│   │   └── /traffic-stops/
│   ├── /schools/
│   │   └── /sensitive-locations/
│   ├── /airports/
│   │   ├── /cbp-authority/
│   │   ├── /device-searches/
│   │   └── /expedited-removal/
│   └── /right-to-silence/
│
├── /legal-process/
│   ├── /immigration-court/
│   │   ├── /hearings/
│   │   ├── /relief-options/
│   │   └── /preparation/
│   ├── /appeals/
│   │   ├── /bia-appeals/
│   │   ├── /federal-court/
│   │   └── /emergency-stays/
│   └── /habeas-corpus/
│
├── /visas-relief/
│   ├── /daca/
│   ├── /tps/
│   ├── /asylum/
│   └── /mixed-status/
│
├── /resources/
│   ├── /legal-observer/
│   ├── /legal-documents/
│   │   ├── /power-of-attorney/
│   │   └── /guardianship/
│   ├── /ai-chatbot/
│   ├── /mapping-tools/
│   ├── /flight-tracking/
│   ├── /facility-monitoring/
│   └── /printables/
│
├── /find-help/
│   ├── /state/
│   │   ├── /california/
│   │   ├── /texas/
│   │   └── ... (50 states)
│   ├── /legal-aid/
│   └── /coalitions/
│
├── /about/
│   ├── /team/
│   ├── /partners/
│   └── /funding/
│
├── /privacy/
├── /terms/
└── /sitemap/

Primary Navigation Implementation

Desktop Header

<header class="site-header">
  <nav class="primary-nav" aria-label="Main navigation">
    <ul class="primary-nav__list">
      <li>
        <a href="/emergency/" class="primary-nav__link primary-nav__link--emergency">
          Emergency
        </a>
      </li>
      <li>
        <a href="/know-your-rights/" class="primary-nav__link">
          Know Your Rights
        </a>
        <!-- Dropdown submenu -->
        <ul class="primary-nav__submenu">
          <li><a href="/know-your-rights/home-raids/">At Home</a></li>
          <li><a href="/know-your-rights/workplace/">At Work</a></li>
          <li><a href="/know-your-rights/checkpoints/">While Driving</a></li>
          <li><a href="/know-your-rights/schools/">At School</a></li>
          <li><a href="/know-your-rights/airports/">At Airports</a></li>
        </ul>
      </li>
      <li><a href="/legal-process/" class="primary-nav__link">Legal Process</a></li>
      <li><a href="/visas-relief/" class="primary-nav__link">Visas & Relief</a></li>
      <li><a href="/resources/" class="primary-nav__link">Resources</a></li>
      <li><a href="/find-help/" class="primary-nav__link">Find Help</a></li>
    </ul>
  </nav>
</header>

Mobile Navigation

<!-- Hamburger trigger -->
<button class="mobile-nav-trigger"
        aria-expanded="false"
        aria-controls="mobile-nav"
        aria-label="Open menu">
  <span class="hamburger-icon" aria-hidden="true"></span>
</button>

<!-- Mobile nav drawer -->
<nav id="mobile-nav" class="mobile-nav" hidden>
  <ul class="mobile-nav__list">
    <li>
      <a href="/emergency/" class="mobile-nav__link mobile-nav__link--emergency">
        🆘 Emergency Help
      </a>
    </li>
    <li>
      <button class="mobile-nav__toggle" aria-expanded="false">
        Know Your Rights
      </button>
      <ul class="mobile-nav__submenu" hidden>
        <li><a href="/know-your-rights/home-raids/">At Home</a></li>
        <li><a href="/know-your-rights/workplace/">At Work</a></li>
        <!-- etc -->
      </ul>
    </li>
    <!-- etc -->
  </ul>
</nav>

Secondary Navigation

Sidebar Navigation

For deep content hierarchies within sections:

<aside class="sidebar-nav" aria-label="Section navigation">
  <h2 class="sidebar-nav__heading">Know Your Rights</h2>
  <ul class="sidebar-nav__list">
    <li>
      <a href="/know-your-rights/" class="sidebar-nav__link">
        Overview
      </a>
    </li>
    <li>
      <a href="/know-your-rights/home-raids/"
         class="sidebar-nav__link sidebar-nav__link--active"
         aria-current="page">
        Home Raids
      </a>
    </li>
    <li>
      <a href="/know-your-rights/workplace/" class="sidebar-nav__link">
        Workplace
      </a>
      <ul class="sidebar-nav__sublist">
        <li><a href="/know-your-rights/i9-audits/">I-9 Audits</a></li>
        <li><a href="/know-your-rights/raid-response/">Raid Response</a></li>
      </ul>
    </li>
  </ul>
</aside>

.sidebar-nav {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding-right: 1rem;
}

.sidebar-nav__link {
  display: block;
  padding: 0.5rem 1rem;
  border-left: 3px solid transparent;
  color: var(--color-text);
  text-decoration: none;
}

.sidebar-nav__link:hover {
  background: var(--color-bg-subtle);
}

.sidebar-nav__link--active,
.sidebar-nav__link[aria-current="page"] {
  border-left-color: var(--color-primary);
  background: var(--color-primary-bg);
  font-weight: 500;
}

Related Resources Pattern

Prevent dead ends by linking related content:

<aside class="related-resources">
  <h3>Related Resources</h3>
  <ul>
    <li>
      <a href="/printables/door-card/">
        Download Door Rights Card
      </a>
    </li>
    <li>
      <a href="/know-your-rights/right-to-silence/">
        Your Right to Remain Silent
      </a>
    </li>
    <li>
      <a href="/find-help/">
        Find Local Legal Aid
      </a>
    </li>
  </ul>
</aside>

Breadcrumb Strategy

Breadcrumbs are non-negotiable for a 223-page site—they provide vital contextual orientation and an easy escape hatch for users deep in the architecture.

Why Breadcrumbs Matter

Function User Benefit
Contextual orientation Users know where they are in hierarchy
Escape hatch Easy navigation to parent sections
SEO rich snippets Enhanced SERP display with Schema.org
Reduced bounce rate Alternatives to back button

Schema.org Implementation

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/" itemprop="item">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1">
    </li>
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/legal/" itemprop="item">
        <span itemprop="name">Legal Process</span>
      </a>
      <meta itemprop="position" content="2">
    </li>
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/legal/criminal-immigration/" itemprop="item">
        <span itemprop="name">Criminal-Immigration</span>
      </a>
      <meta itemprop="position" content="3">
    </li>
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
      <span itemprop="name">Aggravated Felonies</span>
      <meta itemprop="position" content="4">
    </li>
  </ol>
</nav>

Mobile Truncation Strategy

On mobile viewports, breadcrumbs deeper than three levels must truncate middle nodes to prevent text wrapping:

Display pattern: Home > ... > Criminal-Immigration > Aggravated Felonies

@media (max-width: 768px) {
  .breadcrumbs__list {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }

  /* Show only first, last two on small screens */
  .breadcrumbs__item:not(:first-child):not(:nth-last-child(-n+2)) {
    display: none;
  }

  /* Add ellipsis indicator */
  .breadcrumbs__item:not(:first-child):not(:nth-last-child(-n+2)) + .breadcrumbs__item::before {
    content: "...";
    margin-right: 0.5rem;
    color: var(--color-text-muted);
  }
}

/* Very small screens: only parent + current */
@media (max-width: 375px) {
  .breadcrumbs__item:not(:nth-last-child(-n+2)) {
    display: none;
  }
}

11ty Breadcrumb Generation

{# Generate breadcrumbs from URL path #}
{% set pathParts = page.url | split('/') | reject('empty') %}
{% set breadcrumbPath = '' %}

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="/">Home</a>
    </li>
    {% for part in pathParts %}
      {% set breadcrumbPath = breadcrumbPath + '/' + part %}
      {% if loop.last %}
        <li class="breadcrumbs__item" aria-current="page">
          <span>{{ title }}</span>
        </li>
      {% else %}
        <li class="breadcrumbs__item">
          <a href="{{ breadcrumbPath }}/">{{ part | titleCase }}</a>
        </li>
      {% endif %}
    {% endfor %}
  </ol>
</nav>

Footer Architecture

The footer must serve as a comprehensive, secondary utility matrix for power users. It should feature a responsive 4-column layout mapping strictly to the macro-categories.

4-Column Desktop Layout

Column 1 Column 2 Column 3 Column 4
Emergency Help Know Your Rights Legal Process Tools & Data
Rapid Response Home Raids Immigration Court Facility Monitor
Red Cards Workplace Appeals Flight Tracking
Hotlines Checkpoints DACA/TPS Mapping Tools

Essential Footer Content

<footer class="site-footer">
  <div class="footer-emergency">
    <h2>24/7 Legal Hotline</h2>
    <a href="tel:+18001234567" class="footer-hotline">
      1-800-123-4567
    </a>
    <p>Free, confidential, multilingual</p>
  </div>

  <nav class="footer-nav" aria-label="Footer navigation">
    <div class="footer-nav__section">
      <h3>Emergency Help</h3>
      <ul>
        <li><a href="/emergency/">Emergency Overview</a></li>
        <li><a href="/emergency/red-card/">Red Cards</a></li>
        <li><a href="/emergency/rapid-response/">Rapid Response</a></li>
        <li><a href="/emergency/hotlines/">Crisis Hotlines</a></li>
      </ul>
    </div>

    <div class="footer-nav__section">
      <h3>Know Your Rights</h3>
      <ul>
        <li><a href="/rights/home/">At Home</a></li>
        <li><a href="/rights/workplace/">At Work</a></li>
        <li><a href="/rights/checkpoints/">While Driving</a></li>
        <li><a href="/rights/schools/">At School</a></li>
      </ul>
    </div>

    <div class="footer-nav__section">
      <h3>Legal Process</h3>
      <ul>
        <li><a href="/legal/court/">Immigration Court</a></li>
        <li><a href="/legal/appeals/">Appeals & Stays</a></li>
        <li><a href="/legal/daca-tps/">DACA/TPS</a></li>
        <li><a href="/legal/criminal/">Criminal-Immigration</a></li>
      </ul>
    </div>

    <div class="footer-nav__section">
      <h3>Tools & Data</h3>
      <ul>
        <li><a href="/tools/facilities/">Facility Monitor</a></li>
        <li><a href="/tools/flights/">Flight Tracking</a></li>
        <li><a href="/tools/maps/">Mapping Tools</a></li>
        <li><a href="/tools/datasets/">Datasets</a></li>
      </ul>
    </div>
  </nav>

  <div class="footer-legal">
    <ul class="footer-legal__links">
      <li><a href="/resources/operational-security/information-protection/">Privacy Policy</a></li>
      <li><a href="/resources/">Terms of Service</a></li>
      <li><a href="/accessibility/">Accessibility</a></li>
      <li><a href="/opsec/">Operational Security</a></li>
    </ul>
    <p class="disclaimer">
      This website provides information, not legal advice.
      Always consult a qualified attorney for your specific situation.
    </p>
    <p class="copyright">
      © 2026 Immigration Rights Coalition. Content available under CC BY-NC-SA.
    </p>
  </div>
</footer>

Mobile Accordion Footer

On mobile devices, the 4-column layout must collapse into a neat accordion system to prevent an infinitely scrolling page terminus.

<!-- Mobile footer accordion -->
<nav class="footer-nav footer-nav--mobile" aria-label="Footer navigation">
  <details class="footer-accordion">
    <summary class="footer-accordion__trigger">
      <span>Emergency Help</span>
      <span class="footer-accordion__icon" aria-hidden="true"></span>
    </summary>
    <ul class="footer-accordion__content">
      <li><a href="/emergency/red-card/">Red Cards</a></li>
      <li><a href="/emergency/rapid-response/">Rapid Response</a></li>
      <li><a href="/emergency/hotlines/">Crisis Hotlines</a></li>
    </ul>
  </details>

  <details class="footer-accordion">
    <summary class="footer-accordion__trigger">
      <span>Know Your Rights</span>
      <span class="footer-accordion__icon" aria-hidden="true"></span>
    </summary>
    <ul class="footer-accordion__content">
      <li><a href="/rights/home/">At Home</a></li>
      <li><a href="/rights/workplace/">At Work</a></li>
      <li><a href="/rights/checkpoints/">While Driving</a></li>
    </ul>
  </details>

  <!-- Additional accordions... -->
</nav>

/* Desktop: 4-column grid */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* Mobile: accordion stack */
@media (max-width: 768px) {
  .footer-nav {
    display: none;
  }

  .footer-nav--mobile {
    display: block;
  }

  .footer-accordion {
    border-bottom: 1px solid var(--color-border);
  }

  .footer-accordion__trigger {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    cursor: pointer;
    font-weight: 500;
  }

  .footer-accordion__content {
    padding: 0 0 1rem 0;
    list-style: none;
  }

  .footer-accordion__content li {
    padding: 0.5rem 0;
  }

  .footer-accordion[open] .footer-accordion__icon::after {
    transform: rotate(180deg);
  }

  .footer-accordion__icon::after {
    content: "▼";
    font-size: 0.75rem;
    transition: transform 0.2s;
  }
}

Cross-Linking Strategy

Internal Linking Rules

Link Type Placement Purpose
Contextual Within content Natural reading flow
Related End of sections Prevent dead ends
Sidebar Persistent Section navigation
Breadcrumb Top of page Hierarchy context
Footer Global Quick access, legal

11ty Related Content

{# Auto-generate related content based on tags #}
{% set related = collections.all | filterByTags(tags) | exclude(page.url) | limit(3) %}

{% if related.length %}
<aside class="related-resources">
  <h3>Related Resources</h3>
  <ul>
    {% for item in related %}
      <li>
        <a href="{{ item.url }}">{{ item.data.title }}</a>
      </li>
    {% endfor %}
  </ul>
</aside>
{% endif %}

URL Structure Conventions

URL Length and SEO

To support extreme scalability and robust SEO, URLs must reflect the semantic hierarchy without becoming overly verbose.

URL Metric Target Rationale
Length < 60 characters Optimal for sharing, SEO indexing
Depth 3 levels max Prevents buried content
Separator Hyphens SEO best practice
Case Lowercase Consistency

URL Examples

Quality URL Issue
Optimal domain.org/rights/workplace-raids Semantic, concise
Suboptimal domain.org/know-your-rights-community-protection/what-to-do-if-ice-raids-your-workplace Too verbose

URL Patterns by Pillar

/emergency/
  └── /red-card/
  └── /hotlines/
  └── /rapid-response/

/rights/
  └── /home/
  └── /workplace/
  └── /checkpoints/
  └── /schools/

/legal/
  └── /court/
  └── /appeals/
  └── /daca-tps/

/professionals/
  └── /attorneys/
  └── /social-workers/
  └── /faith-leaders/

/tools/
  └── /facilities/
  └── /flights/
  └── /maps/

/advocacy/
  └── /coalitions/
  └── /policy/
  └── /opsec/

Multilingual URL Structure

Subdirectory vs. Subdomain

For multilingual scaling across 223 pages, internationalization (i18n) best practices dictate the absolute use of subdirectories (/en/, /es/, /tl/) over subdomains to:

  • Consolidate domain authority
  • Simplify routing logic
  • Maintain single SSL certificate

Language Prefixes

/en/know-your-rights/home-raids/
/es/conozca-sus-derechos/redadas/
/zh/了解您的权利/家庭搜查/
/ar/حقوقك/مداهمات-منزلية/

Hreflang Implementation

<link rel="alternate" hreflang="en" href="https://site.org/en/page/">
<link rel="alternate" hreflang="es" href="https://site.org/es/pagina/">
<link rel="alternate" hreflang="zh" href="https://site.org/zh/页面/">
<link rel="alternate" hreflang="ar" href="https://site.org/ar/صفحة/">
<link rel="alternate" hreflang="x-default" href="https://site.org/en/page/">

SEO Considerations

XML Sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://site.org/en/know-your-rights/</loc>
    <lastmod>2026-03-25</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="es"
                href="https://site.org/es/conozca-sus-derechos/"/>
  </url>
</urlset>

Navigation Schema

{
  "@context": "https://schema.org",
  "@type": "SiteNavigationElement",
  "name": "Main Navigation",
  "url": "https://site.org/",
  "hasPart": [
    {
      "@type": "SiteNavigationElement",
      "name": "Emergency Help",
      "url": "https://site.org/emergency/"
    },
    {
      "@type": "SiteNavigationElement",
      "name": "Know Your Rights",
      "url": "https://site.org/know-your-rights/"
    }
  ]
}

Testing Checklist

Navigation

  • [ ] All pages reachable within 3 clicks
  • [ ] Emergency content in 1 click
  • [ ] Mobile nav functional
  • [ ] Breadcrumbs accurate

Structure

  • [ ] Sitemap XML validates
  • [ ] Hreflang tags correct
  • [ ] Schema markup validates
  • [ ] No orphan pages

Accessibility

  • [ ] Keyboard navigable
  • [ ] ARIA labels present
  • [ ] Skip links functional
  • [ ] Current page indicated

Related Resources