@sarjallab09/figma-intelligence 1.0.0

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/navbar.ts

@@ -0,0 +1,264 @@
+/**
+ * navbar.ts — Gold-standard design knowledge for Navbar components
+ */
+import type { ComponentKnowledge } from "../types.js";
+
+export const navbarKnowledge: ComponentKnowledge = {
+  description:
+    "Top-level horizontal navigation bar | Site-wide header and branding | AppBar/Header pattern",
+
+  stateSpecifications: [
+    {
+      state: "Default",
+      visualChange: "Full-width bar with logo, navigation items, and action slots on a solid or transparent background",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "Resting state — navbar is visible at the top of the viewport with all items accessible",
+    },
+    {
+      state: "Scrolled",
+      visualChange: "Background becomes opaque (if transparent), elevation shadow appears via $navbar-shadow token",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "User has scrolled past the initial viewport — navbar gains visual separation from content below",
+    },
+    {
+      state: "Mobile Collapsed",
+      visualChange: "Navigation items hidden; hamburger menu icon visible; logo and essential actions remain",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "Viewport is below the mobile breakpoint — full navigation is collapsed into a menu trigger",
+    },
+    {
+      state: "Mobile Expanded",
+      visualChange: "Drawer or full-height overlay slides in from the side or top; nav items displayed vertically",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "User has activated the hamburger menu — full navigation is accessible in a mobile-friendly layout",
+    },
+    {
+      state: "Active Item",
+      visualChange: "Currently active navigation item has a bottom border indicator or filled background highlight",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "Indicates which top-level section the user is currently viewing",
+    },
+    {
+      state: "Hover Item",
+      visualChange: "Hovered navigation item shows subtle background tint or underline indicator",
+      opacity: "1",
+      cursorWeb: "pointer",
+      usage: "Mouse cursor enters a navigation item's hit area",
+    },
+    {
+      state: "Focus Item",
+      visualChange: "2px focus ring offset by 2px from the navigation item, using $focus-ring token",
+      opacity: "1",
+      cursorWeb: "pointer",
+      usage: "A navigation item receives keyboard focus via Tab key",
+    },
+  ],
+
+  propertyDescriptions: {
+    logo: "Brand logo element rendered in the leading position; accepts an image component, SVG, or text logotype",
+    items: "Array of navigation item entries, each containing a label, href, and optional icon or submenu",
+    actions: "Trailing slot for action elements — typically search, notifications, user avatar, or CTA buttons",
+    sticky: "When true the navbar remains fixed at the top of the viewport during scroll (position: sticky or fixed)",
+    transparent: "When true the navbar has a transparent background in its default state; becomes opaque on scroll",
+    elevation: "Shadow depth level applied to the navbar — 'none', 'low', 'medium'; overridden by scrolled state",
+    mobileBreakpoint: "Viewport width threshold below which the navbar collapses to mobile layout (default: 768px)",
+    onMenuToggle: "Callback fired when the mobile hamburger menu is opened or closed; receives the new open state",
+    activeItem: "Index or identifier of the currently active navigation item for visual highlighting",
+    maxWidth: "Maximum content width within the navbar — content is centered and constrained (default: 1280px)",
+    skipLink: "When true, a visually hidden 'Skip to content' link is rendered as the first focusable element",
+    position: "Positioning strategy — 'static', 'sticky', or 'fixed' — controls how the navbar behaves during scroll",
+  },
+
+  sizeSpecifications: [
+    {
+      size: "Compact",
+      height: "48px",
+      paddingLR: "16px",
+      fontSize: "13px",
+      iconSize: "18px",
+      borderRadius: "0px",
+    },
+    {
+      size: "Default",
+      height: "56px",
+      paddingLR: "24px",
+      fontSize: "14px",
+      iconSize: "20px",
+      borderRadius: "0px",
+    },
+    {
+      size: "Large",
+      height: "64px",
+      paddingLR: "32px",
+      fontSize: "16px",
+      iconSize: "24px",
+      borderRadius: "0px",
+    },
+  ],
+
+  designTokenBindings: [
+    {
+      property: "Background",
+      tokenName: "$navbar-bg",
+      role: "Navbar surface fill color — typically white or dark depending on theme",
+      fallback: "#FFFFFF",
+    },
+    {
+      property: "Text Color",
+      tokenName: "$navbar-text",
+      role: "Navigation item and brand text color",
+      fallback: "#1D2939",
+    },
+    {
+      property: "Border Bottom",
+      tokenName: "$navbar-border",
+      role: "Subtle 1px bottom border separating navbar from page content",
+      fallback: "#EAECF0",
+    },
+    {
+      property: "Scroll Shadow",
+      tokenName: "$navbar-shadow",
+      role: "Elevation shadow applied when the user scrolls past the top of the page",
+      fallback: "0 1px 3px rgba(16,24,40,0.1), 0 1px 2px rgba(16,24,40,0.06)",
+    },
+    {
+      property: "Mobile Overlay",
+      tokenName: "$navbar-mobile-overlay",
+      role: "Semi-transparent backdrop behind the mobile navigation drawer",
+      fallback: "rgba(16,24,40,0.6)",
+    },
+    {
+      property: "Focus Ring",
+      tokenName: "$focus-ring",
+      role: "Keyboard focus indicator ring for navigation items and action buttons",
+      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
+    },
+    {
+      property: "Font Family",
+      tokenName: "$font-family-sans",
+      role: "Navigation item typeface",
+      fallback: "Inter, system-ui, sans-serif",
+    },
+    {
+      property: "Active Indicator",
+      tokenName: "$navbar-active-indicator",
+      role: "Color of the bottom border or background highlight on the active navigation item",
+      fallback: "#2563EB",
+    },
+    {
+      property: "Transition",
+      tokenName: "$transition-interactive",
+      role: "Smooth transitions for scroll shadow, mobile drawer, and hover states",
+      fallback: "200ms ease-in-out",
+    },
+  ],
+
+  structureRules: [
+    "Outer wrapper uses role='banner' for the site-wide header; contains a <nav> element for the navigation items",
+    "Container uses horizontal Auto Layout (flexbox) with space-between distribution and center vertical alignment",
+    "Logo slot is the first child; navigation items occupy the center; actions slot is the trailing child",
+    "Navigation items are rendered as an <ul>/<li> list within the <nav> element",
+    "Mobile hamburger button is visually hidden on desktop and displayed only below the mobile breakpoint",
+    "Mobile drawer renders as a separate layer with a backdrop overlay that closes on click-outside or Escape",
+    "Skip-to-content link is the first focusable element in the DOM, visually hidden until focused",
+  ],
+
+  typeHierarchyRules: [
+    "Navigation item weight is Medium (500) for default items; Semi-Bold (600) for the active item",
+    "Text uses sentence case for navigation labels — match section titles exactly",
+    "Active indicator (bottom border or background) is 2-3px thick using $navbar-active-indicator token",
+    "Logo text uses the brand typeface or is replaced by an image — never both simultaneously",
+    "No underline on navigation items — underline is reserved for inline text links",
+    "Mobile drawer items use a larger font-size (16px minimum) for touch readability",
+  ],
+
+  interactionRules: [
+    { event: "Click Nav Item", trigger: "pointerup on a navigation item", action: "Navigate to the section/page; update active item indicator" },
+    { event: "Hover Nav Item", trigger: "pointerenter on a navigation item", action: "Show subtle background tint or underline indicator" },
+    { event: "Focus Nav Item", trigger: "Tab key or focus()", action: "Show focus ring; do not trigger navigation" },
+    { event: "Keydown Enter", trigger: "Enter key while a nav item is focused", action: "Navigate to the section/page (same as click)" },
+    { event: "Hamburger Click", trigger: "pointerup on mobile menu button", action: "Toggle mobile drawer open/closed; fire onMenuToggle callback" },
+    { event: "Escape on Drawer", trigger: "Escape key while mobile drawer is open", action: "Close drawer; return focus to hamburger button" },
+    { event: "Click Overlay", trigger: "pointerup on the mobile backdrop overlay", action: "Close the mobile drawer" },
+    { event: "Scroll", trigger: "Window scroll passes threshold (default: 10px)", action: "Add elevation shadow and opaque background if transparent" },
+  ],
+
+  contentGuidance: [
+    "Limit top-level navigation items to 5-7 for cognitive manageability — use dropdowns for deeper hierarchy",
+    "Labels should be concise (one to two words) and clearly describe the destination section",
+    "Place the most important navigation items first (left-to-right in LTR locales)",
+    "Reserve the actions slot for utility actions (search, profile, settings) — not primary navigation",
+    "Always include a 'Skip to content' link for keyboard and screen reader users",
+    "Logo should link to the homepage — this is a universal convention users expect",
+    "Avoid placing too many action items in the trailing slot — prioritize the top 2-3 actions",
+    "Mobile drawer should mirror the desktop navigation order for consistency",
+  ],
+
+  responsiveBehaviour: [
+    { breakpoint: "Mobile (<768px)", behavior: "Navigation items collapse into hamburger menu; logo and 1-2 essential actions remain visible; drawer opens full-width or as side panel" },
+    { breakpoint: "Tablet (768-1023px)", behavior: "Navigation items may remain visible if count is 4 or fewer; otherwise collapse to hamburger; compact height used" },
+    { breakpoint: "Desktop (1024-1439px)", behavior: "Full horizontal navigation visible; all items and actions displayed inline; standard spacing" },
+    { breakpoint: "Ultra-wide (>=1440px)", behavior: "Navbar content constrained to maxWidth and centered; background extends full width; no proportional scaling" },
+  ],
+
+  accessibilitySpec: {
+    intro:
+      "The navbar is typically the first interactive region users encounter. Proper landmark roles, skip links, and keyboard navigation are essential for an accessible experience.",
+    requirements: [
+      { requirement: "Banner Landmark", level: "A", notes: "Use role='banner' on the header wrapper to establish a page-level landmark for assistive technology" },
+      { requirement: "Navigation Landmark", level: "A", notes: "Wrap navigation items in <nav> with aria-label='Main navigation' to distinguish from other nav regions" },
+      { requirement: "Skip Link", level: "A", notes: "Provide a 'Skip to main content' link as the first focusable element; visible on focus for keyboard users" },
+      { requirement: "Keyboard Navigation", level: "A", notes: "All navigation items and actions reachable via Tab; Enter activates links; Escape closes mobile drawer" },
+      { requirement: "Mobile Drawer Focus Trap", level: "AA", notes: "When mobile drawer is open, focus is trapped within the drawer; Tab cycles through drawer items only" },
+      { requirement: "Contrast Ratio", level: "AA", notes: "Navigation text to background: 4.5:1; active indicator to background: 3:1 non-text contrast" },
+      { requirement: "Hamburger Button Label", level: "A", notes: "Mobile menu button must have aria-label='Open menu' and aria-expanded reflecting open/closed state" },
+    ],
+    outro: [
+      "When the mobile drawer closes, return focus to the hamburger button to maintain the user's place",
+      "Ensure scroll-triggered visual changes (shadow, opacity) do not cause content reflow or layout shifts",
+    ],
+  },
+
+  qaAcceptanceCriteria: [
+    { check: "Visual Regression", platform: "All", expectedResult: "Navbar renders pixel-perfect against baseline for each size and state (default, scrolled, mobile)" },
+    { check: "Sticky Behavior", platform: "Web", expectedResult: "Navbar remains fixed at top during scroll; content scrolls beneath it without overlap issues" },
+    { check: "Scroll Shadow", platform: "Web", expectedResult: "Shadow appears smoothly after scrolling past threshold; disappears when scrolled back to top" },
+    { check: "Active Item", platform: "All", expectedResult: "Active navigation item displays indicator; updates correctly on route change" },
+    { check: "Hover State", platform: "Web", expectedResult: "Navigation items show background tint or underline on hover with smooth transition" },
+    { check: "Focus State", platform: "Web", expectedResult: "Focus ring visible on Tab for all interactive elements; hidden on mouse click (focus-visible)" },
+    { check: "Mobile Collapse", platform: "Mobile", expectedResult: "Navigation items hidden below mobileBreakpoint; hamburger icon visible and functional" },
+    { check: "Mobile Drawer", platform: "Mobile", expectedResult: "Drawer opens with animation; overlay visible; items navigable; closes on Escape or overlay click" },
+    { check: "Skip Link", platform: "Web", expectedResult: "Skip link is hidden until focused; on activation, focus moves to main content region" },
+    { check: "Screen Reader", platform: "Web", expectedResult: "Announces 'banner' landmark, 'Main navigation', item count, and active item designation" },
+    { check: "Keyboard Navigation", platform: "Web", expectedResult: "Tab moves through items in order; Enter activates; focus trapped in open mobile drawer" },
+    { check: "RTL Support", platform: "Web", expectedResult: "Logo moves to right; items reverse order; hamburger icon on left in RTL locales" },
+    { check: "Contrast", platform: "All", expectedResult: "All text and indicator colors pass 4.5:1 text and 3:1 non-text contrast ratios" },
+  ],
+
+  dos: [
+    "Use role='banner' for the site-wide header and <nav> with aria-label for the navigation region",
+    "Always provide a 'Skip to content' link as the first focusable element",
+    "Keep top-level navigation items to 5-7 entries for scannability",
+    "Ensure the logo links to the homepage as users universally expect",
+    "Add elevation (shadow) on scroll to provide visual separation from scrolling content",
+    "Trap focus within the mobile drawer when it is open to prevent tabbing to obscured content",
+    "Use the sticky or fixed position for the navbar to maintain persistent access to navigation",
+    "Mirror the desktop navigation order in the mobile drawer for consistency",
+  ],
+
+  donts: [
+    "Do not use the navbar for secondary or contextual navigation — use a sidebar or tabs component instead",
+    "Do not remove the focus outline on navigation items without providing an equally visible alternative",
+    "Do not auto-hide the navbar on scroll-down without a clear mechanism to bring it back on scroll-up",
+    "Do not place more than 3 action items in the trailing slot — prioritize ruthlessly",
+    "Do not use the navbar background color as the sole indicator of scrolled state — add shadow or border",
+    "Do not allow the mobile drawer to open without a backdrop overlay to provide context separation",
+    "Do not make the hamburger menu button smaller than 44x44px touch target",
+    "Do not use different navigation structures between desktop and mobile — items must match",
+  ],
+};

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/navigation.ts

