Location, page framing, side navigation, and compact movement through the site.
3 Component References
Location, page framing, side navigation, and compact movement through the site.
8a17b3e1-0800-4d24-9a71-000000000008Use on nested detail pages. The last item is plain text and carries aria-current.
ta-breadcrumbs.ta-breadcrumbs { display:flex; flex-wrap:wrap; gap:7px; font:400 10px var(--font-geist-mono),monospace; text-transform:uppercase; }Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
The canonical persistent section menu for the Member Center and other multi-part workspaces. It borrows the improved dropdown and header-flyout language without behaving like a form control: rounded icon-led rows, neutral borders, short Title Case descriptions, a dark lift on hover, and a solid theme-color current row. Use buttons for same-page sections and links for routes; never add checkboxes or an active underline.
ta-menu-list ta-side-nav; ta-menu-item ta-menu-item--section; ta-menu-item__icon--boxed; ta-menu-item__copy; ta-menu-item__arrow<nav className="ta-menu-list ta-side-nav" aria-label="Member Center Sections">
<button className="ta-menu-item ta-menu-item--section" aria-current="location" aria-pressed="true">
<span className="ta-menu-item__icon ta-menu-item__icon--boxed"><PageIcon name="member" /></span>
<span className="ta-menu-item__copy"><strong>Profile</strong><small>Public Identity</small></span>
<span className="ta-menu-item__arrow" aria-hidden="true">→</span>
</button>
</nav>.ta-side-nav { display:grid; gap:7px; padding:8px; border:1px solid var(--ta-rule); border-radius:var(--ta-radius-lg); background:linear-gradient(145deg,#1b1b1e,#111113); box-shadow:var(--ta-shadow-offset); } .ta-menu-item { min-height:57px; border:1px solid #393a3f; border-radius:var(--ta-radius-md); background:linear-gradient(100deg,#202125,#151618 72%); } .ta-menu-item[aria-current=location] { border-color:var(--theme-accent); background:var(--theme-accent); box-shadow:3px 4px 0 rgb(from var(--theme-accent) r g b / .42); color:#fff; }Source: app/settings/settings-panel.tsx; app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
The shared header navigation for Content, Tools, Community, War Room, and About. Desktop uses boxed flyouts; mobile uses a full-height, two-level menu with section layers, Back and Close controls, route highlighting, focus containment, scroll locking, and the same icon-led destination rows. Both render from site-navigation.json through buildSiteNavigation, so destinations, labels, descriptions, active-route rules, and War Room tool order cannot drift between screen sizes. Use these navigation components for destinations; do not substitute a form-control dropdown.
DesktopNavigation; MobileNavigation; NavigationFlyout; desktop-nav-menu; mobile-navigation-panel; navigation-flyout<button
type="button"
data-flyout="tools"
aria-expanded={open}
aria-controls="desktop-nav-tools"
>
<span>Tools</span><i aria-hidden="true">{open ? "−" : "+"}</i>
</button>
{open ? (
<NavigationFlyout
id="desktop-nav-tools"
eyebrow="Document / Research / Act"
title="Tools Library"
items={items}
onNavigate={closeMenu}
/>
) : null}.desktop-nav-menu > button { height:44px; border:1px solid #55575c; border-radius:4px; } .desktop-nav-menu > button[aria-expanded=true] { border-color:var(--theme-accent); background:var(--theme-accent); color:#fff; box-shadow:3px 4px 0 rgb(from var(--theme-accent) r g b / .42); } .navigation-flyout { width:390px; padding:18px; border:1px solid #4d4d51; border-radius:7px; background:linear-gradient(145deg,#1b1b1e,#111113); box-shadow:18px 20px 0 rgba(0,0,0,.3),-4px -4px 0 rgb(from var(--theme-accent) r g b / .1); }Source: app/ui/site-navigation.json; app/ui/site-navigation.ts; app/ui/desktop-navigation.tsx; app/ui/mobile-navigation.tsx; app/ui/navigation-flyout.tsx; app/styles/canonical.css; app/globals.css. Existing shared components are identified when they remain the live implementation.