Vanilla Headless

##### Completely un-styled, fully accessible UI Web Components library, with fully unopinionated css styling.

!npm (tag)
!npm
!npm type definitions
!NPM
!npm bundle size



- Install
- Use
- Demo
- Web Components
- Popover
- Dropdown Menu
- Disclosure
- Tabs
- Mobile Navigation
- Dark Mode Button
- Toggle Switch
- Directives
- ScrollTop
- GoBack
- Use with PopperJs

$3

``bash
npm i vanilla-headless
`

`bash
yarn add vanilla-headless
`

`bash
// CDN
https://unpkg.com/vanilla-headless@latest
https://cdn.jsdelivr.net/npm/vanilla-headless@latest
`

$3

`typescript
import "vanilla-headless"
`

> That's all, no other javascript required. Just wrap you aria compliant markup with the appropriate tag and attributes.

> The example files is using TailwindCSS but is not required
> with TailwindUI

$3

- Navigation, Popover, Dropdown, Disclosure,
ScrollTop
- Dropdown Menu

Web Components

The web component is basically a wrapper around your semantic html. At it's most basic it will even work without any
css.

- popover
- dropdown menu
- disclosure
- navigation
- darkmode
- toggle switch

$3

The popover element makes it easy to show and hide html elements on page. This work great for dropdown, menus and
popover.


#### Events:

- Toggle dropdown on click event.
- Toggle dropdown on keyEvent Space and Enter keys
- Close dropdown keyEvent Esc key.
- Close dropdown on click outside of element.

#### Requirements:

- Button:
- must be typeof button
- must have attributes of aria-haspopup and aria-expanded
- ID must have same value as dropdown labelledby
- Dropdown
- must have attributes of aria-labelledby

`html


aria-expanded="true"
aria-haspopup="true"
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-sky-500"
id="popover"
type="button"
>
Popover

xmlns="http://www.w3.org/2000/svg">
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
fill-rule="evenodd"/>

class="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-sky-500 focus-visible:ring-opacity-50"
href="#"
>

xmlns="http://www.w3.org/2000/svg">

stroke-width="2">
clip-rule="evenodd"
d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z"
fill-rule="evenodd"
stroke="#0284c7"
stroke-width="2"
>
clip-rule="evenodd"
d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z"
fill-rule="evenodd"
stroke="#0284c7"
stroke-width="2"
>


Lorem ipsum dolor sit amet, consectetur.

class="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-sky-500 focus-visible:ring-opacity-50"
href="#"
>

xmlns="http://www.w3.org/2000/svg">

stroke-width="2">
clip-rule="evenodd"
d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z"
fill-rule="evenodd"
stroke="#0284c7"
stroke-width="2"
>
clip-rule="evenodd"
d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z"
fill-rule="evenodd"
stroke="#0284c7"
stroke-width="2"
>


Lorem ipsum dolor sit amet, consectetur.

class="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-sky-500 focus-visible:ring-opacity-50"
href="#"
>

xmlns="http://www.w3.org/2000/svg">

stroke-width="2">
clip-rule="evenodd"
d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z"
fill-rule="evenodd"
stroke="#0284c7"
stroke-width="2"
>
clip-rule="evenodd"
d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z"
fill-rule="evenodd"
stroke="#0284c7"
stroke-width="2"
>


Lorem ipsum dolor sit amet, consectetur.

`

$3

The dropdown is at the core the same as the popover element with the only difference that it adds additional
functionality to navigate menu elements via keyboard and adding aria-current attribute to track selected element.

![](./img/dropdown.gif)

#### Events:

- Toggle dropdown on click event.
- Toggle dropdown on keyEvent Space and Enter keys
- Navigate up and down with Tab, Shift + Tab, DownArrow, UpArrow, RightArrow, LeftArrow keys
- Close dropdown keyEvent Esc key.
- Close dropdown on click outside of element.

#### Requirements:

- Button:
- must be typeof button
- must have attributes of aria-haspopup and aria-expanded
- ID must have same value as dropdown labelledby
- Dropdown
- must have attributes of aria-labelledby
- dropdown require at least 1 anchor or button tag with attribute role="menuitem"

`html

