Source from repo

Site Architecture

Plans and maps website page hierarchy, URL structure, navigation, and internal linking for SEO and usability.

coreyhaines31GitHub coreyhaines31Source repo Original GitHub link Publisher page

Files

Skill

n/a

Size

44.0 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

references/navigation-patterns.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown306 linesFree

references/navigation-patterns.md

1# Navigation Patterns
2 
3Detailed navigation patterns for different site types and contexts.
4 
5---
6 
7## Header Navigation
8 
9### Simple Header (4-6 items)
10 
11Best for: small businesses, simple SaaS, portfolios.
12 
13```
14[Logo]   Features   Pricing   Blog   About   [CTA Button]
15```
16 
17Rules:
18- Logo always links to homepage
19- CTA button is rightmost, visually distinct (filled button, contrasting color)
20- Items ordered by priority (most visited first)
21- Active page gets visual indicator (underline, bold, color)
22 
23### Mega Menu Header
24 
25Best for: SaaS with many features, e-commerce with categories, large content sites.
26 
27```
28[Logo]   Product ▾   Solutions ▾   Resources ▾   Pricing   Docs   [CTA]
29```
30 
31When "Product" is hovered/clicked:
32 
33```
34┌─────────────────────────────────────────────────┐
35│  Features           Platform        Integrations │
36│  ─────────          ─────────       ──────────── │
37│  Analytics           Security       Slack         │
38│  Automation          API            HubSpot       │
39│  Reporting           Compliance     Salesforce    │
40│  Dashboards                         Zapier        │
41│                                                   │
42│  [See all features →]                             │
43└─────────────────────────────────────────────────┘
44```
45 
46Mega menu rules:
47- 2-4 columns max
48- Group items logically (by feature area, use case, or audience)
49- Include a "See all" link at the bottom
50- Don't nest dropdowns inside mega menus
51- Show descriptions for items when labels alone aren't clear
52 
53### Split Navigation
54 
55Best for: apps with both marketing and product nav.
56 
57```
58[Logo]   Features   Pricing   Blog        [Login]   [Sign Up]
59├── Marketing nav (left) ──────┘          └── Auth nav (right) ──┤
60```
61 
62Right side handles authentication actions. Left side handles page navigation.
63 
64---
65 
66## Footer Navigation
67 
68### Column-Based Footer (Standard)
69 
70Best for: most sites. Organize links into 3-5 themed columns.
71 
72```
73┌──────────────────────────────────────────────────────────┐
74│                                                          │
75│  Product          Resources        Company       Legal   │
76│  ─────────        ──────────       ─────────     ─────   │
77│  Features         Blog             About         Privacy │
78│  Pricing          Guides           Careers       Terms   │
79│  Integrations     Templates        Contact       GDPR    │
80│  Changelog        Case Studies     Press                 │
81│  Security         Webinars         Partners              │
82│                                                          │
83│  [Logo]  © 2026 Company Name                             │
84│  Social: [Twitter] [LinkedIn] [GitHub]                   │
85│                                                          │
86└──────────────────────────────────────────────────────────┘
87```
88 
89### Minimal Footer
90 
91Best for: simple sites, landing pages.
92 
93```
94┌──────────────────────────────────────────────────────────┐
95│  [Logo]                                                  │
96│  © 2026 Company  ·  Privacy  ·  Terms  ·  Contact        │
97└──────────────────────────────────────────────────────────┘
98```
99 
100### Expanded Footer
101 
102Best for: sites using footer for SEO (comparison pages, location pages, resource links).
103 
104```
105┌──────────────────────────────────────────────────────────┐
106│  Product     Resources    Compare         Use Cases      │
107│  Features    Blog         vs Competitor A  For Startups  │
108│  Pricing     Guides       vs Competitor B  For Enterprise│
109│  API         Templates    vs Competitor C  For Agencies  │
110│                                                          │
111│  Integrations             Popular Posts                  │
112│  Slack       Zapier       How to Do X                    │
113│  HubSpot     Salesforce   Guide to Y                     │
114│                           Template: Z                    │
115│                                                          │
116│  [Logo]  © 2026  ·  Privacy  ·  Terms  ·  Security      │
117└──────────────────────────────────────────────────────────┘
118```
119 
120---
121 
122## Sidebar Navigation
123 
124### Documentation Sidebar
125 
126Persistent left sidebar with collapsible sections.
127 
128```
129Getting Started
130  ├── Installation
131  ├── Quick Start
132  └── Configuration
133 
134Guides
135  ├── Authentication
136  ├── Data Models
137  └── Deployment
138 
139API Reference
140  ├── REST API
141  │   ├── Users
142  │   ├── Projects
143  │   └── Webhooks
144  └── GraphQL
145 
146Examples
147  ├── Next.js
148  ├── Rails
149  └── Python
150 
151Changelog
152```
153 
154Rules:
155- Current page highlighted
156- Sections collapsible (expanded by default for active section)
157- Search at top of sidebar
158- "Previous / Next" page navigation at bottom of content area
159- Sticky on scroll (doesn't scroll away)
160 
161### Blog Category Sidebar
162 
163```
164Categories
165  ├── SEO (24)
166  ├── CRO (18)
167  ├── Content (15)
168  ├── Paid Ads (12)
169  └── Analytics (9)
170 
171Popular Posts
172  ├── How to Improve SEO
173  ├── Landing Page Guide
174  └── Analytics Setup
175 
176Newsletter
177  └── [Email signup form]
178```
179 
180---
181 
182## Breadcrumbs
183 
184### Standard Format
185 
186```
187Home > Features > Analytics
188Home > Blog > SEO Category > How to Do Keyword Research
189Home > Docs > API Reference > Authentication
190```
191 
192Rules:
193- Separator: `>` or `/` (be consistent)
194- Every segment is a link except the current page
195- Current page is plain text (not linked)
196- Don't include the current page if the title is already visible as an H1
197 
198### With Schema Markup
199 
200```html
201<nav aria-label="Breadcrumb">
202  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
203    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
204      <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
205      <meta itemprop="position" content="1" />
206    </li>
207    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
208      <a itemprop="item" href="/features"><span itemprop="name">Features</span></a>
209      <meta itemprop="position" content="2" />
210    </li>
211    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
212      <span itemprop="name">Analytics</span>
213      <meta itemprop="position" content="3" />
214    </li>
215  </ol>
216</nav>
217```
218 
219Or use JSON-LD (recommended):
220 
221```json
222{
223  "@context": "https://schema.org",
224  "@type": "BreadcrumbList",
225  "itemListElement": [
226    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
227    { "@type": "ListItem", "position": 2, "name": "Features", "item": "https://example.com/features" },
228    { "@type": "ListItem", "position": 3, "name": "Analytics" }
229  ]
230}
231```
232 
233---
234 
235## Mobile Navigation
236 
237### Hamburger Menu
238 
239Standard for mobile. All nav items collapse into a menu icon.
240 
241Rules:
242- Hamburger icon (three lines) top-right or top-left
243- Full-screen or slide-out panel
244- CTA button visible without opening the menu (sticky header)
245- Search accessible from mobile menu
246- Accordion pattern for nested items
247 
248### Bottom Tab Bar
249 
250Best for: web apps, PWAs, mobile-first products.
251 
252```
253┌──────────────────────────────────────┐
254│                                      │
255│           [Page Content]             │
256│                                      │
257├──────────────────────────────────────┤
258│  Home    Search    Create    Profile │
259│   🏠       🔍        ➕       👤    │
260└──────────────────────────────────────┘
261```
262 
263Rules:
264- 3-5 items max
265- Icons + labels (not just icons)
266- Active state clearly indicated
267- Most important action in the center
268 
269---
270 
271## Anti-Patterns
272 
273### Things to Avoid
274 
275- **Too many header items** (8+): causes decision paralysis, nav becomes unreadable on smaller screens
276- **Dropdown inception**: dropdowns inside dropdowns inside dropdowns
277- **Mystery icons**: icons without labels — users don't know what they mean
278- **Hidden primary nav**: burying important pages in hamburger menus on desktop
279- **Inconsistent nav between pages**: nav should be identical across the site (except app vs marketing)
280- **No mobile consideration**: desktop nav that doesn't translate to mobile
281- **Footer as sitemap dump**: 50+ links in the footer with no organization
282- **Breadcrumbs that don't match URLs**: breadcrumb says "Products > Widget" but URL is `/shop/widget-pro`
283 
284### Common Fixes
285 
286| Problem | Fix |
287|---------|-----|
288| Too many nav items | Group into dropdowns or mega menus |
289| Users can't find pages | Add search, improve labeling |
290| High bounce from nav | Simplify choices, use clearer labels |
291| SEO pages not linked | Add to footer or resource sections |
292| Mobile nav is broken | Test on real devices, use hamburger pattern |
293 
294---
295 
296## Navigation for SEO
297 
298Internal links in navigation pass PageRank. Use this strategically:
299 
300- **Header nav links are strongest** — put your most important pages here
301- **Footer links pass less value** but still matter — good for comparison pages, location pages
302- **Sidebar links** help with section-level authority — good for blog categories, doc sections
303- **Breadcrumbs** provide structural signals to search engines — implement with schema markup
304- **Don't use JavaScript-only nav** — search engines need crawlable HTML links
305- **Use descriptive anchor text** — "Analytics Features" not just "Features"
306

Marketplace

Source from repo

Site Architecture

Plans and maps website page hierarchy, URL structure, navigation, and internal linking for SEO and usability.

coreyhaines31GitHub coreyhaines31Source repo Original GitHub link Publisher page

Files

Skill

n/a

Size

44.0 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

references/navigation-patterns.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown306 linesFree

references/navigation-patterns.md

1# Navigation Patterns
2 
3Detailed navigation patterns for different site types and contexts.
4 
5---
6 
7## Header Navigation
8 
9### Simple Header (4-6 items)
10 
11Best for: small businesses, simple SaaS, portfolios.
12 
13```
14[Logo]   Features   Pricing   Blog   About   [CTA Button]
15```
16 
17Rules:
18- Logo always links to homepage
19- CTA button is rightmost, visually distinct (filled button, contrasting color)
20- Items ordered by priority (most visited first)
21- Active page gets visual indicator (underline, bold, color)
22 
23### Mega Menu Header
24 
25Best for: SaaS with many features, e-commerce with categories, large content sites.
26 
27```
28[Logo]   Product ▾   Solutions ▾   Resources ▾   Pricing   Docs   [CTA]
29```
30 
31When "Product" is hovered/clicked:
32 
33```
34┌─────────────────────────────────────────────────┐
35│  Features           Platform        Integrations │
36│  ─────────          ─────────       ──────────── │
37│  Analytics           Security       Slack         │
38│  Automation          API            HubSpot       │
39│  Reporting           Compliance     Salesforce    │
40│  Dashboards                         Zapier        │
41│                                                   │
42│  [See all features →]                             │
43└─────────────────────────────────────────────────┘
44```
45 
46Mega menu rules:
47- 2-4 columns max
48- Group items logically (by feature area, use case, or audience)
49- Include a "See all" link at the bottom
50- Don't nest dropdowns inside mega menus
51- Show descriptions for items when labels alone aren't clear
52 
53### Split Navigation
54 
55Best for: apps with both marketing and product nav.
56 
57```
58[Logo]   Features   Pricing   Blog        [Login]   [Sign Up]
59├── Marketing nav (left) ──────┘          └── Auth nav (right) ──┤
60```
61 
62Right side handles authentication actions. Left side handles page navigation.
63 
64---
65 
66## Footer Navigation
67 
68### Column-Based Footer (Standard)
69 
70Best for: most sites. Organize links into 3-5 themed columns.
71 
72```
73┌──────────────────────────────────────────────────────────┐
74│                                                          │
75│  Product          Resources        Company       Legal   │
76│  ─────────        ──────────       ─────────     ─────   │
77│  Features         Blog             About         Privacy │
78│  Pricing          Guides           Careers       Terms   │
79│  Integrations     Templates        Contact       GDPR    │
80│  Changelog        Case Studies     Press                 │
81│  Security         Webinars         Partners              │
82│                                                          │
83│  [Logo]  © 2026 Company Name                             │
84│  Social: [Twitter] [LinkedIn] [GitHub]                   │
85│                                                          │
86└──────────────────────────────────────────────────────────┘
87```
88 
89### Minimal Footer
90 
91Best for: simple sites, landing pages.
92 
93```
94┌──────────────────────────────────────────────────────────┐
95│  [Logo]                                                  │
96│  © 2026 Company  ·  Privacy  ·  Terms  ·  Contact        │
97└──────────────────────────────────────────────────────────┘
98```
99 
100### Expanded Footer
101 
102Best for: sites using footer for SEO (comparison pages, location pages, resource links).
103 
104```
105┌──────────────────────────────────────────────────────────┐
106│  Product     Resources    Compare         Use Cases      │
107│  Features    Blog         vs Competitor A  For Startups  │
108│  Pricing     Guides       vs Competitor B  For Enterprise│
109│  API         Templates    vs Competitor C  For Agencies  │
110│                                                          │
111│  Integrations             Popular Posts                  │
112│  Slack       Zapier       How to Do X                    │
113│  HubSpot     Salesforce   Guide to Y                     │
114│                           Template: Z                    │
115│                                                          │
116│  [Logo]  © 2026  ·  Privacy  ·  Terms  ·  Security      │
117└──────────────────────────────────────────────────────────┘
118```
119 
120---
121 
122## Sidebar Navigation
123 
124### Documentation Sidebar
125 
126Persistent left sidebar with collapsible sections.
127 
128```
129Getting Started
130  ├── Installation
131  ├── Quick Start
132  └── Configuration
133 
134Guides
135  ├── Authentication
136  ├── Data Models
137  └── Deployment
138 
139API Reference
140  ├── REST API
141  │   ├── Users
142  │   ├── Projects
143  │   └── Webhooks
144  └── GraphQL
145 
146Examples
147  ├── Next.js
148  ├── Rails
149  └── Python
150 
151Changelog
152```
153 
154Rules:
155- Current page highlighted
156- Sections collapsible (expanded by default for active section)
157- Search at top of sidebar
158- "Previous / Next" page navigation at bottom of content area
159- Sticky on scroll (doesn't scroll away)
160 
161### Blog Category Sidebar
162 
163```
164Categories
165  ├── SEO (24)
166  ├── CRO (18)
167  ├── Content (15)
168  ├── Paid Ads (12)
169  └── Analytics (9)
170 
171Popular Posts
172  ├── How to Improve SEO
173  ├── Landing Page Guide
174  └── Analytics Setup
175 
176Newsletter
177  └── [Email signup form]
178```
179 
180---
181 
182## Breadcrumbs
183 
184### Standard Format
185 
186```
187Home > Features > Analytics
188Home > Blog > SEO Category > How to Do Keyword Research
189Home > Docs > API Reference > Authentication
190```
191 
192Rules:
193- Separator: `>` or `/` (be consistent)
194- Every segment is a link except the current page
195- Current page is plain text (not linked)
196- Don't include the current page if the title is already visible as an H1
197 
198### With Schema Markup
199 
200```html
201<nav aria-label="Breadcrumb">
202  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
203    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
204      <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
205      <meta itemprop="position" content="1" />
206    </li>
207    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
208      <a itemprop="item" href="/features"><span itemprop="name">Features</span></a>
209      <meta itemprop="position" content="2" />
210    </li>
211    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
212      <span itemprop="name">Analytics</span>
213      <meta itemprop="position" content="3" />
214    </li>
215  </ol>
216</nav>
217```
218 
219Or use JSON-LD (recommended):
220 
221```json
222{
223  "@context": "https://schema.org",
224  "@type": "BreadcrumbList",
225  "itemListElement": [
226    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
227    { "@type": "ListItem", "position": 2, "name": "Features", "item": "https://example.com/features" },
228    { "@type": "ListItem", "position": 3, "name": "Analytics" }
229  ]
230}
231```
232 
233---
234 
235## Mobile Navigation
236 
237### Hamburger Menu
238 
239Standard for mobile. All nav items collapse into a menu icon.
240 
241Rules:
242- Hamburger icon (three lines) top-right or top-left
243- Full-screen or slide-out panel
244- CTA button visible without opening the menu (sticky header)
245- Search accessible from mobile menu
246- Accordion pattern for nested items
247 
248### Bottom Tab Bar
249 
250Best for: web apps, PWAs, mobile-first products.
251 
252```
253┌──────────────────────────────────────┐
254│                                      │
255│           [Page Content]             │
256│                                      │
257├──────────────────────────────────────┤
258│  Home    Search    Create    Profile │
259│   🏠       🔍        ➕       👤    │
260└──────────────────────────────────────┘
261```
262 
263Rules:
264- 3-5 items max
265- Icons + labels (not just icons)
266- Active state clearly indicated
267- Most important action in the center
268 
269---
270 
271## Anti-Patterns
272 
273### Things to Avoid
274 
275- **Too many header items** (8+): causes decision paralysis, nav becomes unreadable on smaller screens
276- **Dropdown inception**: dropdowns inside dropdowns inside dropdowns
277- **Mystery icons**: icons without labels — users don't know what they mean
278- **Hidden primary nav**: burying important pages in hamburger menus on desktop
279- **Inconsistent nav between pages**: nav should be identical across the site (except app vs marketing)
280- **No mobile consideration**: desktop nav that doesn't translate to mobile
281- **Footer as sitemap dump**: 50+ links in the footer with no organization
282- **Breadcrumbs that don't match URLs**: breadcrumb says "Products > Widget" but URL is `/shop/widget-pro`
283 
284### Common Fixes
285 
286| Problem | Fix |
287|---------|-----|
288| Too many nav items | Group into dropdowns or mega menus |
289| Users can't find pages | Add search, improve labeling |
290| High bounce from nav | Simplify choices, use clearer labels |
291| SEO pages not linked | Add to footer or resource sections |
292| Mobile nav is broken | Test on real devices, use hamburger pattern |
293 
294---
295 
296## Navigation for SEO
297 
298Internal links in navigation pass PageRank. Use this strategically:
299 
300- **Header nav links are strongest** — put your most important pages here
301- **Footer links pass less value** but still matter — good for comparison pages, location pages
302- **Sidebar links** help with section-level authority — good for blog categories, doc sections
303- **Breadcrumbs** provide structural signals to search engines — implement with schema markup
304- **Don't use JavaScript-only nav** — search engines need crawlable HTML links
305- **Use descriptive anchor text** — "Analytics Features" not just "Features"
306

Site Architecture

references/navigation-patterns.md

Preparing the source view

Site Architecture

references/navigation-patterns.md