ARIA Patterns

1.1 #Principles.Directory Directory

Toggle example guides Toggle HTML markup

A Directory is a static outlined list of pages on a website. It is also commonly known as a “sitemap”. This principle does not have any styles, but it provides the semantic and accessible structure necessary to convey a sitemap.

See the [xDirectory rendering function](../api/global.html#xDirectory_renderer) for usage.

author
Chris Harvey
updated

DOM:

const {xDirectory} = require('aria-patterns')
let data = {
  "@type": "WebPage",
  "name": "A 2016 Event",
  "url": "https://2016.asce-event.org/",
  "hasPart": [
    {
      "@type": "WebPage",
      "name": "Registration",
      "url": "https://2016.asce-event.org/registration/",
      "hasPart": [
        { "@type": "WebPage", "name": "Why Attend" , "url": "https://2016.asce-event.org/registration/why-attend/" },
        { "@type": "WebPage", "name": "Volunteer"  , "url": "https://2016.asce-event.org/registration/volunteer/",
          "hasPart": { "@type": "WebPage", "name": "For Students", "url": "https://2016.asce-event.org/registration/volunteer/for-students/" }
        }
      ]
    },
    {
      "@type": "WebPage",
      "name": "Location",
      "url": "https://2016.asce-event.org/location/"
    },
    {
      "@type": "WebPage",
      "name": "Sponsor",
      "url": "https://2016.asce-event.org/sponsor/",
      "hasPart": [
        { "@type": "WebPage", "name": "Partnering Orgs"  , "url": "https://2016.asce-event.org/sponsor/partnering-orgs/"  },
        { "@type": "WebPage", "name": "Cooperating Orgs" , "url": "https://2016.asce-event.org/sponsor/cooperating-orgs/" }
      ]
    }
  ]
}
document.querySelector('header > nav').append(
  xDirectory.render(data)
)
Example
Markup: ../../test/out/x-directory.test.html 

<header><nav>
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/" itemprop="url">
          <slot itemprop="name">Home</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/registration/" itemprop="url">
          <slot itemprop="name">Registration</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/registration/why-attend/" itemprop="url">
          <slot itemprop="name">Why Attend</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/registration/volunteer/" itemprop="url">
          <slot itemprop="name">Volunteer</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/registration/volunteer/for-students/" itemprop="url">
          <slot itemprop="name">For Students</slot>
        </a>
      </li>
    </ol>
</li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/program/" itemprop="url">
          <slot itemprop="name">Program</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/program/short-courses/" itemprop="url">
          <slot itemprop="name">Short Courses</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/program/technical-tours/" itemprop="url">
          <slot itemprop="name">Technical Tours</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/program/optional-tours/" itemprop="url">
          <slot itemprop="name">Optional Tours</slot>
        </a>
      </li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/location/" itemprop="url">
          <slot itemprop="name">Location</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/speakers/" itemprop="url">
          <slot itemprop="name">Speakers</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/speakers/distinguished-lecturers/" itemprop="url">
          <slot itemprop="name">Distinguished Lecturers</slot>
        </a>
      </li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/sponsor/" itemprop="url">
          <slot itemprop="name">Sponsor</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/sponsor/partnering-orgs/" itemprop="url">
          <slot itemprop="name">Partnering Orgs</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/sponsor/cooperating-orgs/" itemprop="url">
          <slot itemprop="name">Cooperating Orgs</slot>
        </a>
      </li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/exhibit/" itemprop="url">
          <slot itemprop="name">Exhibit</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/exhibit/exhibitor-list/" itemprop="url">
          <slot itemprop="name">Exhibitor List</slot>
        </a>
      </li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/about/" itemprop="url">
          <slot itemprop="name">About</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/contact/" itemprop="url">
          <slot itemprop="name">Contact</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/contact/submit-feedback" itemprop="url">
          <slot itemprop="name">Submit Feedback</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/contact/talk-representative" itemprop="url">
          <slot itemprop="name">Talk to a Representative</slot>
        </a>
      </li>
    </ol>
</li>
    </ol>
</nav></header>
Source: p-Directory.less, line 7