aria-expanded="true"
aria-haspopup="true"
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500"
id="menu-button"
type="button"
>
Dropdown

xmlns="http://www.w3.org/2000/svg">
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
fill-rule="evenodd"/>

aria-labelledby="menu-button"
aria-orientation="vertical"
class="origin-top-right absolute w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
tabindex="-1"
>

href="#account" id="menu-item-0" role="menuitem" tabindex="-1"
>Account settings >
href="#support" id="menu-item-1" role="menuitem" tabindex="-1"
>Support >
href="#license" id="menu-item-2" role="menuitem" tabindex="-1"
>License >

class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
id="menu-item-3"
role="menuitem"
tabindex="-1"
type="submit"
>
Sign out

`

$3

The Disclosure element is ideal for hide and showing a list of elements. Best used for components like for Q&A's.


#### Events:

- Toggle panels on click event.
- Toggle panels on keyEvent Space and Enter
- Navigate up and down with Tab, Shift + Tab, DownArrow, UpArrow

#### Requirements:

- Button:
- must be typeof button
- must have attributes of aria-controls and aria-expanded
- Dropdown
- must have a ID matching aria-controls

`html

aria-controls="faq1_desc"
aria-expanded="true"
class="flex w-full rounded-md bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 mb-2"
type="button"
>
What do I do if I have a permit for an assigned lot, but can't find a space there?

Park at the nearest available parking meter without paying the meter and call 999-999-9999 to report the
problem. We will note and approve your alternate location and will
investigate the cause of the shortage in your assigned facility.

aria-controls="faq2_desc"
aria-expanded="false"
class="flex w-full rounded-md bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 mb-2"
type="button"
>
What do I do if I lose my permit or if my permit is stolen?

You should come to the Parking office and report the loss. There is a fee to replace your lost permit. However,
if your permit was stolen, a copy of a police report needs
to be submitted along with a stolen parking permit form for a fee replacement exemption.

aria-controls="faq3_desc"
aria-expanded="false"
class="flex w-full rounded-md bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 mb-2"
type="button"
>
Is there free parking on holidays?

All facilities are restricted from 2:00 am - 6:00 am on all days. No exceptions are made for any holiday or
recess except those officially listed as a
Holidays
in the calendar. Please note: 24-hour rental spaces, 24-hour rental lots, and disabled parking is enforced at
all times.

aria-controls="faq4_desc"
aria-expanded="false"
class="flex w-full rounded-md bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 mb-2"
type="button"
>
Do all parking facilities have the same enforcement rules?

Some parking facility restrictions differ from others. Be sure to take note of the signs at each lot entrance.

`

$3

_Since v1.3.0_

The Tab element is ideal for hide and showing a list of elements. Best used for components like for Tabs.


#### Events:

- Toggle panels on click event.
- Toggle panels on keyEvent Space and Enter
- Navigate up and down with Tab, Shift + Tab, DownArrow, UpArrow

#### Requirements:

- Button:
- must be typeof button
- must have attributes of aria-controls and aria-expanded
- Dropdown
- must have a ID matching aria-controls

`html

aria-controls="tab-1"
aria-expanded="false"
class="flex w-full rounded-md bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 mb-2"
type="button"
>
Tab 1

aria-controls="tab-2"
aria-expanded="true"
class="flex w-full rounded-md bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 mb-2"
type="button"
>
Tab 2

aria-controls="tab-3"
aria-expanded="false"
class="flex w-full rounded-md bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 mb-2"
type="button"
>
Tab 3

aria-controls="tab-4"
aria-expanded="false"
class="flex w-full rounded-md bg-blue-100 px-4 py-2 text-left text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 mb-2"
type="button"
>
Tab 4

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, odit voluptas. Consequuntur debitis doloribus error iusto minus non odit quam!

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, odit voluptas. Consequuntur debitis doloribus error iusto minus non odit quam!

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, odit voluptas. Consequuntur debitis doloribus error iusto minus non odit quam!

Tab 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, odit voluptas. Consequuntur debitis doloribus error iusto minus non odit quam!

