# 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.