Navigation en fil d’Ariane de la carte d’accès aux archives
Dans un scénario de carte d’accès aux archives, réaliser une navigation en fil d’Ariane : inclut du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptable à toutes les tailles.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigation en fil d’Ariane de la carte d’accès aux archives</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#c66a2d; --secondary:#b5c88d; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Trebuchet MS","PingFang SC",sans-serif; background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 35%),radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 38%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1160px,calc(100% - 30px));margin:auto;padding:60px 0}.mast{display:flex;justify-content:space-between;border-left:4px solid var(--accent);padding-left:22px;gap:28px;align-items:center;margin-bottom:34px}.mast h1{font-family:"Trebuchet MS","PingFang SC",sans-serif;font-weight:900;font-size:clamp(42px,9vw,94px);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);margin:0;line-height:.92}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:900 11px/1 ui-monospace,monospace;letter-spacing:.2em}.intro{max-width:680px;color:color-mix(in srgb,var(--ink) 68%,transparent);line-height:1.7}.scenario{padding:10px 16px;border:1px solid var(--secondary);border-radius:4px;box-shadow:0 0 20px color-mix(in srgb,var(--secondary) 30%,transparent)}.demo{border-color:color-mix(in srgb,var(--accent) 55%,transparent);border-radius:24px;box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 8%,transparent),0 0 60px color-mix(in srgb,var(--secondary) 12%,transparent);position:relative;min-height:410px;overflow:hidden;padding:clamp(24px,4vw,50px);background:color-mix(in srgb,var(--paper) 86%,transparent)}@media(max-width:700px){.mast{display:grid}.page{padding:22px 0}.demo{padding:16px}}
.stack{display:flex;flex-direction:column;gap:18px}.panel{padding:28px;border-left:7px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.action{min-height:46px;padding:11px 18px;border:0;border-bottom:3px solid var(--ink);background:transparent;font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.metric{font:900 clamp(32px,7vw,64px)/1 ui-monospace,monospace}.status{min-height:22px;padding-top:12px;border-top:1px dashed var(--line)}.muted{color:color-mix(in srgb,var(--ink) 62%,transparent)}.chip{display:inline-block;padding:5px 8px;background:var(--secondary)}.meter{height:12px;border:1px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
.composition-deck{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.deck-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;color:var(--paper);background:var(--ink);font:700 12px/1 ui-monospace,monospace}.deck-lights{display:flex;gap:7px}.deck-lights i{width:10px;height:10px;border-radius:50%;background:var(--accent)}.deck-lights i:nth-child(2){background:var(--secondary)}.deck-lights i:nth-child(3){background:color-mix(in srgb,var(--paper) 55%,transparent)}.composition-deck .demo{border:0;border-radius:0;box-shadow:none}
.breadcrumb-studio{display:grid;gap:20px;max-width:920px;margin:auto}.breadcrumb-studio header{display:flex;justify-content:space-between;gap:18px;align-items:end}.breadcrumb-studio h2{margin:.35em 0}.crumb-trail{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:18px;margin:0;border:1px solid var(--line);border-radius:18px;list-style:none;background:var(--paper)}.crumb-trail li{display:flex;gap:9px;align-items:center}.crumb-trail li:not(:last-child)::after{content:"/";color:var(--accent)}.crumb-trail a{color:inherit;text-underline-offset:4px}.crumb-trail [aria-current="page"]{font-weight:900}.crumb-builder{display:grid;grid-template-columns:minmax(200px,.8fr) auto;gap:14px;align-items:end}.crumb-builder label{display:grid;gap:8px;font-weight:800}.crumb-builder select{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}.crumb-preview{display:grid;gap:8px;padding:18px;border-left:5px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}.breadcrumb-studio code{padding:3px 6px;background:color-mix(in srgb,var(--secondary) 20%,transparent)}@media(max-width:680px){.breadcrumb-studio header,.crumb-builder{align-items:stretch;flex-direction:column;display:flex}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
</style>
</head>
<body data-aesthetic="dark-neon" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">dark-neon / fil d’Ariane / BEGINNER</span><h1>Navigation en fil d’Ariane de la carte d’accès aux archives</h1><p class="intro">Dans un scénario de carte d’accès aux archives, réaliser une navigation en fil d’Ariane : inclut du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptable à toutes les tailles.</p></div><span class="scenario">Carte d’accès aux archives</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>fil d’Ariane</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Zone interactive de navigation en fil d’Ariane de la carte d’accès aux archives"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Carte d’accès aux archives DISPATCH</span><h2>Poste de planification des cartes d’accès aux archives</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Navigation d’entrée de la carte d’accès aux archives</option><option>Navigation en fil d’Ariane de la carte d’accès aux archives</option><option>Navigation terminée de la carte d’accès aux archives</option></select></label><label>Durée de séjour<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="21"><span>minutes</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Accéder au chemin</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Navigation d’entrée de la carte d’accès aux archives</option><option value="2">Navigation en fil d’Ariane de la carte d’accès aux archives</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:navigation-menus-breadcrumb-builder --><div class="breadcrumb-studio panel"><header><div><span class="eyebrow">BREADCRUMB BUILDER</span><h2>Atelier du parcours de la carte d’accès aux archives</h2><p class="muted">Lors de l’ajout d’un niveau, synchronisez la mise à jour du chemin, de l’emplacement actuel et du résumé de niveau.</p></div><output id="crumbDepthStatus">3 chemin de niveau</output></header><nav aria-label="Fil d’Ariane"><ol id="crumbTrail" class="crumb-trail"></ol></nav><div class="crumb-builder"><label>Nom du niveau suivant <select id="crumbChoice"><option>Journal de carte d’accès aux archives</option><option>Collaboration pour la carte d’accès aux archives</option><option>Progression de la carte d’accès aux archives</option><option>Rappel de la carte d’accès aux archives</option><option>Collection de cartes d’accès aux archives</option><option>Vue d’ensemble du passe d’accès aux archives</option></select></label><div class="row"><button id="addCrumb" class="action primary" type="button" data-core-bridge="navigation-menus-breadcrumb-builder">Approfondir d’un niveau</button><button id="removeCrumb" class="action" type="button">Retour au niveau supérieur</button></div></div><aside id="crumbPreview" class="crumb-preview"><strong>Emplacement actuel</strong><p id="crumbPreviewText">En attente de sélection du chemin</p></aside></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:navigation-menus-breadcrumb-builder */
const crumbChoices=["Journal de carte d’accès aux archives","Collaboration pour la carte d’accès aux archives","Progression de la carte d’accès aux archives","Rappel de la carte d’accès aux archives","Collection de cartes d’accès aux archives","Vue d’ensemble du passe d’accès aux archives"];const crumbTrail=document.querySelector('#crumbTrail');const crumbChoice=document.querySelector('#crumbChoice');const crumbState=crumbChoices.slice(0,3);function renderCrumbs(){crumbTrail.replaceChildren();crumbState.forEach((label,index)=>{const item=document.createElement('li');if(index===crumbState.length-1){const current=document.createElement('span');current.textContent=label;current.setAttribute('aria-current','page');item.append(current);}else{const link=document.createElement('a');link.href='#crumb-'+index;link.textContent=label;link.addEventListener('click',event=>{event.preventDefault();crumbState.splice(index+1);renderCrumbs();});item.append(link);}crumbTrail.append(item);});document.querySelector('#crumbDepthStatus').textContent=crumbState.length+' chemin de niveau';document.querySelector('#crumbPreviewText').textContent=crumbState.join(' / ');announce('Nombre total de chemins actuels '+crumbState.length+' niveau');}document.querySelector('#addCrumb').addEventListener('click',()=>{const next=crumbChoice.value;if(crumbState.at(-1)===next)return announce('Déjà à '+next);crumbState.push(next);renderCrumbs();});document.querySelector('#removeCrumb').addEventListener('click',()=>{if(crumbState.length===1)return;crumbState.pop();renderCrumbs();});renderCrumbs();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"navigation-menus-breadcrumb-builder","selector":"[data-core-bridge=\"navigation-menus-breadcrumb-builder\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Navigation d’entrée de la carte d’accès aux archives","amount":12,"priority":"normal","touches":0}],["2",{"label":"Navigation en fil d’Ariane de la carte d’accès aux archives","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' minutes · '+bridge.summary;announce('Tâche en cours de la carte d’accès aux archives :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' minutes · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>