1"use strict";(self.webpackChunktheuxshop=self.webpackChunktheuxshop||[]).push([[3305],{6245:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>h,contentTitle:()=>d,default:()=>p,frontMatter:()=>c,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"patterns/navigation","title":"Navigation Patterns","description":"Primary, secondary, and mobile navigation patterns with accessibility requirements.","source":"@site/.tmp/docs-published/patterns/navigation.mdx","sourceDirName":"patterns","slug":"/patterns/navigation","permalink":"/patterns/navigation","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"id":"navigation","title":"Navigation Patterns","description":"Primary, secondary, and mobile navigation patterns with accessibility requirements.","sidebar_position":2},"sidebar":"patternsSidebar","previous":{"title":"Patterns","permalink":"/patterns"},"next":{"title":"Forms Patterns","permalink":"/patterns/forms"}}');var t=i(4848),a=i(8453),r=i(9176),l=i(5920),o=i(5388);const c={id:"navigation",title:"Navigation Patterns",description:"Primary, secondary, and mobile navigation patterns with accessibility requirements.",sidebar_position:2},d="Navigation Patterns",h={},u=[{value:"Primary navigation",id:"primary-navigation",level:2},{value:"Horizontal top navigation",id:"horizontal-top-navigation",level:3},{value:"Vertical sidebar navigation",id:"vertical-sidebar-navigation",level:3},{value:"Mobile navigation",id:"mobile-navigation",level:2},{value:"Hamburger menu",id:"hamburger-menu",level:3},{value:"Bottom navigation (mobile)",id:"bottom-navigation-mobile",level:3},{value:"Tab bar",id:"tab-bar",level:3},{value:"Secondary navigation",id:"secondary-navigation",level:2},{value:"Breadcrumbs",id:"breadcrumbs",level:3},{value:"In-page navigation / Table of contents",id:"in-page-navigation--table-of-contents",level:3},{value:"Navigation anti-patterns",id:"navigation-anti-patterns",level:2},{value:"Mystery meat navigation",id:"mystery-meat-navigation",level:3},{value:"Hover-dependent navigation",id:"hover-dependent-navigation",level:3},{value:"Deep nesting",id:"deep-nesting",level:3},{value:"Inconsistent placement",id:"inconsistent-placement",level:3},{value:"Overcrowded navigation",id:"overcrowded-navigation",level:3},{value:"Responsive navigation transitions",id:"responsive-navigation-transitions",level:2},{value:"Breaking points",id:"breaking-points",level:3},{value:"Graceful degradation",id:"graceful-degradation",level:3},{value:"Testing transitions",id:"testing-transitions",level:3}];function x(e){const n={code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"navigation-patterns",children:"Navigation Patterns"})}),"\n",(0,t.jsx)(n.p,{children:"Navigation is how users find their way through your product. Good navigation feels obvious; bad navigation creates confusion and frustration. This document covers common navigation patterns, when to use them, and how to implement them accessibly."}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.em,{children:"Last updated: April 2025"})}),"\n",(0,t.jsx)(n.h2,{id:"primary-navigation",children:"Primary navigation"}),"\n",(0,t.jsx)(n.p,{children:"Primary navigation provides access to the main sections of a site or application."}),"\n",(0,t.jsx)(n.h3,{id:"horizontal-top-navigation",children:"Horizontal top navigation"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Description"}),": Navigation items arranged horizontally, typically at the top of the page."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"When to use"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Sites with 4-8 primary destinations"}),"\n",(0,t.jsx)(n.li,{children:"When horizontal space is available"}),"\n",(0,t.jsx)(n.li,{children:"Desktop-focused experiences"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Accessibility requirements"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Use ",(0,t.jsx)(n.code,{children:"<nav>"})," element with ",(0,t.jsx)(n.code,{children:'aria-label="Main navigation"'})]}),"\n",(0,t.jsx)(n.li,{children:"Links should have clear, descriptive text"}),"\n",(0,t.jsxs)(n.li,{children:["Current page indicated visually and programmatically (",(0,t.jsx)(n.code,{children:'aria-current="page"'}),")"]}),"\n",(0,t.jsx)(n.li,{children:"Keyboard navigable with visible focus states"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Considerations"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Items should fit comfortably; don't overflow or truncate"}),"\n",(0,t.jsx)(n.li,{children:"Keep items scannable - avoid long labels"}),"\n",(0,t.jsx)(n.li,{children:"Most important items typically placed first (left in LTR languages)"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"vertical-sidebar-navigation",children:"Vertical sidebar navigation"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Description"}),": Navigation items stacked vertically in a sidebar."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"When to use"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Applications with many navigation items"}),"\n",(0,t.jsx)(n.li,{children:"When items have sub-navigation"}),"\n",(0,t.jsx)(n.li,{children:"When navigation needs to remain visible during tasks"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Accessibility requirements"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Same as horizontal navigation"}),"\n",(0,t.jsxs)(n.li,{children:["Expandable sections need proper ARIA: ",(0,t.jsx)(n.code,{children:"aria-expanded"}),", ",(0,t.jsx)(n.code,{children:"aria-controls"})]}),"\n",(0,t.jsxs)(n.li,{children:["Consider ",(0,t.jsx)(n.code,{children:"aria-hidden"}
1)," for collapsed sections"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Considerations"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Sidebar width affects content area - balance accordingly"}),"\n",(0,t.jsx)(n.li,{children:"Deep nesting (more than 2 levels) gets confusing"}),"\n",(0,t.jsx)(n.li,{children:"Consider collapsible state for more content space"}),"\n"]}),"\n",(0,t.jsx)(r.A,{variant:"tip",title:"Skip links",children:(0,t.jsx)(n.p,{children:'Always provide a skip link that lets keyboard users bypass navigation and jump to main content. Place it as the first focusable element: "Skip to main content."'})}),"\n",(0,t.jsx)(n.h2,{id:"mobile-navigation",children:"Mobile navigation"}),"\n",(0,t.jsx)(n.p,{children:"Mobile screens require different navigation approaches due to limited space."}),"\n",(0,t.jsx)(n.h3,{id:"hamburger-menu",children:"Hamburger menu"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Description"}),": Navigation hidden behind a three-line icon that reveals a menu on tap."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"When to use"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Mobile viewports where horizontal navigation doesn't fit"}),"\n",(0,t.jsx)(n.li,{children:"When you have more than 4-5 primary destinations"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Accessibility requirements"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Button must have accessible label: ",(0,t.jsx)(n.code,{children:'aria-label="Open menu"'})]}),"\n",(0,t.jsxs)(n.li,{children:["State must be communicated: ",(0,t.jsx)(n.code,{children:'aria-expanded="false"'})," (or true when open)"]}),"\n",(0,t.jsx)(n.li,{children:"Menu must be keyboard navigable"}),"\n",(0,t.jsx)(n.li,{children:"Focus must be trapped within open menu"}),"\n",(0,t.jsx)(n.li,{children:"Focus should return to trigger when closed"}),"\n",(0,t.jsx)(n.li,{children:"Escape key should close the menu"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Considerations"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:'"Hamburger blindness" - some users don\'t recognize or notice it'}),"\n",(0,t.jsx)(n.li,{children:"Important actions may be better placed outside the menu"}),"\n",(0,t.jsx)(n.li,{children:"Opening animation should be quick (under 300ms)"}),"\n",(0,t.jsx)(n.li,{children:"Consider showing 2-3 key items even on mobile"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"bottom-navigation-mobile",children:"Bottom navigation (mobile)"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Description"}),": Fixed navigation bar at the bottom of the screen with icon+label items."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"When to use"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Mobile apps with 3-5 primary destinations"}),"\n",(0,t.jsx)(n.li,{children:"When users switch between sections frequently"}),"\n",(0,t.jsx)(n.li,{children:"When thumb reachability matters"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Accessibility requirements"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Icons must have text labels (icon-only is insufficient)"}),"\n",(0,t.jsx)(n.li,{children:"Current section indicated visually and programmatically"}),"\n",(0,t.jsx)(n.li,{children:"Touch targets at least 44\xd744 pixels"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Considerations"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Limits content area - use when navigation is truly primary"}),"\n",(0,t.jsx)(n.li,{children:"Don't include too many items (5 maximum)"}),"\n",(0,t.jsx)(n.li,{children:"More/overflow menu can handle additional items"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"tab-bar",children:"Tab bar"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Description"}),": Segmented control allowing switching between views at the same level."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"When to use"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Switching between related views of the same content"}),"\n",(0,t.jsx)(n.li,{children:"When users need to compare between tabs"}),"\n",(0,t.jsx)(n.li,{children:"Filtering/viewing options at the same hierarchy level"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Accessibility requirements"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Use ",(0,t.jsx)(n.code,{children:'role="tablist"'}),", ",(0,t.jsx)(n.code,{children:'role="tab"'}),", ",(0,t.jsx)(n.code,{children:'role="tabpanel"'})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-selected"})," indicates current tab"]}),"\n",(0,t.jsx)(n.li,{children:"Keyboard: Tab to enter, arrow keys to switch, Tab to move to panel"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Considerations"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Tabs shouldn't navigate to new pages - that's what nav does"}),"\n",(0,t.jsx)(n.li,{children:"Content should relate to the same thing, just different views"}),"\n",(0,t.jsx)(n.li,{children:"Avoid scrolling tab bars when possible"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"secondary-navigation",children:"Secondary navigation"}),"\n",(0,t.jsx)(n.h3,{id:"breadcrumbs",children:"Breadcrumbs"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Description"}),": Trail showing the user's location in the site hierarchy."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"When to use"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Sites with hierarchical structure"}),"\n",(0,t.jsx)(n.li,{children:"When users arrive via search or deep links"}),"\n",(0,t.jsx)(n.li,{children:"When users need to navigate up the hierarchy"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Accessibility requirements"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Use ",(0,t.jsx)(n.code,{children:'<nav aria-label="Breadcrumb">'})]}),"\n",(0,t.jsxs)(n.li,{children:["Structured list (",(0,t.jsx)(n.code,{children:"<ol>"}),") with proper markup"]}),"\n",(0,t.jsx)(n.li,{children:"Current page should be text, not a link"}),"\n",(0,t.jsxs)(n.li,{children:["Current page indicated with ",(0,t.jsx)(n.code,{children:'aria-current="page"'})]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Considerations"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Show the path, not history (Back button handles history)"}),"\n",(0,t.jsx)(n.li,{children:"Keep item names concise - full page titles may be too long"}),"\n",(0,t.jsx)(n.li,{children:"Truncate middle items if path is very deep"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"in-page-navigation--table-of-contents",children:"In-page navigation / Table of contents"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Description"}),": Links to sections within the current page."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"When to use"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Long-form content with distinct sections"}),"\n",(0,t.jsx)(n.li,{children:"Documentation and reference material"}),"\n",(0,t.jsx)(n.li,{children:"When users need to jump to specific content"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Accessibility requirements"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Links should match heading text exactly (or clearly relate)"}),"\n",(0,t.jsx)(n.li,{children:"Headings must have proper IDs for anchor links"}),"\n",(0,t.jsxs)(n.li,{children:["Consider ",(0,t.jsx)(n.code,{children:'aria-label="Table of contents"'})," for the nav"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Considerations"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Keep visible on wide screens; collapse on mobile"}),"\n",(0,t.jsx)(n.li,{children:"Highlight current section on scroll"}),"\n",(0,t.jsx)(n.li,{children:"Place consistently - left sidebar is common for docs"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"navigation-anti-patterns",children:"Navigation anti-patterns"}),"\n",(0,t.jsx)(n.h3,{id:"mystery-meat-navigation",children:"Mystery meat navigation"}),"\n",(0,t.jsx)(n.p,{children:"Icons without labels that don't clearly indicate their destination. Users shouldn't have to guess what will happen when they click."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Fix"}),": Always include text labels, or at minimum tooltips that appear immediately."]}),"\n",(0,t.jsx)(n.h3,{id:"hover-dependent-navigation",children:"Hover-dependent navigation"}),"\n",(0,t.jsx)(n.p,{children:"Navigation that only appears on hover fails for touch users and many assistive technology users."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Fix"}),": Ensure all navigation is accessible without hover."]}),"\n",(0,t.jsx)(n.h3,{id:"deep-nesting",children:"Deep nesting"}),"\n",(0,t.jsx)(n.p,{children:"More than 3 levels of navigation hierarchy causes disorientation. Users lose track of where they are."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Fix"}),": Flatten information architecture. Reconsider structure if you need more than 3 levels."]}),"\n",(0,t.jsx)(n.h3,{id:"inconsistent-placement",children:"Inconsistent placement"}),"\n",(0,t.jsx)(n.p,{children:"Navigation that moves between pages breaks spatial memory. Users expect navigation in predictable locations."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Fix"}),": Keep navigation in consistent positions across pages."]}),"\n",(0,t.jsx)(n.h3,{id:"overcrowded-navigation",children:"Overcrowded navigation"}),"\n",(0,t.jsx)(n.p,{children:"Too many items overwhelm users and make scanning impossible."}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Fix"}),": Prioritize ruthlessly. Use progressive disclosure. Consider a search-first approach for large item sets."]}),"\n",(0,t.jsx)(n.h2,{id:"responsive-navigation-transitions",children:"Responsive navigation transitions"}),"\n",(0,t.jsx)(n.h3,{id:"breaking-points",children:"Breaking points"}),"\n",(0,t.jsx)(n.p,{children:"Plan how navigation transforms:"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Desktop"})," (over 1024px): Full horizontal navigation visible"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Tablet"})," (768-1023px): May need to reduce items or switch to hamburger"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Mobile"})," (under 768px): Hamburger or bottom navigation"]}),"\n",(0,t.jsx)(n.h3,{id:"graceful-degradation",children:"Graceful degradation"}),"\n",(0,t.jsx)(n.p,{children:"Don't just hide navigation on mobile - provide an appropriate alternative:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Hamburger menu with full navigation"}),"\n",(0,t.jsx)(n.li,{children:"Bottom bar for key destinations"}),"\n",(0,t.jsx)(n.li,{children:"Search as an alternative to browsing"}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"testing-transitions",children:"Testing transitions"}),"\n",(0,t.jsx)(n.p,{children:"Test at breakpoint boundaries. Navigation often breaks at exactly the wrong widths during responsive transitions."}),"\n",(0,t.jsx)(l.A,{items:[{question:"How many items should primary navigation have?",answer:"5-7 is often ideal for horizontal navigation. More than 7 becomes hard to scan. Fewer than 3 may not justify dedicated navigation - consider alternatives."},{question:"Should I use icons in navigation?",answer:"Icons can help recognition but shouldn't replace labels. The combination of icon + label is most effective. Icon-only navigation only works when icons are universally understood (rare)."},{question:"Hamburger or visible navigation?",answer:"Visible when space allows. Hamburger menus reduce discoverability - usage typically drops. On mobile, visible bottom navigation often outperforms hamburger."},{question:"How do I handle mega menus accessibly?",answer:"Use proper ARIA for expanded states, trap focus within the open menu, allow Escape to close, and ensure all items are keyboard accessible. Test with screen readers - mega menus are complex."},{question:"Should navigation be sticky/fixed?",answer:"It depends. Sticky navigation provides constant access but uses screen space. Consider sticky on long pages, but not at the expense of content area - especially on mobile."}]}),"\n",(0,t.jsx)(o.A,{title:"Related resources",links:[{label:"Accessibility Checklist",to:"/guides/accessibility-checklist"},{label:"Forms Patterns",to:"/patterns/forms"},{label:"Onboarding Patterns",to:"/patterns/onboarding"},{label:"UX Basics",to:"/guides/ux-basics"}]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(x,{...e})}):x(e)}},9176:(e,n,i)=>{i.d(n,{A:()=>a});i(6540);var s=i(4164),t=i(4848);function a({variant:e="default",title:n,children:i}){return(0,t.jsxs)("div",{className:(0,s.A)("ux-callout","default"!==e&&`ux-callout--${e}`),children:[(0,t.jsx)("div",{className:"ux-callout__title",children:n||{default:"Note",tip:"Tip",warning:"Warning",note:"Field Note"}[e]}),(0,t.jsx)("div",{className:"ux-callout__content",children:i})]})}},5920:(e,n,i)=>{i.d(n,{A:()=>t});i(6540);var s=i(4848);function t({items:e}){return(0,s.jsx)("div",{className:"ux-faq",children:e.map((e,n)=>(0,s.jsxs)("div",{className:"ux-faq__item",children:[(0,s.jsx)("div",{className:"ux-faq__question",children:e.question}),(0,s.jsx)("div",{className:"ux-faq__answer",children:(0,s.jsx)("p",{children:e.answer})})]},n))})}},5388:(e,n,i)=>{i.d(n,{A:()=>a});i(6540);var s=i(6289),t=i(4848);function a({title:e="Related Resources",links:n}){return(0,t.jsxs)("div",{className:"ux-related",children:[(0,t.jsx)("div",{className:"ux-related__title",children:e}),(0,t.jsx)("ul",{className:"ux-related__list",children:n.map((e,n)=>(0,t.jsx)("li",{children:(0,t.jsx)(s.A,{to:e.to,className:"ux-related__link",children:e.label})},n))})]})}},8453:(e,n,i)=>{i.d(n,{R:()=>r,x:()=>l});var s=i(6540);const t={},a=s.createContext(t);function r(e){const n=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.