`

$3

This component allow you to add hamburger toggle functionality to your navigation by adding aria labels to button
and the section you want to hide and show. The data attribute of data-state can be used to style or hide element.

![](./img/navbar.gif)

#### Events:

- Toggle mobile menu with mouse click events.
- Toggle mobile menu pressing down on Enter and Space keys.
- Close mobile menu pressing Esc Key.
- Close mobile menu by clicking outside menu.
- Add multiple data-state of open and close
- Support two-way binding on state change of data-state

#### Requirements:

- Button:
- must be typeof button
- must add an attribute of aria-expanded aria-controls
- Mobile Menu
- must have a html element with an id matching aria-controls

`html

Vanilla Headless
src="https://raw.githubusercontent.com/DesignByCode/vanilla-headless/main/img/vh.svg"/>

aria-controls="mobile_close"
aria-expanded="false"
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500"
type="button"
>
Open menu

xmlns="http://www.w3.org/2000/svg">

Sign in
class="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-amber-600 hover:bg-amber-700"
href="#"
>
Sign up

Pricing

Docs

Help Center

Guides

Events

Security

class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-amber-600 hover:bg-amber-700"
href="#"
>
Sign up


Existing customer?
Sign in

`

$3

The dark mode component will toggle between dark and light and save the result to localStorage.


#### Events:

- Toggle theme button with mouse click events.
- Toggle theme button pressing down on Enter and Space keys.
- Adds a data-theme to root component

#### Requirements:

- Button:
- must be typeof button
- There must be at least 1 headless-darkmode component on every page. It is recommended to use it with in a
section that will be display on every page. Places like navigation or footer will work great.

`html


class="px-4 py-2 flex justify-center space-x-2 inline-block rounded-md dark:bg-white dark:text-gray-600 bg-gray-700 text-gray-100 shadow-md">

d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"/>

Dark Mode


`

$3

The toggle component allow you to turn a button elements into toggle switch

#### Events

- Toggle switch with mouse click event
- Toggle switch by pressing down on Enter and Space keys.

#### Requirements

- Button element with type of button

`html


class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
type="button">
Use setting



`

#### Styling toggle state

Markup the button the way you want and adding data-switch to one or multiple elements. This will set the data
attribute to "on" or "off". Now you can style, hide or show elements by styling data attribute. By default, this
attribute will be added to the top level component.

`css
headless-toggle[data-switch="on"] button[aria-checked] {
background: indigo;
}

headless-toggle[data-switch="on"] span[aria-hidden="true"] {
transform: translateX(20px);
}
`

Directives

Directives are markers on a DOM element to attach a specified behavior to that DOM element.

- Button
- ScrollTop
- GoBack

$3

The button directive just adds event listeners to set aria-pressed attributes to a button element. Just add
is="headless-button" to button element. Use css to style button using css propery button[aria-pressed=true]
or button[aria-pressed=false]


#### Events

- Add aria-pressed="true | false" on keydown, keyup, mouse click

#### Requirements:

- Must be a button element.
- Just add is="headless-button" to button elements

$3

The scroll-to-top button makes it super easy to add this feature to your website. Just add a button and add the
attribute of is="headless-scrolltop" and that is it.

![](./img/scrolltop.gif)

#### Events:

- Hide button on initial load.
- Hide and show button on scroll.
- Scroll to top on Mouse click.
- Scroll to top on Keydown for Space, Enter and Ctrl + Home.

#### Requirements:

- Button:
- must be typeof button
- must add an attribute of is="headless-scrolltop"

`html

Scroll to top
`

$3

The headless-goback directive allow you to turn a button into go to previous page button using window.history
and adding the necessary aria indicators and events

#### Events:

- Trigger element on mouse click event
- Trigger element on keyboard event, when using Space or Enter
- Automatically set aria-pressed to true and false

`html

Go Back
`

$3

PopperJs is already bundle in and only require an attribute of popper to work. PopperJs only works on Popover,
DropDown and Navigation component.

#### Optional

- Popper.js
- Required: Add attribute of popper or popper="true" to enable popper.js
- Change placement with attribute placement="bottom-end bottom-start"
- Change offset with attribute offset="0 20"

#### Use with PopperJs

Attribute can be seperated by comma or empty space

`html

``