Navigation Patterns

Detailed navigation patterns for different site types and contexts. Best for: small businesses, simple SaaS, portfolios. Logo always links to homepage CTA butto

ContentCRO
bycoreyhaines311,123 words

What is Navigation Patterns?

What this skill does

Navigation Patterns provides detailed guidance on structuring site navigation tailored to different website types and user contexts. It covers footer layouts, sidebar menus, breadcrumbs, and mobile navigation, balancing usability with SEO and content priorities. The skill emphasizes practical layouts such as column-based footers for most sites, minimal footers for landing pages, and expanded footers that support SEO through additional resource links.

Who it's for

This skill is designed for small business owners, simple SaaS product teams, and portfolio site creators who need clear, efficient navigation without complex UI overhead. Growth leads and CRO specialists working on conversion-driven sites will find it valuable for improving user pathways and reducing friction. Agencies managing straightforward client sites can use these patterns to quickly implement navigation that aligns with best practices and user expectations.

Key workflows

Practitioners typically start by selecting the footer navigation style that matches their site’s complexity and goals, such as a minimal footer for landing pages or an SEO-focused expanded footer for resource-heavy sites. Next, they design sidebar navigation for documentation or blog categories, ensuring sections are collapsible and clearly highlight the current page to aid orientation. Breadcrumb trails are then implemented with consistent separators and link structures to support user backtracking and SEO schema markup. Finally, mobile navigation patterns are applied, choosing between hamburger menus or bottom tab bars depending on the product’s device focus.

Common questions

How do I decide between a minimal and expanded footer? Use a minimal footer for simple or single-purpose sites and an expanded footer when you need to boost SEO with many internal links. Can I customize breadcrumb separators? Yes, but maintain consistency across the site by choosing either “>” or “/” as the separator. Should mobile navigation always use a hamburger menu? Not necessarily; bottom tab bars suit mobile-first web apps where quick access to core actions is essential.

How to use in Metaflow

Attach the Navigation Patterns skill to tasks involving site layout or UI strategy to receive structured guidance on navigation components appropriate for your site type and goals. Metaflow will help you apply best-practice patterns for footers, sidebars, breadcrumbs, and mobile menus, improving user experience and SEO metrics. This skill integrates seamlessly into workflows focused on content organization and CRO optimization, making navigation decisions clearer and more actionable.

For broader context, see our roundup of claude marketing skills, and read common Claude Code content mistakes for related setup guidance.

Related skills

Schema Markup

When the user wants to add, fix, or optimize schema markup and structured data on their site. Also use when the user mentions "schema markup," "structured data," "JSON-LD," "rich snippets," "schema.org," "FAQ schema," "product schema," "review schema," or "breadcrumb schema." For broader SEO issues, see seo-audit.

View →

Form Conversion Optimization

When the user wants to optimize any form that is NOT signup/registration — including lead capture forms, contact forms, demo request forms, application forms, survey forms, or checkout forms. Also use when the user mentions "form optimization," "lead form conversions," "form friction," "form fields," "form completion rate," "contact form," "nobody fills out our form," "form abandonment," "too many fields," "demo request form," or "lead form isn't converting." Use this for any non-signup form tha

View →

Blog Writer

Create category-aware, AEO-optimized blog posts for Lightfast. Use when writing technology deep-dives, company announcements, or product launches.

View →

Content Brief

Content brief template and creation methodology for SEO-optimized content. Use when preparing briefs for writers or planning new content pieces.

View →

Content Research

Create authentic, research-backed content that sounds human-written AND is optimized to appear in AI search results (Perplexity, ChatGPT, Claude, Gemini). Alway

View →

Programmatic SEO

When the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pages," "[keyword] + [city] pages," "comparison pages," "integration pages," or "building many pages for SEO." For auditing existing SEO issues, see seo-audit.

View →