Tutorial 10 · Components

Tabs & Accordion

Keyboard-accessible tabs and disclosure — arrow keys, Home/End, native details.

10 minBeginnerlucUI 2 · v2.1.3

Objectives

Wire .luc-tabs with lucUI.js.
Use <details> accordion.

Steps

Tabs

Panel one

Panel two

tabs.html

<div class="luc-tabs">
  <div class="luc-tab-list" role="tablist">
    <button class="luc-tab active">One</button><button class="luc-tab">Two</button>
  </div>
  <div class="luc-tab-panel active">…</div>
</div>

Accordion

What is lucUI?

Framework + design system.

accordion.html

<details class="luc-accordion-item" open>
  <summary class="luc-accordion-header">Title</summary>
  <p>Body</p>
</details>

← Previous Next →