Missing.js is a JavaScript library implementing common UI patterns.

§ Tabs

See ARIA § Tabs

Add tabs.js as a module script to your page and mark up your tabs with the appropriate ARIA roles. Behavior will be added automatically.

<script type="module" src="https://unpkg.com/missing.css@1.1.1/dist/js/tabs.js"></script>

The tabs behavior emits these custom events:

§ Initializing dynamic content

For dynamically inserted content: initialize it as such:

import tabs from "https://unpkg.com/missing.css@1.1.1/dist/js/tabs.js";
// ... insert some content ...
Initializing a missing.js behavior on newly inserted content

Any elements that are inside a shadow DOM will also need to be initialized explicitly this way.

All of our components will find elements that need initialization within the subtree you pass in --- you could pass the whole document every time if you wanted to.

See ARIA § menu

<script type="module" src="https://unpkg.com/missing.css@1.1.1/dist/js/menu.js">


import { menu, menuButton } from "https://unpkg.com/missing.css@1.1.1/dist/js/menu.js";

All notes above about initializing dynamic content apply here.

§ Expand/collapse navbar

See Components § Navbar

<script type="module" src="https://unpkg.com/missing.css@1.1.1/dist/js/overflow-nav.js">

Make sure to add:

<header class="navbar" data-overflow-nav>
  <button class="iconbutton" data-nav-expander aria-hidden>
    &#x2630; <!-- trigram for heaven -->
  <!-- rest of navbar... -->

The navbar will remain horizontally scrollable.

All notes above about initializing dynamic content apply here (for all those times you dynamically add navbars to your page).