Navigation

Tab menus can be written using bullet lists or any other type of element with the right classes. The tabs with content panels require javascript to work.

Tab menus use themes for their different colors. If you want a different colored menu, try a different theme on the menu.

Elements and modifiers

ul.pds-c-menu li a
ul.pds-c-list[.breakout] [.pds-c-list-header] li
.pds-c-droplink .pds-c-droplink-content[.right] ul li
.pds-c-tabs-container
.pds-c-tabs-container > ( ul | ol | .pds-c-tabs ) [ + .pds-c-tabs-panels ]
.pds-c-tabs > ( li | .pds-c-tabs-item ) > ( a | .pds-c-tabs-link )[ .current ]
.pds-c-tabs-panels > .pds-c-tabs-panel[ .current ]
.pds-c-list[.breakout] [.pds-c-list-header] [.pds-c-list-item]

Menubar

Menubar (nested)

List header

Item 1
Item 2
Item 3

Plain List

Droplink: Hover me

Item 1
Item 2
Item 3

Droplink

<a class="pds-c-droplink"> Droplink: Hover me <div class="pds-c-droplink-content"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </a>

Tabs as single navigational element (with lists)

<nav class="pds-c-tabs-container " role="navigation">
  <ol>
    <li>
      <a href="#test" class="active">Thema's en topics</a>
    </li>
    <li>
      <a href="#test2" class="">onderwijsniveau's</a>
    </li>
    <li>
      <a href="#test3" class="">Praktische informatie</a>
    </li>
    <li>
      <span class=" pds-c-tabs-link ">Reviews</span>
    </li>
    <li>
      <a href="#test5" class="">Contact</a>
    </li>
  </ol>
</nav>

Tabs with content panels (with divs)

<div class="pds-c-tabs-container " role="navigation">
  <div class="pds-c-tabs">
    <div class="pds-c-tabs-item">
      <button class="pds-c-tabs-link active" role="tab" aria-controls="tab-content_1" id="Thema's_en_topics">Thema's en topics</button>
    </div>
    <div class="pds-c-tabs-item">
      <button class="pds-c-tabs-link " role="tab" aria-controls="tab-content_2" id="onderwijsniveau's">onderwijsniveau's</button>
    </div>
    <div class="pds-c-tabs-item">
      <button class="pds-c-tabs-link " role="tab" aria-controls="tab-content_3" id="Praktische_informatie">Praktische informatie</button>
    </div>
    <div class="pds-c-tabs-item">
      <button class="pds-c-tabs-link " role="tab" aria-controls="tab-content_4" id="Reviews">Reviews</button>
    </div>
    <div class="pds-c-tabs-item">
      <button class="pds-c-tabs-link " role="tab" aria-controls="tab-content_5" id="Contact">Contact</button>
    </div>
  </div>
  <div class="pds-c-tabs-panels">
    <div class="pds-c-tabs-panel active" tabindex="0" role="tabpanel" id="Thema's_en_topics-tab" aria-labelledby="Thema's en topics">
      <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
    </div>
    <div class="pds-c-tabs-panel " tabindex="0" role="tabpanel" id="onderwijsniveau's-tab" aria-labelledby="onderwijsniveau's">
      <p> Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. </p>
    </div>
    <div class="pds-c-tabs-panel " tabindex="0" role="tabpanel" id="Praktische_informatie-tab" aria-labelledby="Praktische informatie">
      <p> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
    </div>
    <div class="pds-c-tabs-panel " tabindex="0" role="tabpanel" id="Reviews-tab" aria-labelledby="Reviews">
      <p> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur </p>
    </div>
    <div class="pds-c-tabs-panel " tabindex="0" role="tabpanel" id="Contact-tab" aria-labelledby="Contact">
      <p> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident </p>
    </div>
  </div>
</div>