@@ -0,0 +1,251 @@
+/**
+ * navigation.ts — Gold-standard design knowledge for Navigation Bar / Menu components
+ */
+import type { ComponentKnowledge } from "../types.js";
+
+export const navigationKnowledge: ComponentKnowledge = {
+  description:
+    "Wayfinding structure | Site navigation bar | Primary route controller",
+
+  stateSpecifications: [
+    {
+      state: "Default",
+      visualChange: "Horizontal bar with navigation items displayed as text links or icon+text combinations",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "Standard navigation bar displaying available routes",
+    },
+    {
+      state: "Item Hover",
+      visualChange: "Hovered nav item shows subtle background highlight or underline preview",
+      opacity: "1",
+      cursorWeb: "pointer",
+      usage: "Cursor enters a navigation item's hit area",
+    },
+    {
+      state: "Item Active",
+      visualChange: "Active item has a bold label, accent-colored underline/indicator, and distinct background",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "The navigation item matches the current page or route",
+    },
+    {
+      state: "Item Focus",
+      visualChange: "2px focus ring visible around the focused navigation item",
+      opacity: "1",
+      cursorWeb: "pointer",
+      usage: "Navigation item receives keyboard focus via Tab key",
+    },
+    {
+      state: "Mobile Collapsed",
+      visualChange: "Navigation items hidden; hamburger menu icon visible in the top bar",
+      opacity: "1",
+      cursorWeb: "pointer",
+      usage: "Viewport is below the mobile breakpoint; nav is collapsed to save space",
+    },
+    {
+      state: "Mobile Expanded",
+      visualChange: "Full-height overlay or slide-out drawer displaying navigation items vertically",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "User opened the hamburger menu; all nav items are visible in a drawer",
+    },
+    {
+      state: "Submenu Open",
+      visualChange: "Dropdown panel or flyout appears below/beside the parent nav item with nested links",
+      opacity: "1",
+      cursorWeb: "default",
+      usage: "User hovered or clicked a nav item that has child routes",
+    },
+  ],
+
+  propertyDescriptions: {
+    items: "Array of navigation item objects with label, href/route, icon, and optional children for submenus",
+    orientation: "Layout direction — Horizontal (top nav bar) or Vertical (sidebar navigation)",
+    activeItem: "Identifier of the currently active navigation item matching the current route",
+    collapsible: "When true, the navigation collapses to a hamburger menu below the mobile breakpoint",
+    logo: "Optional branding slot rendered at the leading edge of the navigation bar",
+    actions: "Optional trailing slot for utility actions (search, notifications, profile avatar)",
+    sticky: "When true, the navigation bar remains fixed at the top of the viewport during scroll",
+  },
+
+  sizeSpecifications: [
+    {
+      size: "Compact",
+      height: "48px",
+      paddingLR: "16px",
+      fontSize: "13px",
+      iconSize: "18px",
+      borderRadius: "0px",
+    },
+    {
+      size: "Default",
+      height: "56px",
+      paddingLR: "24px",
+      fontSize: "14px",
+      iconSize: "20px",
+      borderRadius: "0px",
+    },
+    {
+      size: "Large",
+      height: "64px",
+      paddingLR: "32px",
+      fontSize: "15px",
+      iconSize: "22px",
+      borderRadius: "0px",
+    },
+    {
+      size: "Sidebar Item",
+      height: "40px",
+      paddingLR: "12px",
+      fontSize: "14px",
+      iconSize: "20px",
+      borderRadius: "8px",
+    },
+    {
+      size: "Mobile Drawer Item",
+      height: "48px",
+      paddingLR: "16px",
+      fontSize: "16px",
+      iconSize: "22px",
+      borderRadius: "0px",
+    },
+  ],
+
+  designTokenBindings: [
+    {
+      property: "Bar Background",
+      tokenName: "$nav-bg",
+      role: "Background fill for the navigation bar container",
+      fallback: "#FFFFFF",
+    },
+    {
+      property: "Item Text",
+      tokenName: "$nav-item-text",
+      role: "Default navigation item label color",
+      fallback: "#4B5563",
+    },
+    {
+      property: "Item Text Active",
+      tokenName: "$nav-item-text-active",
+      role: "Active navigation item label color — higher contrast or accent",
+      fallback: "#111827",
+    },
+    {
+      property: "Active Indicator",
+      tokenName: "$nav-active-indicator",
+      role: "Accent color for the active item underline or sidebar highlight",
+      fallback: "#2563EB",
+    },
+    {
+      property: "Item Hover Bg",
+      tokenName: "$nav-item-hover",
+      role: "Subtle background fill on navigation item hover",
+      fallback: "#F3F4F6",
+    },
+    {
+      property: "Border Bottom",
+      tokenName: "$nav-border",
+      role: "Bottom border separating the nav bar from page content",
+      fallback: "#E5E7EB",
+    },
+    {
+      property: "Focus Ring",
+      tokenName: "$focus-ring",
+      role: "Keyboard focus indicator ring for nav items",
+      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
+    },
+  ],
+
+  structureRules: [
+    "Navigation bar uses a <nav> element with an aria-label (e.g. 'Main navigation')",
+    "Items are rendered as an unordered list (<ul>) with each item in an <li> containing an <a> or <button>",
+    "Horizontal layout uses Auto Layout with space-between for logo/items/actions sections",
+    "Active item indicator (underline or side bar) is a pseudo-element or child element — not a border",
+    "Mobile hamburger button is positioned in the top-right or top-left of the nav bar",
+    "Mobile drawer overlay uses a semi-transparent backdrop (z-index above page content, below modals)",
+    "Submenus are rendered as nested <ul> elements positioned absolutely below or beside the parent item",
+  ],
+
+  typeHierarchyRules: [
+    "Navigation item labels use Medium weight (500) for default state and Semi-Bold (600) for active state",
+    "Text uses sentence case — 'Getting started', not 'Getting Started' or 'GETTING STARTED'",
+    "Navigation items are single-line only; long labels should be shortened, never wrapped",
+    "Logo text or branding uses a distinct typeface or weight to differentiate from nav items",
+    "Submenu items use the same font size as primary items or one step smaller",
+  ],
+
+  interactionRules: [
+    { event: "Item Click", trigger: "pointerup on navigation item", action: "Navigate to the associated route; update active state" },
+    { event: "Submenu Hover", trigger: "pointerenter on parent item with children", action: "Open submenu dropdown after a 150ms delay to prevent flash on pass-through" },
+    { event: "Hamburger Click", trigger: "pointerup on mobile menu button", action: "Toggle mobile drawer open/closed; trap focus within drawer when open" },
+    { event: "Escape Key", trigger: "Escape while mobile drawer or submenu is open", action: "Close the drawer/submenu; return focus to the trigger element" },
+    { event: "Tab Navigation", trigger: "Tab key through nav items", action: "Move focus linearly through visible items; skip hidden submenus" },
+    { event: "Arrow Keys", trigger: "Arrow keys while nav is focused", action: "Horizontal: Left/Right for top nav; Vertical: Up/Down for sidebar and submenus" },
+    { event: "Skip Link", trigger: "First Tab press on the page", action: "Reveal 'Skip to main content' link before the navigation" },
+  ],
+
+  contentGuidance: [
+    "Limit primary navigation to 5-7 items — more causes cognitive overload and layout issues",
+    "Use clear, concise labels that describe the destination: 'Products', 'Pricing', 'Documentation'",
+    "Avoid generic labels like 'More', 'Misc', or 'Other' — they provide no wayfinding value",
+    "Group related items in submenus rather than overcrowding the primary level",
+    "Icons should be used consistently — either all items have icons or none do",
+    "Mobile drawer should show all items including those in submenus, with indentation for hierarchy",
+  ],
+
+  responsiveBehaviour: [
+    { breakpoint: "Mobile (<768px)", behavior: "Collapse to hamburger menu with full-height drawer; logo and key actions remain visible" },
+    { breakpoint: "Tablet (768-1023px)", behavior: "May show priority items inline with overflow in a 'More' dropdown" },
+    { breakpoint: "Desktop (1024-1439px)", behavior: "Full horizontal navigation with all primary items visible inline" },
+    { breakpoint: "Ultra-wide (>=1440px)", behavior: "Navigation width capped at max-width container; centered on the page" },
+    { breakpoint: "Sidebar Mode", behavior: "Vertical navigation docked to the left; may collapse to icon-only rail on narrow viewports" },
+  ],
+
+  accessibilitySpec: {
+    intro:
+      "Navigation is the primary wayfinding mechanism and must be fully accessible via keyboard, screen readers, and assistive technologies.",
+    requirements: [
+      { requirement: "Landmark Role", level: "A", notes: "Use <nav> element with aria-label distinguishing multiple nav regions (e.g. 'Main', 'Footer')" },
+      { requirement: "Skip Navigation", level: "A", notes: "Provide a 'Skip to main content' link as the first focusable element on the page" },
+      { requirement: "Current Page", level: "A", notes: "Active item uses aria-current='page' to announce the current location" },
+      { requirement: "Keyboard Navigation", level: "A", notes: "Tab moves through items; arrow keys navigate within menus; Escape closes submenus" },
+      { requirement: "Submenu Disclosure", level: "A", notes: "Parent items with submenus use aria-expanded and aria-haspopup='menu'" },
+      { requirement: "Contrast Ratio", level: "AA", notes: "Item text-to-background: 4.5:1; active indicator: 3:1 non-text contrast" },
+      { requirement: "Focus Trapping", level: "AA", notes: "Mobile drawer traps focus within the drawer until it is closed" },
+    ],
+    outro: [
+      "Ensure mobile drawer close button is the first or last focusable element for easy dismissal",
+      "Announce route changes to screen readers via an aria-live region or page title update",
+    ],
+  },
+
+  qaAcceptanceCriteria: [
+    { check: "Active Indicator", platform: "All", expectedResult: "Current page item shows accent underline/highlight; other items remain in default state" },
+    { check: "Mobile Collapse", platform: "Mobile", expectedResult: "Nav collapses to hamburger below breakpoint; drawer opens/closes smoothly" },
+    { check: "Sticky Behavior", platform: "Web", expectedResult: "Nav bar remains fixed during scroll; no content hidden behind it (scroll padding applied)" },
+    { check: "Submenu Open/Close", platform: "Web", expectedResult: "Submenu opens on hover/click with delay; closes on mouse leave or Escape" },
+    { check: "Keyboard Flow", platform: "Web", expectedResult: "Tab traverses all items; arrow keys work within submenus; Escape closes menus" },
+    { check: "Skip Link", platform: "Web", expectedResult: "Skip link visible on first Tab; activating it moves focus to main content area" },
+    { check: "Screen Reader", platform: "Web", expectedResult: "Announces nav landmark, current page, expanded/collapsed submenu states" },
+  ],
+
+  dos: [
+    "Use a <nav> landmark with a descriptive aria-label for every navigation region",
+    "Include a 'Skip to main content' link as the first focusable element",
+    "Mark the active item with aria-current='page' and a visual indicator",
+    "Collapse to a hamburger menu on mobile with a full-height drawer",
+    "Use sticky positioning so the nav remains accessible during long page scrolls",
+    "Group submenus logically and limit nesting to two levels maximum",
+  ],
+
+  donts: [
+    "Do not use more than 7 primary navigation items — prioritize and group into submenus",
+    "Do not remove the active state indicator — users need to know where they are",
+    "Do not nest menus more than 2 levels deep — it creates confusion and accessibility issues",
+    "Do not use the navigation bar for non-navigational actions like form submission",
+    "Do not auto-collapse sidebar navigation without providing a toggle to expand it",
+    "Do not use different interaction patterns (hover vs click) for submenus across the same nav",
+    "Do not place the navigation below the fold or in unexpected positions",
+  ],
+};