Julian lechnerandClaude Opus 5.5
c14101e60d
Keep the decision steps in SKILL.md and move catalogs, examples, and checklists verbatim to references/ to reduce the context cost of loading the skill. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
38 lines
1.3 KiB
Markdown
38 lines
1.3 KiB
Markdown
# Navigation Design
|
|
|
|
## Navigation Types
|
|
|
|
| Nav Type | Purpose | Placement |
|
|
|----------|---------|-----------|
|
|
| Header nav | Primary navigation, always visible | Top of every page |
|
|
| Dropdown menus | Organize sub-pages under parent | Expands from header items |
|
|
| Footer nav | Secondary links, legal, sitemap | Bottom of every page |
|
|
| Sidebar nav | Section navigation (docs, blog) | Left side within a section |
|
|
| Breadcrumbs | Show current location in hierarchy | Below header, above content |
|
|
| Contextual links | Related content, next steps | Within page content |
|
|
|
|
## Header Navigation Rules
|
|
|
|
- **4-7 items max** in the primary nav (more causes decision paralysis)
|
|
- **CTA button** goes rightmost (e.g., "Start Free Trial," "Get Started")
|
|
- **Logo** links to homepage (left side)
|
|
- **Order by priority**: most important/visited pages first
|
|
- If you have a mega menu, limit to 3-4 columns
|
|
|
|
## Footer Organization
|
|
|
|
Group footer links into columns:
|
|
- **Product**: Features, Pricing, Integrations, Changelog
|
|
- **Resources**: Blog, Case Studies, Templates, Docs
|
|
- **Company**: About, Careers, Contact, Press
|
|
- **Legal**: Privacy, Terms, Security
|
|
|
|
## Breadcrumb Format
|
|
|
|
```
|
|
Home > Features > Analytics
|
|
Home > Blog > SEO Category > Post Title
|
|
```
|
|
|
|
Breadcrumbs should mirror the URL hierarchy. Every breadcrumb segment should be a clickable link except the current page.
|