Missing.js

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://the.missing.style/v1.0.9/missing-js/tabs.js">

§ Initializing dynamic content

For dynamically inserted content: initialize it as such:

import tabs from "https://the.missing.style/v1.0.9/missing-js/tabs.js";
// ... insert some content ...
tabs(theContentIJustInserted);
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://the.missing.style/v1.0.9/missing-js/menu.js">

import { menu, menuButton } from "https://the.missing.style/v1.0.9/missing-js/menu.js";

All notes above about initializing dynamic content apply here.

§ Expand/collapse navbar

See Components § Navbar

<script type="module" src="https://the.missing.style/v1.0.9/missing-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 -->
    </button>
    <!-- rest of navbar... -->
</header>

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).